Soy un principiante que intenta aprender TRES.js. Revisé la documentación de TRES.js e intenté codificar eso, pero cuando ejecuté mi página HTML estaba vacía y no tenía ni idea de qué hacer y usé el código de Visual Studio para hacer codificación
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; const animate = function () { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script> </body> </html>Su código funciona, el único cambio que hice fue insertar la biblioteca a través de CDN .
Tiene el script "tres.js" localmente, así que asegúrese de tener ese archivo en la carpeta js y que la carpeta esté en la raíz de su sitio.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> // Our Javascript will go here. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; const animate = function () { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script> </body> </html>