THREE.GLTFLoader is not a constructor

Questions
1

I’m trying to load a GLB model in the GLTFLoader but I keep getting the error: THREE.GLTFLoader is not a constructor I read already numerous threads here but I can seem to get it solved.

Just some info, I’m trying to load the model via WordPress. I tried a simple geometry shape in Three.js which worked but the GLTFLoader I can’t get working. Any help is much appreciated.

Here are my scripts and code:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js

And this is the code I’m using:

var scene, camera, renderer, hlight;

function init(){
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
	hlight = new THREE.AmbientLight (0x404040, 1);
	scene.add(hlight);
	
	renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
	renderer.setSize(window.innerWidth, window.innerHeight);
   
	document.body.appendChild(renderer.domElement);

	var loader = new THREE.GLTFLoader();
	loader.load('https://mywebsite/wp-content/uploads/2021/04/1FinalBrain.glb', function(gltf){
		scene.add(gltf.scene);
		renderer.render(scene,camera);
	},
	undefined, function ( error ) {

	console.error( error );
	});
}

init();

The 3D model doesn’t give any errors when I’m loading it in the online 3D viewer: https://gltf-viewer.donmccurdy.com/

Thanks in advance.

2

I’ve copied your code to a live example and everything seems to work fine: https://jsfiddle.net/y9x8bq4o/3/

BTW: It’s a bit more clear if you download resources from a single CDN and don’t mix them.

3

Thank you @Mugen87 for looking into this. Good to hear that everything is working on your side. Unfortunately here it is still not working. I changed the URLs to load the .js both to https://unpkg.com/three@0.128.0/build/three.min.js and https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js to be consistent and I changed my code to the following:

var scene, camera, renderer, hlight;

function init(){
  var container = document.getElementById( 'bottle' );
  
  //Create scene
	scene = new THREE.Scene();
  
  var fov = 35;
  var aspect = container.clientwidth / container.clientHeight;
  var near = 0.1
  var far = 500;
  
  // Camera Setup
  camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
  camera.position.set(0, 0, 30);
  
  var ambient = new THREE.AmbientLight(0x404040, 3);
  scene.add(ambient);
  
  //Renderer
  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  
  container.appendChild(renderer.domElement);
  
  //Load Model

	var loader = new THREE.GLTFLoader();
	loader.load('https://creativist-lab.com/wp-content/uploads/2021/04/FibalBrainLogo.gltf', function ( gltf ){
		scene.add(gltf.scene);
    console.log(gltf);
		renderer.render(scene,camera);
	});
}

But still without result, the area where the model should be is just blank. These are the errors that I’m seeing:

Uncaught ReferenceError: THREE is not defined
at GLTFLoader.js:3
at GLTFLoader.js:3629
(anonymous) @ GLTFLoader.js:3
(anonymous) @ GLTFLoader.js:3629

Is there anything else that I can try? Thanks!

4

So I finally got it working. What ended up being the problem for me is the order of loading the scripts. So in my case the GLTFLoader script loaded before the THREE.js script. When i switched the order around the errors disappeared.

1 Like
5

I tried it too but the error still occurs (Uncaught TypeError: THREE.GLTFLoader is not a constructor)

import * as THREE from './node_modules/three/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';


var renderer = new THREE.WebGLRenderer({ antialias: true, canvas: frame});
renderer.setSize( window.innerWidth-100, window.innerHeight-100 );
renderer.shadowMap.enabled = true;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

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




var model;
var modelUrl = 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf';

var loader = new THREE.GLTFLoader();
loader.load( modelUrl, function ( gltf ) {

  console.log(gltf)
  mixer = new THREE.AnimationMixer( gltf.scene );
  clips = gltf.animations;
  model = gltf.scene;
  model.scale.set(2.5,2.5,2.5);
  model.position.set(0,0,0);
  scene.add( model );

}, undefined, function ( e ) {
  console.error( e );
});




const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight);

const light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(4, -5, 5);
light.castShadow = true;
scene.add(light);

const lightTwo = new THREE.DirectionalLight(0xaab6ff, 0.5);
lightTwo.position.set(-5, 3, 2);
lightTwo.castShadow = true;
scene.add(lightTwo);




window.addEventListener('mousemove', function(e) {
    
    let percX = window.innerWidth*0.5 - e.clientX;
  
    camera.position.x = percX / 100;
  
    camera.lookAt(new THREE.Vector3(0,0,0));
});

window.addEventListener('touchmove', function(e) {
    let percX = window.innerWidth*0.5 - e.touches[0].pageX;

      camera.position.x = percX / 100;

      camera.lookAt(new THREE.Vector3(0,0,0));
});

window.addEventListener('scroll', function(e) {
  let elem = document.getElementById("frame");
  let div1 = elem.getBoundingClientRect().top - (window.innerHeight - elem.offsetHeight)/2;
    
    let percY = div1;
    camera.position.y = percY / 100;
  
    camera.lookAt(new THREE.Vector3(0,0,0));
});




function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();
6

It isn’t safe to import part of the three.js library from one source and a different part from another. Instead try:

import * as THREE from './node_modules/three/build/three.module.js';
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';

Also note that the loader must be referenced as GLTFLoader, not THREE.GLTFLoader, when imported in this way.

7

At first, I used the same path of library but I always encounter this problem when I’m using that

Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

8

Ah I see. Still, they must be from the same source. The code published to NPM is meant to be use with a bundler like Parcel, Webpack, or Snowpack, which will automatically handle modules so that you can just import from three or three/examples/jsm/... — if you are not using a bundler, then you will need to import from a single CDN instead. The examples in the three.js CDN installation docs may be helpful.

1 Like