Import of simple gltf file with three.js shows nothing

Questions
1

Hey there,

my first import of a simplke gltf file (exported with blender 2.80), is imported without errors, but shows nothing only black.

Anyone who can help?

Thanks in advance.

The source code (React component):

import React, { Component } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import GLTFFile from './resources/3d/standard.gltf';

class GLTFImport extends Component{
  componentDidMount(){
    const width = this.mount.clientWidth
    const height = this.mount.clientHeight

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

    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(width, height)
    this.mount.appendChild(renderer.domElement)

    this.scene = scene
    this.renderer = renderer

    loader.load(GLTFFile,
      function ( gltf ) {

        scene.add( gltf.scene );
    },
    function ( xhr ) {
      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
      console.log( 'An error happened: ' + error );
    }
);    

this.start()
  }

componentWillUnmount(){
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

stop = () => {
    cancelAnimationFrame(this.frameId)
  }

animate = () => {

   this.renderScene()
   this.frameId = window.requestAnimationFrame(this.animate)
 }

renderScene = () => {
  this.renderer.render(this.scene)
}

render(){
    return(
      <div
        style={{ width: '1250px', height: '500px' }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}
export default GLTFImport

Here the gltf file content:

    "asset" : {
        "generator" : "Khronos Blender glTF 2.0 I/O",
        "version" : "2.0"
    },
    "extensionsUsed" : [
        "KHR_lights_punctual"
    ],
    "extensionsRequired" : [
        "KHR_lights_punctual"
    ],
    "extensions" : {
        "KHR_lights_punctual" : {
            "lights" : [
                {
                    "color" : [
                        1,
                        1,
                        1
                    ],
                    "intensity" : 10,
                    "type" : "point",
                    "name" : "Light"
                }
            ]
        }
    },
    "scene" : 0,
    "scenes" : [
        {
            "name" : "Scene",
            "nodes" : [
                0,
                2,
                4
            ]
        }
    ],
    "nodes" : [
        {
            "mesh" : 0,
            "name" : "Cube"
        },
        {
            "extensions" : {
                "KHR_lights_punctual" : {
                    "light" : 0
                }
            },
            "name" : "Light_Orientation",
            "rotation" : [
                -0.7071067690849304,
                0,
                0,
                0.7071067690849304
            ]
        },
        {
            "children" : [
                1
            ],
            "name" : "Light",
            "rotation" : [
                0.16907575726509094,
                0.7558802962303162,
                -0.27217137813568115,
                0.570947527885437
            ],
            "translation" : [
                4.076245307922363,
                5.903861999511719,
                -1.0054539442062378
            ]
        },
        {
            "camera" : 0,
            "name" : "Camera_Orientation",
            "rotation" : [
                -0.7071067690849304,
                0,
                0,
                0.7071067690849304
            ]
        },
        {
            "children" : [
                3
            ],
            "name" : "Camera",
            "rotation" : [
                0.483536034822464,
                0.33687159419059753,
                -0.20870360732078552,
                0.7804827094078064
            ],
            "translation" : [
                7.358891487121582,
                4.958309173583984,
                6.925790786743164
            ]
        }
    ],
    "cameras" : [
        {
            "name" : "Camera",
            "perspective" : {
                "yfov" : 0.39959652046304894,
                "zfar" : 100,
                "znear" : 0.10000000149011612
            },
            "type" : "perspective"
        }
    ],
    "materials" : [
        {
            "name" : "Material",
            "pbrMetallicRoughness" : {
                "baseColorFactor" : [
                    0.800000011920929,
                    0.800000011920929,
                    0.800000011920929,
                    1
                ],
                "metallicFactor" : 0,
                "roughnessFactor" : 0.5
            }
        }
    ],
    "meshes" : [
        {
            "name" : "Cube.001",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
    ],
    "accessors" : [
        {
            "bufferView" : 0,
            "componentType" : 5126,
            "count" : 24,
            "max" : [
                1,
                1,
                1
            ],
            "min" : [
                -1,
                -1,
                -1
            ],
            "type" : "VEC3"
        },
        {
            "bufferView" : 1,
            "componentType" : 5126,
            "count" : 24,
            "type" : "VEC3"
        },
        {
            "bufferView" : 2,
            "componentType" : 5126,
            "count" : 24,
            "type" : "VEC2"
        },
        {
            "bufferView" : 3,
            "componentType" : 5123,
            "count" : 36,
            "type" : "SCALAR"
        }
    ],
    "bufferViews" : [
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 0
        },
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 288
        },
        {
            "buffer" : 0,
            "byteLength" : 192,
            "byteOffset" : 576
        },
        {
            "buffer" : 0,
            "byteLength" : 72,
            "byteOffset" : 768
        }
    ],
    "buffers" : [
        {
            "byteLength" : 840,
            "uri" : "data:application/octet-stream;base64,AACAvwAAgD8AAIA/AACAPwAAgD8AAIC/AACAvwAAgD8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAvwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIC/AACAvwAAgL8AAIA/AACAvwAAgD8AAIC/AACAPwAAgL8AAIA/AACAvwAAgL8AAIC/AACAPwAAgL8AAIC/AACAvwAAgL8AAIA/AACAPwAAgD8AAIC/AACAPwAAgL8AAIA/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAvwAAgD8AAIC/AACAPwAAgL8AAIC/AACAvwAAgL8AAIC/AACAPwAAgD8AAIC/AAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgL8AAACAAAAAAAAAgL8AAACAAAAAAAAAgL8AAACAAAAAAAAAgL8AAACAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAgPwAAQD8AAMA+AACAPwAAID8AAIA/AADAPgAAQD8AACA/AABAPwAAwD4AAAA/AADAPgAAQD8AACA/AAAAPwAAID8AAAA/AADAPgAAgD4AAMA+AAAAPwAAID8AAIA+AAAgPwAAAAAAAMA+AACAPgAAID8AAIA+AADAPgAAAAAAAMA+AAAAPwAAAD4AAIA+AAAAPgAAAD8AAMA+AACAPgAAYD8AAAA/AAAgPwAAgD4AACA/AAAAPwAAYD8AAIA+AAABAAIAAAADAAEABAAFAAYABAAHAAUACAAJAAoACAALAAkADAANAA4ADAAPAA0AEAARABIAEAATABEAFAAVABYAFAAXABUA"
        }
    ]
}
2

I don’t think importing your asset in that way is the intended method. Have you tried passing the URL in string format to the .load() function?

var gltfURL = './resources/3d/standard.gltf';

const loader = new GLTFLoader();
loader.load(gltfURL,
    function(gltf) {
        console.log("Asset loaded");
    }
);
4

You are rendering the scene without a camera which is not allowed. Try it with something like:

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 50;

Besides, also add an ambient light to your scene since a single point light often looks bad.

const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
this.scene.add( ambientLight );
5 
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import GLTFFile from './resources/3d/standard.gltf';

loader.load(GLTFFile, ... );

Actually, this is correct when using WebPack. You need to import all assets like this, then WebPack bundles them along with your app and translates the GLTFFile back to the correct (bundled) URL at runtime.

6

Thanks all for your suggestions.
Adding a camera and light helped.

But I wonder why the light and camera which was exported in the GLTF file is not used.
Both is exported in the file.

7

Even if the camera is part of the scene graph, it must be explicitly passed in to the WebGLRenderer.render() call.