Estoy tratando de importar ThreeJS y el ejemplo de ThreeJS FBXLoader a través de cdn. Para este propósito, he creado las siguientes importaciones.
<script type="module"> import * as THREE from 'https://cdn.skypack.dev/three'; import * as FBXLoader from 'https://cdn.skypack.dev/three/examples/js/loaders/FBXLoader'; </script> La importación de ThreeJS es exitosa porque puedo acceder a THREE después para renderizar una escena sin ningún problema. Sin embargo, la importación de FBXLoader falla con el siguiente mensaje de error.
<html> <head> <style> #canvas { display: flex; width: 100%; height: 100vh; flex-direction: column; } </style> <script type="module"> import * as THREE from 'https://cdn.skypack.dev/three'; //ThreeJS working fine when commenting out this import import * as FBXLoader from 'https://cdn.skypack.dev/three/examples/js/loaders/FBXLoader'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xeeeeee); const parent = document.getElementById("canvas"); const camera = new THREE.PerspectiveCamera(75, parent.offsetWidth / parent.offsetHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); const manager = new THREE.LoadingManager(); //const loader = new FBXLoader(manager); renderer.setSize(parent.offsetWidth, parent.offsetHeight); parent.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); </script> </head> <body> <div id="canvas"></div> </body> <html>¿Por qué FBXLoader no puede acceder a los TRES previamente importados?
Recuerde importar desde la subruta 'jsm' para garantizar la compatibilidad entre el módulo three.js es6 y el módulo del complemento es6 (en su caso, FBXLoader).
Para mí, agregar una versión después de 'tres' en la ruta de importación solucionó el problema.
import { FBXLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/FBXLoader';Aunque no sé por qué.
Espero eso ayude.