Three.js: GLTFLoader.js Error: node.applyMatrix4 is not a function

Created on 31 Jan 2020 · 2Comments · Source: mrdoob/three.js

Hi,

I'm trying to load a basic GLTF model and I'm experiencing the following issue:

TypeError: "node.applyMatrix4 is not a function" loadNode https://threejs.org/examples/js/loaders/GLTFLoader.js:3012 _onError https://threejs.org/examples/js/loaders/GLTFLoader.js:57

It worked the last week.
Is there a way to fix it, please ?

Help (please use the forum)

Source

codingepaduli

Most helpful comment

https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js
https://threejs.org/examples/js/loaders/GLTFLoader.js

The way you are managed your library files is not valid. You are using the latest version of GLTFLoader with three.js (the core library) in version R110. You always have to ensure that example files and the actual three.js main file are from the same release.

You can easily fix the runtime error by using this file instead:

https://threejs.org/build/three.js

Please use the forum if you need more help.

Mugen87 on 31 Jan 2020

👍3 😄1

All 2 comments

I'm using the example on the site, I have not a server and I don't use the JSM module, but the JS module
You can try the issue using the following code:

<!doctype html>
<html>
    <head>
        <title>Il mio personaggio</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
        <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
`

and 

`
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            camera.position.x = 30;
            camera.position.y = 30;
            camera.position.z = 100;

            // add a light
            const light = new THREE.PointLight(0xFFFFFF, 3);
            light.position.x = 0;
            light.position.y = 30;
            light.position.z = 30;
            scene.add(light);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            // Start coding here
            let gltfLoader = new THREE.GLTFLoader();
            let modelUrl = "https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf";

            let gltfModel = null;
            let cars = null;
            let myCar = null;
            gltfLoader.load(modelUrl, (gltf) => {
                gltfModel = gltf.scene;
                scene.add(gltfModel);

                gltfModel.rotation.y += 0.5;

                cars = gltfModel.getObjectByName('Cars');
                myCar = cars.children[18];
                myCar.add(camera);
                console.log(cars);
            });

            function animate() {
                requestAnimationFrame( animate );

                renderer.render( scene, camera );
            }

            animate();

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

codingepaduli on 31 Jan 2020