No recibo ningún error, lo que me confunde, muestra una pantalla negra. y debido a que los fragmentos de HTML y CSS son tan pequeños, creo que mi falla está oculta en algún lugar dentro del JS.
// The three.js scene: the 3D world where you put objects const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xaaaaaa, 1); document.body.appendChild(renderer.domElement); const cube = { geometry: new THREE.BoxGeometry(1, 1, 1), material: new THREE.MeshBasicMaterial({ color: 0x00ff00 }) }; cube.mesh = new THREE.Mesh(cube.geometry, cube.material); scene.add(cube.mesh); camera.position.z = 5; function render() { renderer.render(scene, camera); cube.mesh.rotation.x += 0.08; cube.mesh.rotation.y -= 0.05; requestAnimationFrame(render); } html, body { overflow: hidden; user-select: none; padding: 0; margin: 0; } canvas { width: 100%; height: 100%; padding: 0; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Three.js app</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script> <script src="script.js"></script> </body> </html>Inicie la animación llamando a la función de render :
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xaaaaaa, 1); document.body.appendChild(renderer.domElement); const cube = { geometry: new THREE.BoxGeometry(1, 1, 1), material: new THREE.MeshBasicMaterial({ color: 0x00ff00 }) }; cube.mesh = new THREE.Mesh(cube.geometry, cube.material); scene.add(cube.mesh); camera.position.z = 5; function render() { renderer.render(scene, camera); cube.mesh.rotation.x += 0.08; cube.mesh.rotation.y -= 0.05; requestAnimationFrame(render); } render(); // <--- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>