youpilat13 youpilat13 - 3 months ago 4
Javascript Question

Difficulties to update an ArrowHelper without allocate new one

I try to update the components of 3

ArrowHelper
with
three.js
. Right now, I can successfully make update the 3
ArrowHelper
of my animation only by allocating new ones at each call of my drawing function.

For example, in my
main
function, I start by allocating 3
ArrowHelper
like this :

// Parameters for vector
var directionMainVectorX = new THREE.Vector3(1, 0, 0);
var directionMainVectorY = new THREE.Vector3(0, 1, 0);
var directionMainVectorZ = new THREE.Vector3(0, 0, 1);

var originMainVector = new THREE.Vector3(0, 0, 0);
var lengthVector = 20;
var widthVector = 3;
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;

mainVectorX = new THREE.ArrowHelper(directionMainVectorX, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorY = new THREE.ArrowHelper(directionMainVectorY, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorZ = new THREE.ArrowHelper(directionMainVectorZ, originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);


Then, into the
drawVector()
function, I have :

function drawVector() {

// Parameters for ArrowHelper
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;
var widthVector = 3;

// SOLUTION : Allocating each time a new vector
mainVectorX = new THREE.ArrowHelper(directionMainVectorX.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorY = new THREE.ArrowHelper(directionMainVectorY.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);
mainVectorZ = new THREE.ArrowHelper(directionMainVectorZ.normalize(), originMainVector, lengthVector, hexVector, headLengthVector, headWidthVector);

// Width for mainVector
mainVectorX.line.material.linewidth = widthVector;
mainVectorY.line.material.linewidth = widthVector;
mainVectorZ.line.material.linewidth = widthVector;

// Add arrows to scene reference
scene.add(mainVectorX);
scene.add(mainVectorY);
scene.add(mainVectorZ);

}


and Finally, my
render
function :

function render() {

rotateCamera();

drawVector();

controls.update();

renderer.render(scene, camera);

scene.remove(mainVectorX);
scene.remove(mainVectorY);
scene.remove(mainVectorZ);

}


With all the code above, everything works fine.

My issue is that I would like not to use the "
allocating at each call of drawVector() function
".

That's why I start by allocating only one time the 3
ArrowHelper
(I do it at the beginning of
main
code) and update their components by using into
drawVector()
function, like this :

function drawVector() {

// Parameters for ArrowHelper
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;
var widthVector = 3;

// Compute coordinates of 3vectors

// Compute directions
directionMainVectorX.set(1, 0, 0);
directionMainVectorY.set(0, 1, 0);
directionMainVectorZ.set(0, 0, 1);

// Update mainVector

// SOLUTION : update the parameters of vector
mainVectorX.position.set(originMainVector);
mainVectorY.position.set(originMainVector);
mainVectorZ.position.set(originMainVector);

mainVectorX.setDirection(directionMainVectorX.normalize());
mainVectorY.setDirection(directionMainVectorY.normalize());
mainVectorZ.setDirection(directionMainVectorZ.normalize());

mainVectorX.setLength(lengthVector, headLengthVector, headWidthVector);
mainVectorX.setColor(hexVector)

mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
mainVectorY.setColor(hexVector)

mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
mainVectorY.setColor(hexVector)

// Add arrows to scene reference
scene.add(mainVectorX);
scene.add(mainVectorY);
scene.add(mainVectorZ);
}


I saw this method on this previous post :
update ArrowHelper


But unfortunately, nothing appears, I have missed something but I don't know what...

If someone could help me, this would be nice.

Answer

Vector3.set takes 3 parameters - x, y, z not another vector so you should use mainVectorX.position.set(originMainVector.x,originMainVector.y,originMainVector.z); or mainVectorX.position.copy(originMainVector);

rewrite your drawVector (now it can be called updateVector :) ) as

function drawVector() {

  // Parameters for ArrowHelper
  var headLengthVector = 1.5;
  var headWidthVector = 1.5;
  var hexVector = 0x11ff00;
  var widthVector = 3;

  if(!mainVectorX.parent){    
    // Add transported arrow to scene reference
    scene.add(mainVectorX);
    scene.add(mainVectorY);
    scene.add(mainVectorZ);    
  }
  mainVectorX.position.copy(originMainVector);
  mainVectorY.position.copy(originMainVector);      
  mainVectorZ.position.copy(originMainVector);

  mainVectorX.setDirection(directionMainVectorX.normalize());
  mainVectorY.setDirection(directionMainVectorY.normalize());  
  mainVectorZ.setDirection(directionMainVectorZ.normalize());  

  mainVectorX.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorX.setColor(hexVector);

  mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorY.setColor(hexVector);

  mainVectorY.setLength(lengthVector, headLengthVector, headWidthVector);
  mainVectorY.setColor(hexVector);
}

and of course you should remove the

scene.remove(mainVectorX);
scene.remove(mainVectorY);
scene.remove(mainVectorZ);

from the render function

Comments