使用正确的旋转创建ArrowHelper

Question

如何在正确旋转的情况下在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}结束箭头旋转。我做错了什么？

Answer 1

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

如果你这样做：

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

你会看到用欧拉角表示的等效方向，虽然在r.59中，arrow.rotation现在自动更新，所以你将不再看到零。

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