Glb file does not appear

Questions
,
1

Hi guys. I’m trying to import .glb file using GLTFLoader, but the model is not being showed. I see that it has been loaded in the inspect->network, but I can’t figure out why It does not displayed. I also checked here: https://gltf-viewer.donmccurdy.com/, 3d model shows successfully. Here is the code:

 let scene, mouse, camera, renderer, controls, hlight, obj;
        let directionalLight, light, light2, light3, light4;

        function init() {

            var container = document.getElementById('modeling');
            mouse = new THREE.Vector2(1, 1);

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xffffff);
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
            camera.rotation.y = 45/180*Math.PI;
            camera.position.x = 1;
            camera.position.y = 5;
            camera.position.z = 1;


            const cameraPole = new THREE.Object3D();
            scene.add(cameraPole);
            cameraPole.add(camera);

            controls = new THREE.OrbitControls(camera);
            controls.addEventListener('change', renderer);

            hlight = new THREE.AmbientLight(0x404040, 100);
            scene.add(hlight);

            directionalLight = new THREE.DirectionalLight(0xced646, 2);
            directionalLight.position.set(0, 1, 0);
            directionalLight.castShadow = true;
            scene.add(directionalLight);
            light = new THREE.PointLight(0xc4c4c4, 1, 100);
            light.position.set(0, 300, 500);
            scene.add(light);
            light2 = new THREE.PointLight(0xc4c4c4, 10);
            light2.position.set(500, 100, 0);
            scene.add(light2);
            light3 = new THREE.PointLight(0xc4c4c4, 10);
            light3.position.set(0, 100, -500);
            scene.add(light3);
            light4 = new THREE.PointLight(0xc4c4c4, 10);
            light4.position.set(-500, 300, 500);
            scene.add(light4);

            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            let loader = new THREE.GLTFLoader();
            loader.load("<?php echo base_url() . 'assets/models/glb/test5.glb'; ?>", function (gltf) {
                obj = gltf.scene.children[0];
                obj.scale.set(5, 5, 5);
                scene.add(gltf.scene);
                animate();
            });
        }

        var axis = new THREE.Vector3(4, 0, 7).normalize();
        var speed = 0.01;

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

        }

        init();

Thanks in advance.

2

This line has no effect.

What is the reason for using cameraPole? I suggest you let OrbitContorls handle the camera. It’s also not necessary to add the camera to the scene.

Rotation is handled by OrbitControls so this line can be removed.

Besides, try to position your camera like so for now:

camera.position.set( 0, 0, 100 );
3

Your fixings help to show the object, but

  1. it’s rotation using outside axios, I mean it’s not rotation using it’s own axios.

  2. I see https://gyazo.com/7c8499259485faedb7b4f68327af326a, but I should be this object
    https://gyazo.com/9d98f0575ac56c26fdfec43063ccb27d.