Rotating .obj file OBJMTLLoader three.js

Question

I used the OBJMTLLoader class for one obj file and rotation worked well around a fixed point on the object by using object.rotation.y -= 0.5. Using the same code (minus changing the camera position), I replaced the .obj file with another and the rotation is now going in a circular motion, like around the camera instead of staying in place. Any idea why when I used the same code?

Thanks

EDIT:

var OBJLoaded;    

function init()
{
    container = document.getElementById('player');
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1,  2000);
    camera.position.x = 110;
    camera.position.z = -160;
    camera.position.y = 15;

    // camera.position.z = 40;
    // camera.position.y = 2;

    //scene
    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0x444444 );
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 100, 90, 200 );
    scene.add( directionalLight );

    //model
    var loader = new THREE.OBJMTLLoader();
    //loader.load('./assets/Stereo_LowPoly.obj', './assets/Stereo_LowPoly.mtl',    function(object)
    loader.load('./assets/studio_beats.obj', './assets/studio_beats.mtl', function(object)
    { 
        OBJLoaded = object;
        console.log(object);
        scene.add( object );
    });

    renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setClearColor(0x000000, 0);
    renderer.setSize($('#player').width(), $('#player').height());
    container.appendChild(renderer.domElement);

    scene.add(camera);
}

function animateBoombox()
{
    requestAnimationFrame(animateBoombox);
    render();
}   

function render()
{
    var rotSpeed = 0.004;
    if (OBJLoaded) 
    { 
        OBJLoaded.rotation.y -= rotSpeed;
    }
    renderer.render(scene, camera);
}

The parts commented (camera and object load) is for the previous object that was loaded. That works fine, but the uncommented partdoes not work the same.

Can you share more code? Hard to help without knowing the context. — mrdoob
It sounds like your object geometry is offset from the object-space origin. Compare the bounding boxes: var box = new THREE.Box3().setFromObject( object ); Read the source so you know what that funcion is doing. — WestLangley
@WestLangley I've been reading over it and checked the differences. The second object's box is way off. I've tried setting the coordinates to the ones the first object has, but no luck. I've also been reading past answers from you about this with meshes but I'm not understanding how to solve this. The solutions you've given requires translating a mesh's box to the center point of the box. I am trying this but the object is still rotating around something rather than staying in place during rotation. — Martavis P.
Study the hierarchy of you object to see if a child object or mesh is offset. If not, then can you post a simple live example sufficient to demonstrate the problem? — WestLangley

Tezcan Tezcan · Accepted Answer · 2014-03-10T09:17:28

The object you loaded has a pivot point which came from the model creater software... You need to change the pivot point of the object before you load it with three.js.

If you cannot, you should do it like i had in loader callback:

            var loader = new THREE.OBJMTLLoader();
            loader.load('your_file.obj', 'your_file.mtl', function (object) {
                object.traverse(function (child) {
                    child.centroid = new THREE.Vector3();
                    for (var i = 0, l = child.geometry.vertices.length; i < l; i++) {
                        child.centroid.add(child.geometry.vertices[i].clone());
                    }
                    child.centroid.divideScalar(child.geometry.vertices.length);
                    var offset = child.centroid.clone();
                    child.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-offset.x, -offset.y, -offset.z));
                    child.position.copy(child.centroid);
                    child.geometry.computeBoundingBox();
                });
            });

Then rotate your object...

Rotating .obj file OBJMTLLoader three.js

1 Answers