围绕自己的y轴旋转Collada模型

Question

我有一个简单的three.js场景，其中包含一个平面上的3D霍默·辛普森。我希望能够用鼠标在自己的y轴上旋转他。

下面的代码几乎是。这是我从这里和那里拼凑起来的一点，也是我自己的一点。问题是，我无法让他绕着y轴旋转，这个轴会穿过他的核心，就在在中间。

在附带的代码中，如果我使用框架作为参考，他会绕一个圆圈旋转。它的周长(在这个例子中只是偶然的)大约是他所站的飞机的大小

如果我移除框架，转而使用模型旋转，那么他几乎在他的y轴上旋转——除了I轴刚好在他的一侧。

我正在使用以下模型。事实上，我希望他旋转的方式就像他在3D仓库示例中所做的那样。如果你点击3DView并旋转他，你就会看到我正在努力实现的目标。

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

Answer 1

这很棘手。问题是，荷马的几何学让他站在自己的局部坐标系中，右脚紧挨着原点。

在这种情况下，你通常会称之为

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;