Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| from streamlit.components.v1 import html | |
| # Embed custom HTML and JS for 3D rendering (Three.js example) | |
| html_code = """ | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="threejs-container" style="width: 100%; height: 500px;"></div> | |
| <script> | |
| // Three.js rendering code here | |
| var scene = new THREE.Scene(); | |
| var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| var renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('threejs-container').appendChild(renderer.domElement); | |
| // Your 3D model or scene setup goes here | |
| var geometry = new THREE.BoxGeometry(); | |
| var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| var cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| camera.position.z = 5; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Display the HTML/JS in the Streamlit app | |
| html(html_code) | |