Model appears to load but is not visible

Question

I'm pretty new to Three.js, and I'm struggling to get a model from an .obj file to load and be visible.

I feel I've done the basics correctly:

const renderer = new THREE.WebGLRenderer({
  antialias: true
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000);

const mountNode = document.querySelector("#canvas");
mountNode.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  10000
);

camera.position.z = -10000;

// instantiate a loader
const loader = new THREE.OBJLoader2();
const callbackOnLoad = function(event) {
  console.log("event", event);
  scene.add(event.detail.loaderRootNode);
};
loader.load(
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/373299/flower.obj",
  callbackOnLoad,
  null,
  function(error) {
    console.log("An error happened", error);
  },
  null,
  false
);

...however, all I get is the black screen. :(

If I was a betting man, I thought that perhaps the model has the wrong material? Or that maybe we're inside it (although I've moved the camera around a lot!)?

Codepen is here: https://codepen.io/jmsherry/pen/XQLXmm?editors=0010

Any help would be most appreciated!!

Thanks

you are missing a call to renderer.render(scene,camera) which you can place in your callback fn. — gaitat
@gaitat Damn! Looks like I deleted that call during editing! Good spot!! — user1775718

Mugen87 Mugen87 · Accepted Answer · 2019-05-01T13:38:22

There are three issue with your code:

You should render the scene at least once after loading the asset.
You camera is positioned at the wrong place. Per default, it looks along the negative z-axis so camera.position.z = 1000; is a better default.
You have no lights in your scene. Something like the following is a good start for a simple model viewer application

https://codepen.io/anon/pen/ZZdWLJ?editors=0010

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

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

three.js R104

Model appears to load but is not visible

1 Answers