Estoy escribiendo algo de Javascript que carga un modelo glb 3d en una página web. Todo está funcionando.
Pero tan pronto como importo OrbitControl.js (ya sea desde mi carpeta local o en línea), el navegador me da este error:
TypeError no capturado: no se pudo resolver el especificador de módulo "tres". Las referencias relativas deben comenzar con "/", "./" o "../".*
Aquí está el código completo:
import * as THREE from './three.js-master/three.js-master/build/three.module.js' import {GLTFLoader} from './three.js-master/three.js-master/examples/jsm/loaders/GLTFLoader.js' import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js" const canvas = document.querySelector('.webgl') const scene = new THREE.Scene() const loader = new GLTFLoader() loader.load('assets/Prova.glb', function(glb){ const root = glb.scene; root.scale.set(1,1,1) scene.add(root); },function(xhr){ console.log((xhr.loaded/xhr.total * 100) + "% loaded") }, function(error){ console.log('An error occured loading gltf') }) const light = new THREE.DirectionalLight(0xffffff, 1) light.position.set(2,2,5) scene.add(light) 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.WebGL1Renderer ({ canvas: canvas }) renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) renderer.shadowMap.enabled = true renderer.outputEncoding = THREE.sRGBEncoding controls = new OrbitControls(camera, canvas) function animate(){ requestAnimationFrame(animate) controls.update(); renderer.render(scene, camera) } animate()OrbitControls debe importarse desde el directorio de examples , al igual que ha importado GLTFLoader .
Así que necesitarás algo como:
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; O, dado que está utilizando three.js-master en la ruta:
import { OrbitControls } from './three.js-master/three.js-master/examples/jsm/controls/OrbitControls";No estoy seguro si ha notado el código en OrbitControls.js. porque se nota
import { EventDispatcher, MOUSE, Quaternion, Spherical, TOUCH, Vector2, Vector3 } from 'three';Entonces, lo que significa que esto fue importado desde 'tres', y para resolver este problema, es posible que deba cambiar los 'tres' en la dirección de su 'tres.módulo.js'. Porque el archivo original de OrbitControls.js era para la instalación de npm.