Code Editor for app.py

import streamlit as st
from streamlit_webgl import webgl_component
import json

st.title("3D Rotating Cube with Textures")

# Cube vertex positions
vertices = [
    # Front face
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    
    # Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0, -1.0, -1.0,
    
    # Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
     1.0,  1.0,  1.0,
     1.0,  1.0, -1.0,
    
    # Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,
    
    # Right face
     1.0, -1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0,  1.0,  1.0,
     1.0, -1.0,  1.0,
    
    # Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0,
]

# Texture coordinates
textureCoords = [
    # Front
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    # Back
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    # Top
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    # Bottom
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    # Right
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    # Left
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
]

# Indices for the cube faces
indices = [
    0,  1,  2,    0,  2,  3,  # front
    4,  5,  6,    4,  6,  7,  # back
    8,  9,  10,   8,  10, 11, # top
    12, 13, 14,   12, 14, 15, # bottom
    16, 17, 18,   16, 18, 19, # right
    20, 21, 22,   20, 22, 23, # left
]

# WebGL component configuration
config = {
    "width": 600,
    "height": 400,
    "data": {
        "vertices": vertices,
        "textureCoords": textureCoords,
        "indices": indices,
    },
    "textures": [
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/crate.gif",  # Front
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/brick_bump.jpg",  # Back
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/hardwood2_diffuse.jpg",  # Top
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/grasslight-big.jpg",  # Bottom
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/water.jpg",  # Right
        "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/disturb.jpg",  # Left
    ],
    "clearColor": [0.0, 0.0, 0.0, 1.0],
    "rotationSpeed": 0.01
}

# Custom JavaScript for WebGL rendering
webgl_component(
    shader_config="""{
        vertexShader: `
            attribute vec3 position;
            attribute vec2 texCoord;
            uniform mat4 modelViewMatrix;
            uniform mat4 projectionMatrix;
            varying vec2 vTexCoord;
            
            void main() {
                vTexCoord = texCoord;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `,
        fragmentShader: `
            precision mediump float;
            varying vec2 vTexCoord;
            uniform sampler2D uSampler;
            
            void main() {
                gl_FragColor = texture2D(uSampler, vTexCoord);
            }
        `,
        onRender: (gl, program, data, uniforms, textures) => {
            const rotation = performance.now() * 0.001 * config.rotationSpeed;
            
            // Update model-view matrix for rotation
            const modelViewMatrix = mat4.create();
            mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -5]);
            mat4.rotate(modelViewMatrix, modelViewMatrix, rotation, [1, 1, 0]);
            
            // Update projection matrix
            const projectionMatrix = mat4.create();
            mat4.perspective(projectionMatrix, 45 * Math.PI / 180, gl.canvas.width / gl.canvas.height, 0.1, 100.0);
            
            // Set uniforms
            gl.uniformMatrix4fv(uniforms.modelViewMatrix, false, modelViewMatrix);
            gl.uniformMatrix4fv(uniforms.projectionMatrix, false, projectionMatrix);
            
            // Draw cube faces with different textures
            for (let i = 0; i < 6; i++) {
                gl.bindTexture(gl.TEXTURE_2D, textures[i]);
                gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, i * 12);
            }
        }
    }""",
    key="rotating_cube",
    config=config
)

st.markdown("""
This example shows a rotating cube with different textures on each face. The cube rotates continuously around its axes.
The textures are loaded from Three.js example textures.

* Front: Wooden crate texture
* Back: Brick bump texture
* Top: Hardwood texture
* Bottom: Grass texture
* Right: Water texture
* Left: Disturb pattern texture
""")