How to load .OBJ and .MTL using ThreeJS? (HTML) - html

Question

I'm trying to load a 3D globe into my HTML site using a ThreeJS script (found below) But it's stitched together with code from other sources, meaning the camera is mapped to MouseX and MouseY positions. I want the object to sit in the center of the page with a simple slow spin, but every time I try and achieve this the object vanishes.
The Javascript:
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 5, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 250;
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xFFF1CF, 0.6 , 0 );
camera.add( pointLight );
scene.add( camera );
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {;
};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('planet.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('planet.obj', function(object) {
object.position.y = 0;
scene.add(object);
}, onProgress, onError);
});
//
renderer = new THREE.WebGLRenderer( {alpha: true});
renderer.setClearColor( 0x000000, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseclick', onmousedown, false);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX );
mouseY = ( event.clientY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>

Answer 1

You need to change your code a little bit,
In the 'init' function, change the object loading logic as follows
var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
mtlLoader.load( 'planet.mtl', function(materials) {
materials.preload();
objLoader.setMaterials(materials);
objLoader.load( 'planet.obj', function( object ){
object.position.set( 0, 0, 0 ); // set the position as (0,0,0)
globe = object; // globe is the object to be added to the scene
scene.add(globe);
animate(); //call the animate function only after the object is loaded
}, onProgress, onError);
} );
And change the render method,
function render() {
globe.rotation.y += 0.01; // this will rotate the object
camera.lookAt( scene.position );
renderer.render( scene, camera );
}