0
265
VistasNo sé por qué este ejemplo de three.js no funciona
Instalé three.js a través de npm con el comando: npm install --save three
Actualmente estoy usando VS-Code y tengo dos archivos: index.html e index.js Al copiar un ejemplo simple de threejs.org, parece que no puedo hacer que three.js funcione, porque solo aparece una pantalla en blanco después ejecutando un servidor en vivo, en lugar de un cubo giratorio.
Aquí está el código de ambos archivos:
import * as THREE from 'three'; 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; function animate() { requestAnimationFrame(animate) cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ) } animate(); <!DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "index.css"> <script src = "index.js"></script> <title >Title</title> </head> <body style = "margin: 0px;"> </body> </html>1 Respuestas
Responde la pregunta0
Si abre la página en un navegador y echa un vistazo al menú de herramientas de desarrollo, encontrará el siguiente error: 
.
Si modifica la etiqueta del script con type="module" para resolver este error, obtendrá un nuevo error: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../" .
Básicamente, el navegador no puede encontrar la biblioteca de JavaScript three.js.
Una solución fácil es decirle al navegador que cargue la biblioteca desde una URL web cuando se carga la página en lugar de instalarla a través de npm y luego cargar los archivos npm instalados en la página web:
<!DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "index.css"> <!-- This script tag loads the three.js library via url --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <title >Title</title> </head> <body style = "margin: 0px;"> <script src = "index.js"></script> </body> </html> // import is no longer needed since the added script tag loads the library and adds the global THREE variable into the page // import * as THREE from 'three'; 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; function animate() { requestAnimationFrame(animate) cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ) } animate(); También tenga en cuenta que document.body.appendChild solo funcionará una vez que se haya cargado el documento (lo que no sucede necesariamente antes de que se ejecute el script). Este problema se solucionó al agregar su etiqueta <script> debajo de la etiqueta <body> en el html.