Help with loading a model into Three.js

Questions
,
1

Hi I’m new to Three JS and I’m really struggling with getting a model to display in it. I have created a simple bench in Sketch Ups and can export it as gltf, glb, obj, fbx and dae. It also exports the materials in jpg format. Here is a quick piccy of the model.

york-standard-rail-6ft
york-standard-rail-6ft1780×1530 599 KB

For now all I want to do is load it and it’s texture / material and be able to pan around it or spin the object around. I’ve tried using the colladaLoader with the dae file and had limited success in bringing the model into the scene but without material. I have tried many other examples since using different file formats but no success whatsoever. I decided to go back to the drawing board and follow the instructions to install modular Three JS and webpack hoping that I could follow some more examples but still I cannot load anything. I just get a blank screen with a different error message in the console depending on what example I have used. I have tried following best I can the Three JS documentation but I cannot find anywhere that takes me through the steps of installing Three JS all the way through to loading a simple model. The examples they supply become very complex and I have difficulty seeing how the script provided can relate to my project.

Here is the script from the last example I tried:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';



const scene = new THREE.Scene();

var loader = new THREE.GLTFLoader();

loader.load( 'bench.glb', function ( gltf ) {

scene.add( gltf.scene );

}, undefined, function ( error ) {

console.error( error );

} );



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

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


camera.position.z = 5;

var animate = function () {
requestAnimationFrame( animate );


renderer.render( scene, camera );
};

animate();

Here I get is a blank screen with the error : TypeError: (void 0) is not a constructor
That error only appears when I try and load the model:

var loader = new THREE.GLTFLoader();

loader.load( 'box.glb', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

Can anyone see what the problem is? I did a bit of searching regarding that error and allthough I couldn’t find anything relating to Three JS I did find that the problem seemed to be associated with Webpack. Is there a better way to manage the modular elements of Three JS. Alternatively are there any tutorials that can take you through the steps from install all the way to importing stuff into your scene? I’ve spent so so much time on trying to access Three JS and I’m really surprised by how little progress I have made so any help or if anyone could point me in the right direction then that would be much appreciated. Thanks in advance.

2

In general, using a glTF based workflow is the right approach. Can you please share the model box.glb in this topic? I would like to verify if the mentioned error message is produced by GLTFLoader.

You can always use viewers like the gltf-viewer or BabylonJS sandbox to verify if the exported asset is fine. If the asset is imported correctly, there is most likely an issue with your code or the engine.

When looking at your code, one obvious problem is missing light sources. You should add for example an ambient and directional light to your scene otherwise your asset will stay black.

3

There were two files I tried box.glb and bench.glb. All I get is a white screen.

bench.glb (98.2 KB) box.glb (3.0 KB)

4

Thanks, I have tried both files in gltf-viewer and they look good.

5

This is how your bench looks in the three.js editor with an ambient and directional light.

image
image2376×1260 287 KB

So there must be something wrong with your code. Unfortunately, I’m not seeing something obvious at your code sections. Do you mind sharing the current work of progress as a GitHub repo?

6

I’m sorry I don’t know yet how to use github. This is my whole code though:

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
    </style>
    <title>Getting Started</title>
</head>
<body>

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

index.js

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';



const scene = new THREE.Scene();
var loader = new THREE.GLTFLoader();
loader.load( 'bench.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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


camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );


    renderer.render( scene, camera );
};

animate();

index.js is being packaged through webpack to form main.js

And that’s all. I’m going to have to learn github aren’t I.

7

Wait…please remove the THREE namespace from GLTFLoader. It’s not necessary when importing the loader as a module.

Besides, add some lights like suggested above.

8

Yeah!!! You don’t know how long I have been banging my head against the wall. Thankyou it was the namespace thing. I’ve managed to get on the first rung of the Three JS ladder! Well it’s a start.

bench
bench1764×1062 183 KB

1 Like