I'm relatively new to working with three.js and I am currently attempting to load a model into my canvas. However, when I import the GLTFLoader, I encounter the error message mentioned in the console above. Despite checking the syntax and relative paths, everything seems correct and I'm at a loss as to what could be causing the issue. I even tried placing the main three.js folder in another directory but that didn't solve the problem.
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>