GLTFloader not working in Firefox, Opera, Edge

Dear Reader,

did build a scene with an animated object, using the GLTFloader.
in Chrome it works
in Firefox not, Edge also not, Opera neither.
all have the same kind Error… some variable is not defined.

what can i do about this, i am only a newby in three.js

the Firefox console says:
TypeError: scope.manager is undefined - [GLTFLoader.js:47:4]

Edge Console:
SCRIPT5007: SCRIPT5007: Unable to get property ‘itemStart’ of undefined or null reference [GLTFLoader.js (47,4)]

Thank you

/**
 //////////////////////////////////////////////////////////////////////////////////
 // :. SETUP Three.js Scene                                                  .: ///
 //////////////////////////////////////////////////////////////////////////////////
 **/
var scene, canvas, camera, renderer;

var myWidth = 640;
var myHeight = 360;

// :. Scene
scene = new THREE.Scene();
canvas = document.getElementById( 'tree-canvas' );
canvas.style.width = myWidth + "px";
canvas.style.height = myHeight + "px";

// :. Renderer
renderer = new THREE.WebGLRenderer(  {antialias: true}  );
renderer.setSize( myWidth, myHeight );
canvas.appendChild( renderer.domElement );

// :. Camera
camera = new THREE.PerspectiveCamera( 50, myWidth / myHeight, 1, 5000 );
camera.position.y = 15;
camera.position.z = 50;
camera.lookAt( scene.position );

/**
 //////////////////////////////////////////////////////////////////////////////////
 // :. ADD - Scene - Performance Check                                       .: ///
 //////////////////////////////////////////////////////////////////////////////////
 **/
// :. Usage Statistics
var stats = new Stats();
document.body.appendChild( stats.dom );

/**
 //////////////////////////////////////////////////////////////////////////////////
 // :. Loader Animation                                                      .: ///
 //////////////////////////////////////////////////////////////////////////////////
 **/
var clock = new THREE.Clock();
var loader = new THREE.GLTFLoader();
var mixer, gltf;

loader.load( 'objects/animations/vFX_CubOcta_TESTING3.glb', function ( gltf ) {

	scene.add( gltf.scene );

	var model = gltf.scene;
  	mixer = new THREE.AnimationMixer(model);
  	var clip1 = gltf.animations;

  	// Play all animations
    clip1.forEach( function ( clip1 ) {
        mixer.clipAction( clip1 ).setDuration( 2 ).play();
    } );

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

/**
 //////////////////////////////////////////////////////////////////////////////////
 // :. Game Logic                                                            .: ///
 //////////////////////////////////////////////////////////////////////////////////
 **/
function render() {
    // grpAxis.rotation.y += 0.01;

    var dt = clock.getDelta();
    mixer.update(dt);

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

Could you include code showing how you’ve included threejs and GLTFLoader in your application? Or a demo, if possible?

Take animation programming out or comment it out and just get it to display first.

Code that typically works for me is:

    // this prevent cache with append of ?v=random
    let gtlfLoader1 = new THREE.GLTFLoader().setPath('./assets/models/');
    gtlfLoader1.load('MySexyModel.glb?v='+Math.floor(Math.random()*99999), (gltf) => {

        let scale = 2.9;
        gltf.scene.scale.set(scale,scale,scale);
        // gltf.scene.position.x = -0.1;
        // gltf.scene.position.y = -12;
        // gltf.scene.rotation.z = degToRad(180);

        // gltf.scene.rotation.y = degToRad(-90);
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                // log(child.name);
                child.material = new THREE.MeshPhongMaterial({
                    color: 0xFFFFFF,
                    emissive: 0x333333
                });
            }
        });

    });

This the whole page.
and a link to the animated object
www.ieoie.nl/Downloads/vFX_CubOcta_TESTING6.zip

In Chrome it also has some errors, but it works…
in Chrome it is an error about the update module, in particular the update mixer

thank you for diving in with me…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>:. THREE - Container - Loader</title>

    <script src="libs/tree/three.min.js"></script>

    <script src="libs/tree/OrbitControls.js"></script>
    <script src="libs/tree/dat.gui.min.js"></script>
    <script src="libs/tree/stats.min.js"></script>

    <script src="libs/tree/GLTFLoader.js"></script>
    <script src="libs/tree/ColladaLoader.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        html{
            overflow: hidden;
        }

        #tree-container{
            position: absolute;
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>

    <div id="tree-container">
        <div id="tree-canvas"></div>
    </div>

    <!-- :. Scripts After Page Load-->
<!--    <script src="scripts/three_empty/ioi_Scene_Loader_Animation.js"></script>-->

    <script>


        /**
         //////////////////////////////////////////////////////////////////////////////////
         // :. SETUP Three.js Scene                                                  .: ///
         //////////////////////////////////////////////////////////////////////////////////
         **/
        var scene, canvas, camera, renderer;

        var myWidth = 640;
        var myHeight = 360;

        // :. Scene
        scene = new THREE.Scene();
        // scene.background = new THREE.Color( 0x1092ff );
        scene.background = new THREE.Color( 0x099ff );
        canvas = document.getElementById( 'tree-canvas' );
        canvas.style.width = myWidth + "px";
        canvas.style.height = myHeight + "px";
        // canvas.style.backgroundColor = "#1092ff";

        // :. Renderer
        renderer = new THREE.WebGLRenderer(  {antialias: true}  );
        renderer.setSize( myWidth, myHeight );
        canvas.appendChild( renderer.domElement );

        // :. Camera
        camera = new THREE.PerspectiveCamera( 50, myWidth / myHeight, 1, 5000 );
        camera.position.y = 16;
        camera.position.z = 40;
        // camera.position.set = (0, 20, 350);
        camera.lookAt( scene.position );

        /**
         //////////////////////////////////////////////////////////////////////////////////
         // :. ADD - Scene - Lighting                                                .: ///
         //////////////////////////////////////////////////////////////////////////////////
         **/
        // :. Adding Lighting Setup
        var ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
        ambientLight.name = 'myAmbientLight';
        scene.add(ambientLight);

        var dirLight1 = new THREE.DirectionalLight(0xffffff, 1.1);
        dirLight1.name = 'myDirectionLight1';
        dirLight1.position.set(-4, 25, 5);
        dirLight1.lookAt(0, 0, 0);
        scene.add(dirLight1);

        var dirLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
        dirLight2.name = 'myDirectionLight2';
        dirLight2.position.set(0, -20, 0);
        dirLight2.lookAt(0, 0, 0);
        scene.add(dirLight2);

        /**
         //////////////////////////////////////////////////////////////////////////////////
         // :. ADD - Scene - Performance Check                                       .: ///
         //////////////////////////////////////////////////////////////////////////////////
         **/
        // :. Usage Statistics
        var stats = new Stats();
        document.body.appendChild( stats.dom );

        /**
         //////////////////////////////////////////////////////////////////////////////////
         // :. Loader Animation                                                      .: ///
         //////////////////////////////////////////////////////////////////////////////////
         **/
        var clock = new THREE.Clock();
        var loader = new THREE.GLTFLoader();
        var mixer, gltf;

        loader.load( 'objects/animations/vFX_CubOcta_TESTING6.glb', function ( gltf ) {

            scene.add( gltf.scene );

            var model = gltf.scene;
            mixer = new THREE.AnimationMixer(model);
            var clip1 = gltf.animations;

            // Play all animations
            clip1.forEach( function ( clip1 ) {
                mixer.clipAction( clip1 ).setDuration( 1.3 ).play();
            } );

            // Play a specific animation
            // var clip = THREE.AnimationClip.findByName( clips, 'dance' );
            // var action = mixer.clipAction( clip );
            // action.play();

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

        /**
         //////////////////////////////////////////////////////////////////////////////////
         // :. Game Logic                                                            .: ///
         //////////////////////////////////////////////////////////////////////////////////
         **/
        function render() {

            var dt = clock.getDelta();
            mixer.update(dt);

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


    </script>
</body>
</html>

this code does nothing… not in chrome, neither in Firefox
if i change the path to my objects…
load my object animation…

it shows not my object/animation in the div…
thank you for your attempt…

These are the Export Settings from Blender

The model looks fine in gltf-viewer.donmccurdy.com/. The error makes me assume something is wrong in the libs/tree folder – would you be able to ZIP up the whole directory? Or host a live version of the demo? I’d have to guess what versions of everything in libs/tree you’re using otherwise.

The mixer.update error is probably just because you’re calling it before the loader has finished loading, and that’s when the mixer is created. Instead, do:

if (mixer) mixer.update(dt);
2 Likes

@donmccurdy

the link to online version & .zip…
https://www.ieoie.nl/dev_2020/

when online it spits out the same error in Chrome, as it does in the other browsers
if i put the whole project in a new folder, it does not work either???

Local:

if (mixer) mixer.update(dt);

this solved the Chrome update error…
Thank you…

Working demo using your model:
https://dev.aftc.io/webgl/assist-projects/shakena-glb

Project browser:
https://dev.aftc.io/webgl/assist-projects/shakena-glb/

Project download:
https://dev.aftc.io/webgl/assist-projects/shakena-glb/project.zip

Browser testing Chrome, FF, Opera & Edge:

See console log for the list of all animations in your GLB.

@Darcey
Awesome… working in all browsers…

Thank you…
I will figure out what is the minimum script i need, and how to play all animations inside my clip, cause now it only plays only one.

@Darcey

where can i download this “three-r113.3” version
so i can also get the OrbitControls, the GUI, and Stats from the same version

cause it seems the problem is created by my version of Three.js

i just needed to link my file with your three-r113.3/three.js and the GFTLloader and all worked like a charm…

so i think its important to get all the modules i use from the same Three.js version.
Am i right in this assumption?

Yes, you should always use the same version of three.js for all of your files. Newest version (r113) can be downloaded from the main three.js page or from npm.

1 Like

@DolphinIQ

downloaded the latest version from tree.js
replaced the three.js and the GFTLloader, but then it does not load/display the object
yet the files from @Darcey do work…

very strange this is…
and with the files from Darcey i cannot set the duration anymore…
it aint yet completely user friendly…:wink:

thank you for the tip…

@DolphinIQ
it seems the folder where the three.js is placed in is not allowed to be called three
when i make it three-r6… NP
if i make it just three… update all the source links in html…nothing loads
if i add something behind the nae like three-r6… all works again…
strange but working again…
also can set the speed…(duration)

thank you all…
very happy chap at this end…:wink:

@shakena

This is more of a general coding guide than threejs specific but you should try to keep a clean folder structure, the project I gave to you has a solid and common folder structure that allows you to be sure where everything goes and others if/when they come to ever work on it…

I have a download of the latest version of three from github, I just copied the files I needed to a version named folder in the “includes/js/” folder. Named what it is “three” and its revision/version number “r111.3” etc. You could put the whole threejs folder in your javascript folder if you wanted (EG see video below).

Example:

Then you just upload the includes folder and index.html file to your server and all should be fine. Do not upload the node_modules folder…

Naming rules / best practices
Don’t use spaces in file names and no special characters, try to just stick with numbers, letters and dashes.

1 Like

@Darcey
Thank you, that was a good insight, apreciate this very much…
also finally understand what this npm is all about…
installed it… and it works
i have PyCharm as an Dev Toy
once pm was installed it wa setup automatically on next boot and terminal worked…

if i may ask, where does he get the three library from… does it download it every time i do… npm i three

did you create this file… aftc.min.js … ?

thank you very much for this insight…:wink:

  1. Yes I created the library aftc.js
    aftc.min.js is the minified/compressed build of the library which I use in most of my projects, it has many useful utilities that I use on a daily basis with all my javascript projects. I switch to aftc-modules for ES6 webpack projects. onReady, log wouldn’t work without aftc.js for example.

  2. Where did I get the three library from?
    “npm i three” this install threejs at its latest version. you need to google npm and take a look at the npm website. NPM projects are setup on github and npm links to them for download. Three is on github and npm and has links on its website for download.

If you were going to setup your project correctly you would use a packager to build your project eg gulp or webpack, here is a very very quick video I’ve done on how that works. So no more copy and pasting files around, 1 file is built into the includes/js/ folder and you just include it into your html file.

You should google / search youtube for instructions on npm, gulp, threejs, they will help you more.

2 Likes

@Darcey
wooow… or HOOOO, this is a lot to take in…

i’m just getting started with coding a website, knowing i am learning something complex.

working in my new website and have the intro almost ready, if done i will try to implement what you showed here, it looks like the proper way of doing things.

do you maybe have time for a 101 a questionnaire so i can ask questions in real time?

thank you very much for your support, i like to learn and do it in a proper way… :wink:

The best way to learn is, when you have a question google it or search for a video on it on youtube, there’s millions of references to what I’ve covered and more and in a lot more detail and slower and with voice overs lol… But you also got to try out things which is a big thing in the learning process.

And if your still stuck there are these forums, so if it’s threejs related, post here, if it’s just javascript related post on stackexchange and people will help, although they are often moody, arrogant, argumentative and condasending on stackexchange (event the mods/admins), but just ignore them and keep asking what you need to know and someone may shed light on your problem.

But try and stick to the structures I’ve shown you and you wont go far wrong. Here’s a structure with much more asset foldering for example.

assets/img

assets/models
assets/textures
assets/svg
assets/icons
assets/videos
assets/sounds

includes/css
includes/js
includes/fonts

@Darcey

thank you…
could not resist to try to build a project the way you showed…
if i do exactly what you show, it stops at: gulp build

it says
‘gulp’ is not recognized as an internal or external command,
operable program or batch file.

it also does not show up like an accepted function. i tried it a few times, install the gulp, gulp-concat, gulp-terser, once when i selected the project root folder, the other time the package.json or the gulpfile.js
did read on the internet it could change the outcome, but it did not…

the package.json file shows the 3 gulp devDependencies
still it does not build the project

can you think of something that goes wrong?
i’m using PyCharm instead of VS Code

in VS Code i get this error message
gulp : The term ‘gulp’ is not recognized as the name of a cmdlet, function, script file,
or operable program. Check the spelling of the name, or if a path was included, verify
that the path is correct and try again.
At line:1 char:1

  • gulp build
  •   + CategoryInfo          : ObjectNotFound: (gulp:String) [], CommandNotFoundException  
      + FullyQualifiedErrorId : CommandNotFoundException