0

我正在尝试在鼠标单击事件中同时旋转两个 3D 图像。图像正在旋转，但它们的旋转角度略有不同。即图像没有得到同步旋转。

我参考了three.js示例代码使用了两个函数。第一个函数是 init() 它包含初始化细节。我还使用 TrackBallControls 来实现缩放效果。

function init() {
    document.getElementById("image").addEventListener( 'mouseup', onDocumentMouseMove, false );
    container = document.getElementById('image');
    camera = new THREE.PerspectiveCamera( 100, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
    camera.position.z = 700;

    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = false;
    controls.dynamicDampingFactor = 0.3;
    controls.keys = [ 65, 83, 68 ]; 

    controls.addEventListener( 'change', render );

    scene = new THREE.Scene();

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

    try {
            webglRenderer = new THREE.WebGLRenderer();
            webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
            webglRenderer.domElement.style.position = "relative";
            container.appendChild( webglRenderer.domElement );
    }catch (e) {}

    var loader = new THREE.JSONLoader();

    var callbackLeft = function ( geometry, materials ) {createScene( geometry, materials, -400, FLOOR, 50, 105 )   };

    var callbackRight = function ( geometry, materials ){createSceneRight( geometry, materials, 400, FLOOR, 50, 105 ) };

    loader.load( "../view3D/Female02_slim.js", callbackLeft );
    loader.load( "../view3D/Female02_slim.js", callbackRight ); 
}
function createScene( geometry, materials, x, y, z, b ) 
{
    zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    zmesh.position.set( x, y, z );
    zmesh.scale.set( 3, 3, 3 );
    THREE.GeometryUtils.center( geometry );
    scene.add( zmesh );
}
function createSceneRight( geometry, materials, x, y, z, b ) 
{
    zmeshRight = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    zmeshRight.position.set( x, y, z );
    zmeshRight.scale.set( 3, 3, 3 );
    THREE.GeometryUtils.center( geometry );
    scene.add( zmeshRight );
}
function onDocumentMouseMove(event) 
{
    mouseX = ( windowHalfX -  event.clientX);
}
function animate() 
{
    requestAnimationFrame( animate );
    controls.update();
    render();
}

var prevMouseX = 0;
function render() 
{
    if(mouseX > -300)
        {
            zmesh.rotation.y -= 0.8;
            zmeshRight.rotation.y -= 0.8;
        }
        else if(mouseX < -300)
        {
            zmesh.rotation.y += 0.8;
            zmeshRight.rotation.y += 0.8;
        }
        else
        {
            zmesh.rotation.y += 0;
            zmeshRight.rotation.y -= 0.8;
        }

    webglRenderer.render( scene, camera );
}

请指教

4

0 回答 0