I'm trying to make a simple THREE.js-powered visualization of what various objects look like in scale to the Empire State Building. So I bought this very reasonably priced model for $2, which comes in several formats including .obj
. I then used THREE's OBJLoader to add it to the scene.
container = document.getElementById("city");
camera = new THREE.PerspectiveCamera( 60, 1, 1, 2000 );
camera.position.set( 100, 0, -100 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x87CEEB );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
// load the ESB model
var loader = new THREE.OBJLoader();
loader.load(
'data/esb.obj',
function ( object ) { // called when resource is loaded
ESB = object;
scene.add( object );
},
function ( xhr ) { // called when loading is in progresses
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log(error);
}
);
This successfully loads the OBJ file -- demo here. (I would put on CodePen but don't have rights to redistribute the OBJ. Please don't steal it!)
As you can see, however, while I added some Axis Helpers that are vaguely visible in the distance, the ESB floats in on its side from the left:
Clearly I don't understand the .obj specification that well, though I've tried to read up on it. My questions are:
Thanks as always!
Yes, the model of the ESB is not centered at the origin. You can easily verify this if you import it into Blender. Try to reposition the loaded OBJ
to the center of the scene via:
var boundingBox = new THREE.Box3().setFromObject( object );
boundingBox.getCenter( object.position ).negate();
The movement of the object is not related to the OBJ
format. I guess some application level code causes this behavior.