使用正确的旋转创建 ArrowHelper答案

【问题标题】：Create ArrowHelper with correct rotation使用正确的旋转创建 ArrowHelper
【发布时间】：2013-08-01 19:25:35
【问题描述】：

如何在 Three.js (r58) 中创建正确旋转的 ArrowHelper？

var point1 = new THREE.Vector3(0, 0, 0);
var point2 = new THREE.Vector3(10, 10, 10);
var direction = new THREE.Vector3().subVectors(point1, point2);
var arrow = new THREE.ArrowHelper(direction.normalize(), point1);
console.log(arrow.rotation);

我总是以Object {x: 0, y: 0, z: 0} 结束箭头旋转。我做错了什么？

【问题讨论】：

我想补充一点，我正在尝试类似 this (see answer there) 的东西，但似乎 ArrayHelper 上不再设置旋转。
var direction = new THREE.Vector3().subVectors(point2, point1);

标签： three.js

【解决方案1】：

ArrowHelper 使用四元数来指定它的方向。

如果你这样做：

var rotation = new THREE.Euler().setFromQuaternion( arrow.quaternion );

您将看到以欧拉角表示的等效方向，尽管在 r.59 中，arrow.rotation 现在会自动更新，因此您将不再看到零。

编辑：答案更新为 three.js r.59

【讨论】：

非常感谢，它运行良好。还添加了对旧问题 here 的答案。