Quería usar Three.js en un proyecto, pero no puedo mostrar nada en mi pantalla.
Después de un tiempo de resolución de problemas, pensé en preguntar y ver si alguien me puede ayudar.
DETALLES: alojamiento en XAMPP, aquí hay un ejemplo completo de Three.js que debería funcionar, que yo sepa, pero evidentemente no funciona:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="c"></canvas> <script type="module"> import { Camera, Material, Texture, } from "https://cdn.skypack.dev/three@0.132.2"; import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js"; function main() { const canvas = document.getElementById('c'); const renderer = new THREE.WebGLRenderer({canvas}); const fov = 75; const aspect = 2; // the canvas default const near = 0.1; const far = 5; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 2; const scene = new THREE.Scene(); const boxWidth = 1; const boxHeight = 1; const boxDepth = 1; const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth); const material = new THREE.MeshBasicMaterial({color: 0x44aa88}); const cube = new THREE.Mesh(geometry, material); scene.add(cube); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } </script> </body> </html>He vinculado a través de un cdn aquí, pero otros métodos, como la instalación con npm y la vinculación de esa manera, también han tenido los mismos resultados confusos. En cualquier caso, no arroja ningún error, por lo que estoy perdido.
Todo lo que termino obteniendo es una página en blanco.
La función main() no se llamará a sí misma. Cuando declara una función, debe asegurarse de ejecutarla, de lo contrario, simplemente se quedará allí, sin usar.
// First we declare the function function main() { // Do a bunch of stuff } // Then we call the function main();