2

飛行機に3Dホーマーシンプソンを含む単純なthree.jsシーンがあります。マウスを使って、彼自身のy軸を中心に回転できるようにしたいと思います。

次のコードはほとんどあります。それは私があちこちから一緒に石畳になっていて、私自身のビットです。問題は、私が彼のy軸を中心に回転させることができないことです。これは、彼のコアを真ん中で走っています。

含まれているコードでは、フレームを参照として使用すると、彼は円を描くように回転します。その円周（そしてこの例では偶然）は、彼が立っている飛行機のサイズとほぼ同じです。

フレームを取り外し、代わりにモデルを使用して回転すると、I軸がちょうど彼の側にあることを除いて、彼はほぼy軸を中心に回転します。

次のモデルを使用しています。実際、私が彼にスピンさせたい方法は、3Dギャラリーの例で彼が行っている方法です。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 );
}
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 に答える