Estoy tratando de hacer una escena simple con algunos Three.js para experimentar y actualmente tengo un problema desconocido.
En la consola del explorador sigue diciendo que Three.Scene() no es un constructor sin importar si importo mi descarga de Three o si uso cdnjs.
import * as Three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js'; let scene, camera, renderer, cube; function init() { scene = new Three.Scene(); camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new Three.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const material = new Three.MeshBasicMaterial({ color: 0x00ff00 }); scene.background = new Three.color(FFFF); const geometry = new Three.BoxGeometry(1, 1, 1); cube = new Three.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } init(); window.addEventListener('resize', onWindowResize, false) function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } animate();De hecho, busqué esta pregunta, pero los únicos que tenían el mismo problema que yo eran personas que escribieron mal algo o importaron algo mal.
Aquí el HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>THREE Test</title> <link rel="stylesheet" href="style.css" /> </head> <body> <script type="module" src="./code.js"></script> </body> </html>La importación no es correcta. Debería ser:
https://cdnjs.cloudflare.com/ajax/libs/tres.js/r128/tres.module.js
three.module.js es el archivo de compilación ESM, mientras que three.js es UMD. Si desea utilizar la sintaxis de importación de ES6 en su aplicación, debe utilizar la versión ESM.