Soy bastante nuevo en three.js y estoy tratando de cargar un modelo en mi lienzo. tan pronto como importo el GLTFLoader, obtengo la lectura anterior en la consola. ¿Qué está pasando? La sintaxis y las rutas relativas se ven bien. Realmente no entiendo lo que está pasando. Agregué otra carpeta para colocar la carpeta master three.js, pero no funciona.
import * as THREE from '../master/three.js-master/build/three.module.js' import {GLTFLoader} from '../master/three.js-master/examples/jsm/loaders/GLTFLoader.js' const canvas = document.querySelector('.webgl') const scene = new THREE.Scene() const loader = new GLTFLoader() loader.load('../assets/scene.gltf', function(gltf){ console.log(gltf); const root = gltf.scene; scene.add(root); }, function(xhr){ console.log((xhr.loaded/xhr.total * 100) + "% loaded") }, function(error){ console.log('error'); }) // const geometry = new THREE.BoxGeometry(1,1,1) // const material = new THREE.MeshBasicMaterial({ // color: 'green' // }) const boxMesh = new THREE.Mesh(geometry,material) scene.add(boxMesh) //Boiler Plate const sizes = { width: window.innerWidth, height: window.innerHeight, } const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100) camera.position.set(0,1,2) scene.add(camera) const renderer = new THREE.WebGLRenderer({ canvas: canvas }) renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) renderer.shadowMap.enabled = true // renderer.outputEncoding = true renderer.render(scene, camera) console.log('working') <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Landing Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas class="webgl"></canvas> <script type = "module" src="scripts.js"></script> <script> </script> </body> </html>Desde r137 uso de módulos ES6 como GLTFLoader en el navegador requiere un mapa de importación. Agregue la siguiente sección justo debajo de su canvas .
<!-- Import maps polyfill --> <!-- Remove this when import maps will be widely supported --> <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "../master/three.js-master/build/three.module.js" } } </script> La instrucción de importación three.js en sus scripts.js se ve así:
import * as THREE from 'three'