CODEWITHSUNDEEP
three.js
meetar
meetar

Reputation: 7611

Three.js - how can I update an arrowHelper?

I'm trying to update an arrowHelper. I've tried manipulating the vertices in the arrow object's line, setting everything dynamic = true and so on, but the only way I can seem to do it is by removing the old line and drawing a new one. Is there a way to update an arrowHelper?

Upvotes: 7

Views: 6092

Answers (2)

Ray Ellis
Ray Ellis

Reputation: 41

Thanks to the folks who answered this question, it certainly helped me. There are a couple of small problems with it that folks will want to avoid:

Calling direction.normalize() in the penultimate line of code changes the direction vector to a unit vector and thus the original length is lost. You can change the order of the last two lines, setting the arrow length from the unmodified direction vector, or (perhaps clearer) you can save its length in a separate variable. Without some such modification, though, the arrow will always be set to unit length.

In addition, the function arrow.setLength(length, headLength, headWidth) accepts two arguments beyond those shown in the answer (perhaps this has changed since this was written?). Accepting defaults for headLength and headWidth by not supplying explicit values in the call will result in overwriting any non-default values that might have been supplied in the constructor (rather than keeping the values as they are set).

Upvotes: 3

meetar
meetar

Reputation: 7611

So you can't update an arrowHelper per se in the usual way you update something, by changing the values you used to create the object.

However: you can move the arrow's position, which moves its apparent start point, and you can give it a new direction and length, which moves its apparent end point.

Here's how to do it:

// new arrowHelper
var sourcePos = new THREE.Vector3(0, 0, 0);
var targetPos = new THREE.Vector3(0, 50, 0);
var direction = new THREE.Vector3().sub(targetPos, sourcePos);
var arrow = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, direction.length(), 0x00ff00);
scene.add(arrow);

// update the arrow
var newSourcePos = new THREE.Vector3(10, 10, 10);
var newTargetPos = new THREE.Vector3(60, 10, 10);
arrow.position.set(newSourcePos);
direction = new THREE.Vector3().sub(newTargetPos, newSourcePos);
arrow.setDirection(direction.normalize());
arrow.setLength(direction.length());

Upvotes: 6

Related Questions