三.js 网格倾斜而不是旋转

Question

我刚刚了解了 THREE.js，并对它的功能着迷。我还不够先进，无法编写自己的代码，所以我一直在四处浏览，试图找到一个例子来做我需要或接近的事情，但到目前为止无济于事:(

我正在处理的是一些使用鼠标移动对象的代码。 X 轴工作正常，但 Y 轴围绕对象旋转，而不是左右倾斜。

我当前的代码：

var container, stats;

var camera, scene, renderer;

var group, text, plane;

var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;

var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;

var mouseX = 0;
var mouseXOnMouseDown = 0;

var mouseY = 0;
var mouseYOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var finalRotationY
var center

init();
animate();

function init() {



        camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000 );
        camera.position.z = 1000;
        camera.eulerOrder = "YXZ"

        scene = new THREE.Scene();

        // lights

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 1, 1, 1 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0x002288 );
        light.position.set( -1, -1, -1 );
        scene.add( light );

        light = new THREE.AmbientLight( 0x222222 );
        scene.add( light );


		var geometry = new THREE.BoxGeometry(1400, 100, 700, 10, 10, 10);
		var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
		var cube = new THREE.Mesh(geometry, material);
		//cube.position.set( center.x, center.y, center.z );
		//cube.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -center.x, -center.y, -center.z ) );

		renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
		renderer.setSize( window.innerWidth, window.innerHeight );

		container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

		group = new THREE.Object3D();
		group.add(cube)
		scene.add(group);


        // renderer

        //stats = new Stats();
        //stats.domElement.style.position = 'absolute';
        //stats.domElement.style.top = '0px';
        //container.appendChild( stats.domElement );

        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        document.addEventListener( 'touchmove', onDocumentTouchMove, false );

        //

        window.addEventListener( 'resize', onWindowResize, false );

        //for debuging stats
        interval = setInterval( debugInfo, 50 );

}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );
        group.add(mesh);
        scene.add( group );

}

function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function onDocumentMouseDown( event ) {

        event.preventDefault();

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.addEventListener( 'mouseout', onDocumentMouseOut, false );

        mouseXOnMouseDown = event.clientX - windowHalfX;
        targetRotationOnMouseDownX = targetRotationX;

        mouseYOnMouseDown = event.clientY - windowHalfY;
        targetRotationOnMouseDownY = targetRotationY;

}

function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;


        targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
        targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;



}

function onDocumentMouseUp( event ) {

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

}

function onDocumentMouseOut( event ) {

        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;
                targetRotationOnMouseDownX = targetRotationX;

                mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY;
                targetRotationOnMouseDownY = targetRotationY;



        }

}

function onDocumentTouchMove( event ) {

        if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationX = targetRotationOnMouseDownX + ( mouseX - mouseXOnMouseDown ) * 0.05;

                mouseY = event.touches[ 0 ].pageY - windowHalfY;
                targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.05;

        }

}

//

function animate() {

        requestAnimationFrame( animate );

        render();
        //stats.update();

}

function render() {


     //horizontal rotation
     group.rotation.y += ( targetRotationX - group.rotation.y ) * 0.1;


     finalRotationY = (targetRotationY - group.rotation.x);


    if (group.rotation.x <= 1 && group.rotation.x >= -1) {

        group.rotation.x += finalRotationY * 0.1;
    }
    if (group.rotation.x > 1) {

        group.rotation.x = 1
    }
    else if (group.rotation.x < -1) {

        group.rotation.x = -1
    }



        renderer.render( scene, camera );

}


function debugInfo()
{
    //$('#debug').html("mouseX : " + mouseX + "   mouseY : " + mouseY + "</br>")

}

<style>canvas { width: 100%; height: 100% }</style>

<script src="http://threejs.org/build/three.min.js"></script>
<div id="container"></div>

我希望做的是，当单击鼠标并向左或向右移动时，框将向鼠标倾斜并保持相同的“X”旋转，除非鼠标也向上或向下移动。现在，相机似乎围绕对象旋转，而不是在相应方向上倾斜。

有什么想法吗？

Answer 1

micnil 是对的，我不得不将轮换顺序更改为“ZYX”。现在开始学习如何将我的 2 个脚本连接在一起。