旋转 .obj 文件 OBJMTLLoader 三.js [英] Rotating .obj file OBJMTLLoader three.js

问题描述

我将 OBJMTLLoader 类用于一个 obj 文件，并且通过使用 object.rotation.y -= 0.5 可以很好地围绕对象上的一个固定点进行旋转.使用相同的代码(减去更改相机位置)，我将 .obj 文件替换为另一个文件，并且旋转现在以圆周运动进行，就像围绕相机而不是停留在原地.知道为什么我使用相同的代码吗?

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?

谢谢

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.

推荐答案

您加载的对象有一个来自模型创建软件的轴心点...您需要在加载之前更改对象的轴心点三.js

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...

这篇关于旋转 .obj 文件 OBJMTLLoader 三.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！