THREE.GLTFLoader is not a constructor

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.

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.

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!

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