My goal is to utilize three.js for displaying a gltf file. To achieve this, I need to import the GLTFLoader module from the three.js node package.
As per the documentation, the correct way to import it is:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
When I follow this import format, no errors are thrown. Any modification to the path results in a "module not found" error, confirming that the current import method locates the module correctly.
However, upon trying to instantiate the loader based on information provided in the documentation with this line:
var loader = new THREE.GLTFLoader();
I encounter the following error:
GLTFLoader is not a constructor
What am I missing in my implementation?
Despite experimenting with different import approaches, I have been unable to resolve the issue. Most resources reference the same import structure without encountering similar errors. Below is the relevant code snippet within its context.
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default {
name: 'ThreeTest',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null
}
},
methods: {
init: function() {
var loader = new THREE.GLTFLoader();
loader.load( 'assets/Models/eames_lounge_chair/scene.gltf', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
},
animate: function() {
},
onWindowResize: function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
},
mounted() {
this.init();
this.animate();
}
}
</script>
<style scoped>
#container {
width: 10em;
height: 10em;
}
</style>