Can't visualize my model, only dark screen is being shown

Questions
1

Hey, I have the following gltf model, which I want to add it to my scene, I still can’t visualize it, only a black dark scene…

cad.gltf (651.6 KB)

Also here’s my code:

import * as THREE from "three";
import WebGL from "three/addons/capabilities/WebGL.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

if (WebGL.isWebGL2Available()) {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera.position.z = 500;
  camera.up = new THREE.Vector3(0, 0, 1);
  camera.lookAt(scene.position);

  const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Ambient light
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Directional light
  directionalLight.position.set(0, 10, 10);
  scene.add(directionalLight);

  const loader = new GLTFLoader();
  loader.load(
    "cad.gltf",
    function (gltf) {
      const model = gltf.scene;
      model.traverse((node) => {
        if (node.isMesh) {
          node.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        }
      });
      model.scale.set(0.1, 0.1, 0.1);
      scene.add(gltf.scene);
    },
    undefined,
    function (error) {
      console.log(error);
    }
  );

  renderer.render(scene, camera);
} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.getElementById("container").appendChild(warning);
}
2

Any chance to use animation/render loop?
.load() is asyncronous, so when you call renderer.render(), your model is not loaded yet.
Another option is to move renderer.render() into onLoad() callback.

Or use .loadAsync() instead.
Creativity is up to you.

3

Can you please apply the changes to my code, I can’t understand what you mean?

4

In addition to what @prisoner849 said, I’d also want to bring your attention to these two lines:

Could you explain what effect do you want to achieve with this code?

1 Like