In my project using three.js, I am facing a challenge with updating the components of 3 ArrowHelper. Currently, I am able to update these 3 ArrowHelper in my animation by creating new instances each time the drawing function is called.
For instance, in my main function, I initialize the 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);
Subsequently, in the drawVector() function, I have the following logic:
function drawVector() {
// Parameter values for ArrowHelper
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;
var widthVector = 3;
// Solution: Creating new vectors every time
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);
// Set line 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);
}
Lastly, the render function looks like this:
function render() {
rotateCamera();
drawVector();
controls.update();
renderer.render(scene, camera);
scene.remove(mainVectorX);
scene.remove(mainVectorY);
scene.remove(mainVectorZ);
}
The setup above works smoothly. However, I aim to avoid the repetitive allocation process inside the drawVector() function.
To achieve this optimization, I initially allocate the 3 ArrowHelper instances just once at the beginning of the main code block and then proceed to update their properties within the drawVector() function as shown below:
function drawVector() {
// Parameter values for ArrowHelper
var headLengthVector = 1.5;
var headWidthVector = 1.5;
var hexVector = 0x11ff00;
var widthVector = 3;
// Calculate coordinates for the 3 vectors
// Compute directions
directionMainVectorX.set(1, 0, 0);
directionMainVectorY.set(0, 1, 0);
directionMainVectorZ.set(0, 0, 1);
// Update mainVector
// Solution: Update the vector parameters
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)
mainVectorZ.setLength(lengthVector, headLengthVector, headWidthVector);
mainVectorZ.setColor(hexVector)
// Add arrows to scene reference
scene.add(mainVectorX);
scene.add(mainVectorY);
scene.add(mainVectorZ);
}
I came across this technique from a previous discussion on updating ArrowHelper.
Despite implementing this approach, nothing seems to appear. Am I overlooking something?