Why is my scene rendering but not my model?

Questions
, ,
1

The console.log contains the object so I assume the .glb file is being loaded correctly. I set a camera, positioned it far enough, set lights and am rendering the scene and camera in the animate() function. So why do I just see the black scene with nothing inside it? What am I doing wrong here? Any advice much appreciated

import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const Three3d = () => {
  const threedRef = useRef(document.createElement('div'));

  var renderer = new THREE.WebGLRenderer();

  useEffect(() => {
    const camera = new THREE.PerspectiveCamera(
      75,
      threedRef.current.clientWidth / threedRef.current.clientHeight,
      0.1,
      1000
    );

    const loader = new GLTFLoader();
    const scene = new THREE.Scene();

    renderer.setSize(
      threedRef.current.clientWidth,
      threedRef.current.clientHeight
    );
    threedRef.current.appendChild(renderer.domElement);

    const light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    loader.load(
      process.env.PUBLIC_URL + './models/Avocado.glb',
      function (gltf: any) {
        console.log(gltf);
        scene.add(gltf.scene);

        camera.position.set(0, 0, 100);
        camera.lookAt(0, 0, 0);
      },
      undefined,
      function (error: any) {
        console.error(error);
      }
    );
    const animate = () => {
      renderer.render(scene, camera);
    };

    animate();
  }, []);

  return (
    <>
      <div
        ref={threedRef}
        style={{ width: '90%', height: '600px', margin: '40px' }}></div>
    </>
  );
};

export default Three3d;
2

It’s possible your model is too big of a scale or that it’s not at the position 0,0,0… Try camera.lookAt(gltf.scene.position.x, gltf.scene.position.y, gltf.scene.position.z) if you still don’t see the model try setting the scale down by a factor of 10 or 100, if you can share the gltf model here that could also be useful in debugging the problem

1 Like
3

Ty, I will try these out first. This is the model: glTF-Sample-Models/Avocado.glb at db9ff67c1116cfe28eb36320916bccd8c4127cc1 · KhronosGroup/glTF-Sample-Models · GitHub

Ah, it was the scale, I did gltf.scene.scale.set(100, 100, 100); and I could finally see it. Thank you :slight_smile:

1 Like