2

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

下面的代码几乎就在那里。这是我从这里和那里以及我自己的部分拼凑而成的。问题是我无法让他绕着他的 y 轴旋转，那个轴会直接穿过他的核心，就在中间。

在包含的代码中，如果我使用框架作为参考，他会转圈。它的周长（在这个例子中只是偶然）大约是他所站立的飞机的大小。

如果我移除框架并使用模型旋转，那么他几乎在他的 y 轴上旋转——除了 I 轴就在他的身边。

我正在使用以下模型。事实上，我希望他旋转的方式是他在 3D Warehouse 示例中所做的方式。如果您单击3D View并旋转他，您将看到我想要实现的目标。

// 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 );
}
4

1 回答 1

6

这很棘手。问题是荷马的几何让他站在他的局部坐标系中，右脚靠近原点。

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

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;
于 2012-10-09T13:12:45.663 回答