GLB model not appearing - black screen

Questions
1

Hi, I’m a beginner and having issues with loading a GLB model (the screen just appears black). Does anyone have any pointers for how to do this? Appreciate your help

main.js: 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );

var renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

const loader = new THREE.GLTFLoader();

loader.load('turbo.glb', function (gltf) {
    scene.add(gltf.scene);
  }, undefined, function (error) {
    console.error(error);
  });

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
2

  1. Can you share turbo.glb model as well or try to load it in https://gltf-viewer.donmccurdy.com/ and see if glb model is loading on this website.

  2. check if .glb model’s directory path, it should be in same directory of your current code.

3

Thanks for the quick response, here is the glb: https://gltf-viewer.donmccurdy.com/

4

It’s unclear from your example if you have a rendering loop running or not.

In case you don’t:
Since loading takes time, you need to wait till the model is loaded, then add it to the scene and render:

loader.load('turbo.glb', function (gltf) {
    scene.add(gltf.scene);
    renderer.render(scene, camera);   //  <-  add this line
  }, undefined, function (error) {
    console.error(error);
  });
5

This link gives us the viewer website, but not your model, you would need to upload that model somewhere. In any case –- do you see the model correctly in the viewer? Or is it also a black screen there?

Note that metallic materials do not respond to ambient light. You need at least a point light or two, preferably an environment map. If the model appears fine in viewers but appears dark or not at all in your application, that could be the cause. Always many possible causes for a black screen in graphics, though, so any errors you see in the JS Console are important to share, and sharing all code necessary to see the issue, and a demo when possible.

6

Thanks for your responses. The model appears fine in the gltf viewer. I’ve tried adding point lights and the renderer.render line to my code but still see the same black screen (no errors in console). The model is from sketchfab: FREE 1975 Porsche 911 (930) Turbo - Download Free 3D model by Karol Miklas (@karolmiklas) [8568d9d] - Sketchfab

7
  1. Make sure the camera is still looking at the origin after you moved it
  2. Add axis helper to the scene, if you don’t see it, then the problem is not the model but something else
  3. If you still don’t see anything, provide a live working example of your code on jsfiddle or codepen, there must be some other error in your setup
camera.position.set(20,0,20);
camera.lookAt(0,0,0);

const hlp = new THREE.AxesHelper(1);
scene.add(hlp);
8

The problem is the black background that you have, and the model is also black.
based on your code I set the background color to grey and the model appeared

scene.background = new THREE.Color( 0x999999 );
camera.position.set(5,0,10); //also try setting cam pos to this
9

Thank you so much all. I can now see the model against a grey background. Would the next step be to add orbit controls so I can move the model around, and how can I zoom in + get the lighting to work? Appreciate your help in advance

index.html: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"
      integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg=="
      crossorigin="anonymous"></script>
   <!--- <script src="https://unpkg.com/three@0.126.0/examples/js/controls/OrbitControls.js"></script> -->
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
  </head>
<body>

</body>
<script type="text/javascript" src="main.js"></script>
</html>


main.js: 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
scene.background = new THREE.Color( 0x999999 );

var renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.set(5,0,10);
camera.position.z = 15;
camera.lookAt(0,0,0);
// controls.update();

const hlp = new THREE.AxesHelper(1);
scene.add(hlp);

const loader = new THREE.GLTFLoader();

var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
var light2 = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 0, 0, 0 );
scene.add( light);
scene.add( light2);

loader.load('turbo.glb', function (gltf) {
    scene.add(gltf.scene);
    renderer.render(scene, camera);
  }, undefined, function (error) {
    console.error(error);
  });