I've been experimenting with Javascript to incorporate a glb 3d model into my webpage and so far, everything is going smoothly.
However, once I try to import the OrbitControl.js (whether from my local directory or online), the browser throws me this error:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".*
Below is the complete code snippet:
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()