three.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”。 现在开始学习如何将我的两个脚本结合在一起。