Draw negative XYZ axes in ThreeJS

Question

Right now I'm using this to paint the XYZ axes.

I need to know how I can also paint the -X,-Y,-Z axes.

const axesHelper = new THREE.AxesHelper(100);
const xColor = new THREE.Color(0xff0000);
const yColor = new THREE.Color(0x00ff11);
const zColor = new THREE.Color(0x0037ff);

axesHelper.setColors(xColor, yColor, zColor);
scene.add(axesHelper);

I guess I can't use the AxesHelper method, how could I do it manually?

ThreeJS Scene

The axles in orange are the ones that would need to be painted

Answer 1

A quick and janky aproach would be to add a second AxesHelper with size set to -100.

For a more complete manual solution, I would refer to or extend the code from the axis helper class that you can find here. You could write up something like:

class BidirectionalAxesHelper extends LineSegments {

constructor( size = 1 ) {

    const vertices = [
        -size, 0, 0,    size, 0, 0,
        0, -size, 0,    0, size, 0,
        0, 0, -size,    0, 0, size
    ];

    const colors = [
        1, 0, 0,    1, 0.6, 0,
        0, 1, 0,    0.6, 1, 0,
        0, 0, 1,    0, 0.6, 1
    ];

    const geometry = new BufferGeometry();
    geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
    geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );

    const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );

    super( geometry, material );

    this.type = 'AxesHelper';

}}

Make sure to add the imports and dispose function (and color change method if you want it)