Three.js 飞机的 3D 旋转

Posted

技术标签:

【中文标题】Three.js 飞机的 3D 旋转【英文标题】:Three.js 3D rotation of an airplane 【发布时间】:2012-10-24 00:51:00 【问题描述】:

我正在尝试制作一个简单的飞机飞行游戏。我希望用户使用箭头键将飞机围绕 360 度区域旋转,其中上下是相对于飞机水平位置的 Y 轴。左右箭头应该只是围绕它的 z 轴旋转平面,并允许它有一个新的 Y 轴位置。我的问题是 - 我怎样才能在相对于新水平位置的 Y 轴上旋转飞机?

我有一个名为 plane 的组,并完成了诸如 plane.rotation.z(左右)和 plane.rotation.x(上下)之类的工作 - 但 x 轴不在新的水平面上.我还尝试使用 plane.children[1].matrix.rotation.x 访问组内的模型/网格,看看这是否可以改变相对 Y 轴......但这会导致同样的问题。如何找到与当前水平位置的相对 Y 轴?

我的代码可以在jsfiddle here看到

任何帮助将不胜感激。

【问题讨论】:

Ctrl-F ?:不匹配。目前,您的问题(几乎)是一大堆文字,请考虑对其进行重组并更好地格式化。 明确问题到底是什么。 @phant0m - 只是简化了问题。抱歉,如果之前不清楚。 你能在 jsfiddle.net 中设置一些东西来显示你的问题吗? @Neil - 当然:jsfiddle.net/Lc8gH/18 并提前感谢您查看 【参考方案1】:

坦率地说,我很难理解您的问题,但我认为您的问题是:“如何使用箭头键围绕其内部 z 轴或 x 轴旋转对象?”

像这样的例程会这样做:

var _q1 = new THREE.Quaternion();

function rotateOnAxis( object, axis, angle ) 

    _q1.setFromAxisAngle( axis, angle );
    object.quaternion.multiplySelf( _q1 );

    

这个例程使用四元数来实现。这真的没什么大不了的——你只需要设置:

object.useQuaternion = true;

这是一个更新的小提琴:http://jsfiddle.net/Lc8gH/20/。


编辑:您现在可以使用Object3D.rotateOnAxis( axis, angle );

three.js r.58

【讨论】:

这正是我想要的。抱歉,我的语言太混乱了……非常感谢您的帮助!

以上是关于Three.js 飞机的 3D 旋转的主要内容,如果未能解决你的问题,请参考以下文章

使用 Three.js 将 3D 对象旋转到鼠标

THREE.js - 旋转移动3D球

Three.js源码解读一:Object3D

three.js 在它的中心围绕 Y 轴旋转 Object3d

Three.js Object3d 圆柱体旋转以对齐向量

Three.js:平面只有一半时间可见