Can't display glb objects in local server

I´ve been trying to load in glb format but the console shows this error:
(I’m using Servez right now but I used XAMPP previously , and the node.js simple one… but no luck)
the only thing that I can see is a black window with datgui controls in the corner.

Uncaught TypeError: Cannot read property ‘prototype’ of undefined
at GLTFLoader.js:1019
at GLTFLoader.js:3214
(anonymous) @ GLTFLoader.js:1019
(anonymous) @ GLTFLoader.js:3214
obj2gltf.js:3 Uncaught ReferenceError: require is not defined
at obj2gltf.js:3
(anonymous) @ obj2gltf.js:3
three.js:17679 THREE.WebGLRenderer 69
(index):59 Uncaught ReferenceError: require is not defined
at init ((index):59)
init @ (index):59
load (async)
(anonymous) @ (index):108

<!DOCTYPE html>
<html>
<head>
    <title>load glb objects </title>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="../libs/dat.gui.min.js"></script>
    <script src="../newlibs/obj2gltf.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var clock;
    var mixer;

    var control;

    init();
    animate();

    function init() {

        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set( 2, 2, - 2 );
        // clock

        clock = new THREE.Clock();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        scene = background = new THREE.color( 0xffffff );

        // loading models

        //const obj2gltf = require('obj2gltf');
        //const fs = require('fs');
        //obj2gltf('assets/models/Chaynik.obj')
        //    .then(function(gltf) {
        //        const data = Buffer.from(JSON.stringify(gltf));
        //        fs.writeFileSync('assets/models/Chaynik.gltf', data);
        //    });
        
        var loader = new THREE.GLTFLoader();
        //'assets/models/Assets.glb'
        loader.load('https://threejs.org/examples/models/gltf/Soldier.glb', 
        function (gltf){
            const model = gltf.scene;
            const animations = gltf.animations;

            mixer = new THREE.AnimationMixer ( model );

            // play the first animation
            console.log( animations );

            const action = mixer.clipAction( animation[ 0 ] );
            action.play();
            gltf.name('Assets')
            scene.add( model );
        } );

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer( { antialias: true} );
        renderer.SetPixelRatio( window.devicePixelRatio );
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2;

        

        var dirLight = new THREE.DirectionalLight();
        dirLight.position = camera.position.clone();
        scene.add(dirLight);

        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);

        window.addEventListener( 'resize', onWindowResize, false );

        var controls = new THREE.OrbitControls( camera );
        controls.lookAt(scene.position);
        controls.update();
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );   
    }


    control = new function () {
        this.rotationSpeed = 0.005;
        this.scale = 1;
    };
    addControls(control);



        // call the render function
function animate(){
    
    requestAnimationFrame( animate );

    const delta = clock.getDelta();

    if( mixer ) mixer.update( delta );

    renderer.render( scene, camera );

    function addControls(controlObject) {
        var gui = new dat.GUI();
        gui.add(controlObject, 'rotationSpeed', -0.1, 0.1);
        gui.add(controlObject, 'scale', 0.01, 2);
    }

    function render() {
        renderer.render(scene, camera);
        var Assets = scene.getObjectByName('Assets')
        if(Assets){
            Assets.rotation.y += control.rotationSpeed;
            Assets.scale.set(control.scale, control.scale, control.scale);
        }

        
    }
}

    // calls the init function when the window is done loading.
    //window.onload = init;

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

I’m afraid your code contains a lot of errors. Here is a live example with the corrected version:

https://jsfiddle.net/fq9r264t/

Some feedback to your code:

scene.background = new THREE.Color( 0xffffff );

name is not a method of the gltf object.

animations[ 0 ].

renderer.setPixelRatio( window.devicePixelRatio );

OrbitControls does not have a lookAt() method.

1 Like

thank you so much! haha yeah i found those errors yesterday except the gltf.name, how can i use dat gui with a glb file then?
btw i executed the code with corrections but when i try to run it this happens ! idk what i’m doing wrong i’m using Servez but i think it happens anywhere i put my code into:

<!DOCTYPE html>
<html>
<head>
    <title>load glb objects from OBJ , FBX </title>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <!--<script src="../libs/dat.gui.min.js"></script> -->
    <!--<script src="../newlibs/obj2gltf.js"></script>>-->

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>

        // global variables
        var renderer;
        var scene;
        var camera;
        var clock;
        var mixer;

        init();
        animate();

        function init() {

            // create a camera, which defines where we're looking at.
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10 );
            camera.position.set( 2, 2, - 2 );
             clock

            clock = new THREE.Clock();

            // create a scene, that will hold all our elements such as objects, cameras and lights.
            scene = new THREE.Scene();

            scene = background = new THREE.Color( 0xffffff );

            // loading models

            //const obj2gltf = require('obj2gltf');
            //const fs = require('fs');
            //obj2gltf('assets/models/Chaynik.obj')
            //    .then(function(gltf) {
            //        const data = Buffer.from(JSON.stringify(gltf));
            //        fs.writeFileSync('assets/models/Chaynik.gltf', data);
            //    });




            var loader = new THREE.GLTFLoader();
            //'assets/models/Assets.glb'
            loader.load('https://threejs.org/examples/models/gltf/Soldier.glb', 
                        function (gltf){
                const model = gltf.scene;
                const animations = gltf.animations;

                mixer = new THREE.AnimationMixer ( model );

                //play the first animation
                console.log( animations );

                const action = mixer.clipAction( animations[ 0 ] );
                action.play();
                scene.add( model );
            } );

            // create a render, sets the background color and the size
            renderer = new THREE.WebGLRenderer( { antialias: true} );
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.gammaOutput = true;
            renderer.gammaFactor = 2.2;

            var dirLight = new THREE.DirectionalLight();
            dirLight.position = camera.position.clone();
            scene.add(dirLight);

            // add the output of the renderer to the html element
            document.body.appendChild( renderer.domElement );

            window.addEventListener( 'resize', onWindowResize, false );

            var controls = new THREE.OrbitControls( camera );

        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );   
        }
            // call the render function
    function animate(){
        
        requestAnimationFrame( animate );

        const delta = clock.getDelta();

        if ( mixer ) mixer.update( delta );

        renderer.render( scene, camera );

    }

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

This line is still not correct. Just delete it. Besides, two lines above you have syntax error since clock is written in an empty line.

Updated fiddle: https://jsfiddle.net/380qcmut/

1 Like