Obj ObjLoader for beginner

Questions
,
1

Hi, I’m a beginner to threejs; due to the examples it was easy to draw cubes, lines, … But I got stuck with the OBJLoader - no error messages, but simply nothing is shown. I used the example WaltHead and according to the debugger every step works well. But something must be wrong here:

import * as THREE from ‘three’;
import { OBJLoader } from ‘three/addons/loaders/OBJLoader.js’;
import {MTLLoader} from ‘three/addons/loaders/MTLLoader.js’;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

var mtlLoader = new MTLLoader();

mtlLoader.load( ‘https://threejs.org/examples/models/obj/walt/WaltHead.mtl’, function( materials ) {
    materials.preload();
    var objLoader = new OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.load( ‘https://threejs.org/examples/models/obj/walt/WaltHead.obj’, function ( object ) {
        scene.add( object );
        camera.lookAt(0, 50, 0);
        camera.position.z = 200;
        renderer.render( scene, camera );
    } );
} );

Any hints, what could be wrong? Thank you!

2

Any light source in the scene?

3

wich version of three.js do you use?
Loaders may changes depending the version. I highly recommend to follow the official exemple.
it seem you use a very old fashioned way. (no async/await)

4

try 0,0,0, currently your camera is looking 50 meters into the sky from 200 meters away, the model is likely real world size if pulled from official sources…

5

You may also want to include an onError callback when calling .load(…) on either loader, and log the error. See: OBJLoader.load

6

Looks like the model is loading fine, the issue is probably scene setup. Try adding lights (Directional + Ambient), use an animation loop instead of rendering once (loading is async and a single render may happen before the model appears), and adjust camera/scale (the model can be too small or out of view).

7

No, not so far. In the examples there wasn’t any used. I have not used any light source in the cube and line examples, so I thought there would be some default light. Any suggestions?

8

Thank you for the hint. But there seems not to be any error - according to debugging every step was used.

9

I use 184, should be the most recent one. Bit I will try according to your sample, thank you.

10

I have tried different positions and looking directions - unfortunately nothing is displayed.

11

Yes, great: it was the missing light: I now used

const ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );

const pointLight = new THREE.PointLight( 0xffffff, 15 );
camera.add( pointLight );
scene.add( camera );

and it works, thank you!

12

Your sample pointed to the problem: adding the AmbientLight and the PointLight did the trick!

Thank you.