Three.js - Need help about static declaration and dynamic ArrowHelper

Question

I have an issue about 2 different code snippets for drawing a vector along direction defined by directionVectorLocal vector.

the first one :

var transportedVector = {
    coordLocal,
    arrowHelper,
    directionVectorLocal,
    directionVector
};

var arrowHelperTest = new THREE.ArrowHelper(transportedVector.directionVectorLocal.normalize(), originLocalBasis, 100);
camera.add(arrowHelperTest);

In this case, the arrow arrowHelperTest is well displayed on scene.

Now, the second one :

var arrowHelper;
var transportedVector = {
    coordLocal,
    arrowHelper,
    directionVectorLocal,
    directionVector
};

transportedVector.arrowHelper = new THREE.ArrowHelper(transportedVector.directionVectorLocal.normalize(), originLocalBasis, 100);
camera.add(transportedVector.arrowHelper);

In this case, the arrow transportedVector.arrowHelper is not displayed.

Here, I have to declare " var arrowHelper; " just before defining transportedVector object because if not, I get a " ReferenceError: arrowHelper is not defined " error.

I would like to declare dynamically transportedVector.arrowHelper defined into transportedVector object and be able to draw it into scene. Solution may be easy but I am not an expert in Javascript.

If someone could see what's wrong, this would be nice.

Thanks

Answer 1

See my comment to your original post. This code appears to work fine in my case:

var directionVectorLocal = new THREE.Vector3(0,0,-1);
var originLocalBasis = new THREE.Vector3(0,0,0);
var transportedVector = {
    arrowHelper: null,
    directionVectorLocal: directionVectorLocal
};

transportedVector.arrowHelper = new THREE.ArrowHelper(transportedVector.directionVectorLocal.normalize(), originLocalBasis, 100); // <-- Note the length of the arrow must be greater than the zNear value of the camera, otherwise it won't be visible.
camera.add(transportedVector.arrowHelper);
scene.add(camera);