GTLFLoader is not a constructor

Questions
,
1 
var THREE = require('three');
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true}, );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 0);
document.querySelector("#screen").appendChild( renderer.domElement );

var loader = new THREE.GLTFLoader();

loader.load( 'untitled.glb', function (gltf) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );


var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x800000 } );
var cube = new THREE.Mesh( geometry, material );

window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();
})
scene.add( cube );

cube.position.x = 0;
camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

Trying to use GTLF Loader here with but im getting a GTLFLoader is not a constructor error. Also my import is saying its not being used although clearly i made a loader var use THREE.GTLFLoader()

2

When using CommonJS imports, you have to target the examples/js directory. examples/jsm contains ES6 modules which you can’t import with require.

3

When I do that I get the error. Also I got that straight from THREE.js documentation

THREE.GLTFLoader: As part of the transition to ES6 Modules, the files in ‘examples/js’ were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules.

aswell as saying that

THREE is not defined

Im also using parcel if that changes anything

4

It’s not a good idea to mix require() and import in the same file. These are two different ways to import files, and you should choose one and be consistent. Instead:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

Then, be sure to use new GLTFLoader and not new THREE.GLTFLoader.

5

Thanks for the help but I am now getting a new error

SyntaxError: “JSON.parse: unexpected character at line 1 column 1 of the JSON data”
parse GLTFLoader.js:214
load GLTFLoader.js:146
load three.module.js:36370

6

Please use your browser’s developer tools and look for network errors. This generally means the file you’re trying to load is not at the URL you are requesting.

Parcel doesn’t serve most static files by default, frustratingly, so you may need a plugin like parcel-plugin-static-files-copy to access your models and textures.

1 Like
7

Thanks for your help. Just when you responded I found a stackoverflow solution similair to the one you were describing. It really is frustrating that parcel does that, thanks!

1 Like