[Solved] glTF model not visible after importing with GLTFLoader

gltf-loader

#1

I have made a cube in Blender, and have exported it using the export > glTF 2.0 to make a cube.glb file.

I am able to verify that the cube.glb is downloaded, and is in memory.

console.log shows:

THREE.WebGLRenderer 97
(index):85 model:  load cube
(index):91 100% loaded

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./three.js"></script>
    <script src='OrbitControls.js'></script>
    <script src='GLTFLoader.js'></script>
    <script src="./TrackballControls.js"></script>



    <title>GLFT Loader</title>
  </head>
  <body>
    <main>
      <section>
        <article>
          <header>
            <h1>GLFT Loader</h1>
          </header>
        </article>
        <div id="cube-container"></div>
        <nav id="cube-model-nav">
          <ul>
            <li><a id="load-cube-button" href='/load-cube'>load cube</a></li>
          </ul>
        </nav>
      </section>
    </main>

  <script>
  const material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
  const canvasEl = document.getElementById('cube-container');
  const containerWidth = canvasEl.offsetWidth;
  const containerHeight = canvasEl.offsetHeight;


  // create renderer
  const renderer = new THREE.WebGLRenderer(
    {
      antialias: true,
      alpha: true,
      autoClear: true,
      physicallyCorrectLights: true
    }
  );

  renderer.setPixelRatio(2);
  renderer.gammaOutput = true;
  renderer.gamaFactor = 2.2;
  renderer.setSize( containerWidth, containerHeight );
  canvasEl.appendChild( renderer.domElement );

  // create scene
  const scene = new THREE.Scene();

 // create camera
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  // controls
  const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.minZoom = 1;
  controls.maxZoom = 1.5;

  controls.enablePan = false;

  // ambient light
  const ambientLight = new THREE.AmbientLight( 0x404040, 0.001 );
  const hemisphericLight = new THREE.HemisphereLight({
    skyColor: 0xffffbb,
    groundColor: 0x080820,
    intensity: 0.25,
    position: {
      x: 0,
      y: 430,
      z: -2500
    }
  });



  const glTFLoadBow = (model) => {
    console.log('model: ', model);
    const glTFLoader = new THREE.GLTFLoader();
    glTFLoader.load('https://path-to/cube.glb', (glTF) => {
      console.log('glTF: ', glTF);
      scene.add(glTF.scene);
  },
  (xhr) => {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
  },
  (error) => {
    console.log('an error occurred: ', error);
  });
};

  // draw Scene
  const renderThree = () => {
    camera.updateMatrixWorld();
    renderer.render( scene, camera );
  };

  // run loop (update, render, repeat)
  const animate = () => {
    requestAnimationFrame( animate );
    renderThree();
  };

  animate();

    const glTFLoadModel = (event) => {
      event.preventDefault();

      const model = event.target.text.toLowerCase();
      glTFLoadBow(model);
    }


    const loadCubeElement = document.querySelector('#load-cube-button');

    loadCubeElement.addEventListener('click', glTFLoadModel, false);

  </script>

  </body>
</html>

cube.glb object:
cube.glb (2.0 KB)

I have uploaded the cube.glb to https://gltf-viewer.donmccurdy.com/ and it renders perfectly in there.

I am not able to see/render it on my computer and do not know why.


#2

The problem is the camera! Using Functions to calculate the visible width / height at a given z-depth from a perspective camera to help resolve.

The cube comes in so tiny after zooming in, it’s there.


#3

Setting the camera’s position fixed the problem:

camera.position.set(0, 0, 5);