围绕自己的y轴旋转Collada模型

Question

我有一个简单的three.js场景,在飞机上包含一个3D Homer Simpson.我希望能够使用鼠标在他自己的y轴上旋转他.

以下代码几乎就在那里.有点我从这里和那里拼凑起来和我自己的位.问题在于,我只是无法绕着他的y轴旋转他,一个正在穿过他的核心,正好在中间.

在包含的代码中,如果我使用框架作为参考,他会旋转一圈.其周长(在这个例子中恰好是偶然的)大约是他所站立的飞机的大小.

如果我移除框架而不是使用模型旋转,那么他几乎在y轴上旋转 - 除了I轴就在他的身边.

我使用以下模型.事实上,我希望他旋转的方式就是他在3D Warehouse示例中的表现方式.如果你点击3D视图并旋转他,你会看到我想要实现的目标.

// nasty globals, but this is just a sandbox.
var camera;
var frame;
var loader = new THREE.ColladaLoader();
var model;
var plane;
var renderer;
var scene;

var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var windowHalfX = 800 / 2;

loader.load('Homer/models/body.dae', function(collada) {
    model = collada.scene;

    model.position.x = 0;
    model.position.y = 0;
    model.position.z = 100;

    model.rotation.x = - Math.PI / 2;       // stand Homer upright and facing the camera.

    init();
    animate();
});

function init()
{
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 800);

    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(45, 1, 100, 10000);

    camera.position.x = 50;
    camera.position.y = 120;
    camera.position.z = 600;

    scene = new THREE.Scene();
    scene.add(model);

    // Do I need a frame of reference to get Homer to spin on his own Y-axis instead of the scene's?
    frame = new THREE.Object3D();
    frame.add(model);
    scene.add(frame);

    plane = new THREE.Mesh( new THREE.PlaneGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
    plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
    scene.add( plane );

    var light = new THREE.SpotLight();
    light.position.set(200, 500, 4000);
    scene.add(light);

    renderer.render(scene, camera);

    // Spin Homer around when moving the mouse around
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}


function onDocumentMouseDown( event ) {
    event.preventDefault();
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'mouseout', onDocumentMouseOut, false );

    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove() {
    mouseX = event.clientX - windowHalfX;
    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}

function onDocumentMouseUp() {
    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentMouseOut() {
    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentTouchStart( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;
    }
}

function onDocumentTouchMove( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
    }
}

// Spin Homer around the Y-Axis
function animate() {
    requestAnimationFrame( animate );

    // When we add the frame, he spins in a circle, about the size of the plane (that's spin size if coincidence)
    frame.rotation.y += ( targetRotation - frame.rotation.y ) * 0.03;

    // If we remove the frame from the scene, and use this line instead, Homer spins around the y-axis.
    // But, the y-axis is along the outside of his leg and arm, not through his vertical center, which is what I want.
    // model.rotation.z += ( targetRotation - model.rotation.z ) * 0.03;
    renderer.render( scene, camera );
}

Answer 1

这很棘手.问题在于,荷马的几何学让他站在他的局部坐标系中,右脚紧挨着原点.

在这样的情况下你通常会做的就是打电话

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -distance, 0, 0 ) );

并沿着局部x轴平移几何体.那将是荷马的中心,你就会完成.

如果你可以找出Collada数据结构,你可以做到这一点.

另一种解决方案是这个技巧:(1)使你的模型成为父模型的子模型,(2)使父模型成为另一个对象的子元素,(3)然后将父模型偏移一段距离:

在您的init()功能中,执行此操作

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 800);
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 45, 1, 100, 10000 );
camera.position.x = 50;
camera.position.y = 120;
camera.position.z = 600;
scene.add( camera ); // don't forget this

scene.add( new THREE.AxisHelper() ); // frame of reference

// //////////////////////////////////////////////////
// trick to accommodate geometry offset
object = new THREE.Object3D();
scene.add( object );

parent = new THREE.Object3D();
parent.position.x = -39;
object.add( parent );

parent.add( model );
// //////////////////////////////////////////////////

然后在你的animate()功能:

object.rotation.y += ( targetRotation - object.rotation.y ) * 0.03;