2

How do I create an ArrowHelper in Three.js (r58) with correct rotation?

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

I always end up with with Object {x: 0, y: 0, z: 0} for the arrow rotation. What am I doing wrong?

medihack
  • 16,045
  • 21
  • 90
  • 134
  • I just like to add that I am trying something like [this (see answer there)](http://stackoverflow.com/questions/15316127/three-js-line-vector-to-cylinder), but it seems that rotation is not set any more on ArrayHelper. – medihack May 02 '13 at 21:32
  • var direction = new THREE.Vector3().subVectors(**point2**, **point1**); – aholub7x Apr 30 '14 at 14:46

1 Answers1

3

ArrowHelper uses quaternions to specify it's orientation.

If you do this:

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

you will see an equivalent orientation expressed in Euler angles, although in r.59, arrow.rotation is now automatically updated, so you will no longer see zeros.

EDIT: answer updated to three.js r.59

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 1
    Thanks a lot, it works perfectly. Also added an answer to the older question [here](http://stackoverflow.com/questions/15316127/three-js-line-vector-to-cylinder/16348610#16348610). – medihack May 02 '13 at 22:16