GLTFLoader.js this.register error

Questions
,
1

Whenever I try to make the THREE.GLTFLoader object I receive this error code: “Uncaught TypeError: this.register is not a function”.

I need help!

2

Can you show us your code? Usually GLTFLoader doesn’t require THREE in front of it if you’re using an import statement.

3

Alrighty, so before I had just followed this video since it came out last year. But now I’ve tried using the import statement

import * as THREE from './three/build/three.min.js';
import * as GLTFLoader from './three/examples/js/loaders/GLTFLoader.js';

and it seems to just pile on the errors.

Uncaught TypeError: THREE.Scene is not a function
Uncaught TypeError: this.register is not a function

Now there are 2 errors, the newest one THREE.Scene I understand even less since when I write it in the console I receive an object in return. The old error seems to remain the same.

My current JS code is this:

// Variables for setup
import * as THREE from './three/build/three.min.js';
import * as GLTFLoader from './three/examples/js/loaders/GLTFLoader.js';
let container;
let camera;
let renderer;
let scene;
let obj3d;

function init(){
    container = document.querySelector('.scene');

    // Scene creation
    scene = THREE.Scene();

    // Camera setup
    const FOV = 80;
    const ASPECT = container.clientWidth / container.clientHeight;
    const NEAR = 0.1;
    const FAR = 500;
    camera = new THREE.PerspectiveCamera(FOV,ASPECT,NEAR,FAR);
    camera.position.set(-35, 40, 350);

    // Renderer setup
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

    // Load model
    let loader = THREE.GLTFLoader();
    loader.load('3d/neon/NEON_LOGO.glb', function(gltf){
        scene.add(gltf.scene);
        renderer.render(scene, camera);

    });

}

The HTML code is this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="application/javascript">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starting stream</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="script/app.js" defer></script>
</head>
<body>
    <div class="scene"></div>
</body>
</html>
4

Your code has a few errors. For instance, it’s not

  • scene = THREE.Scene(); but instead it’s:
  • scene = new THREE.Scene();

when importing GLTFLoader it should be
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
Then you can use it with:
let loader = new GLTFLoader();

1 Like
5

I ended up finding out I was using the wrong file all along, I was using js/example when you need to use jsm/example.

The other stuff was a problem too. But this was the cornerstone of the problems.