Help Loading a 3D Model (.obj)

Questions
1

I am very new to Three.js and new to JavaScript in general, and I am having trouble loading a 3D model. The model is .obj and the console is not throwing any errors, the model just does not appear. Here is my code:

import * as THREE from '/three/build/three.module.js';
import { OBJLoader } from '/three/examples/jsm/loaders/OBJLoader.js';

let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100000);
  camera.position.z = -1000;
  scene = new THREE.Scene();

  const loader = new OBJLoader();

  loader.load(
    // resource URL
    '/models/earth.obj',
    // called when resource is loaded
    function ( object ) {

      scene.add( object );

    },
    // called when loading is in progresses
    function ( xhr ) {

      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

      console.log( 'An error happened' );

    }
  );
  

  renderer = new THREE.WebGLRenderer( {antialias: true} );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setAnimationLoop( animation );
  document.body.appendChild ( renderer.domElement );
}

function animation(time) {

  renderer.render( scene, camera );
}
2

Try to add some lights to your scene. E.g.

const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
scene.add( pointLight );
1 Like
3

Thank you so much! Works now.

4

See LoadOBJbyModule
from the