Increase width of lines in Axes Helper

Questions
,
1

Hi,

I am trying to increase the width of the lines in the Axeshelper I have added to my scene.
I tried to apply a material with the line width of my choice, but applying it to the Axeshelper didn’t affect anything.
Do you have any idea how to increase the line width of the 3 axes in the Axeshelper?

1 Like
2

Its not possible. You need to create your own version of AxesHelper using code from fat lines example

If you decide to do this, note this line in the animate method is important, otherwise, nothing is rendered. It doesn’t have to be in every frame like the example, only when the window size changes.

matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
2 Likes
3

Three cylinders is an option too :thinking:

1 Like
4

Thank you, will check this out.

1 Like
5

Sorry, I couldn’t figure out how to get each line to be a different color

import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
import {  LineMaterial,} from "three/examples/jsm/lines/LineMaterial";
import { Line2 } from "three/examples/jsm/lines/Line2";

export class FatAxesHelper extends Line2 {
  constructor(size = 1, linewidth = 6, color = 0xffffff) {
    const vertices = [
      0, 0, 0,   size, 0, 0,
      0, 0, 0,   0, size, 0,
      0, 0, 0,   0, 0, size
    ];

    const geometry = new LineGeometry(); 
    geometry.setPositions(vertices)

    const material = new LineMaterial({
      color,
      linewidth,
    });
    material.resolution.set(window.innerWidth, window.innerHeight); // resolution of the viewport
    material.worldUnits = false;

    super(geometry, material);
    // @ts-ignore
    this.type = "FatAxesHelper";
    this.computeLineDistances()
  }

  dispose() {
    this.geometry.dispose();
    this.material.dispose();
  }
}
2 Likes
6

@anidivr
Something like this, perhaps:

const colors = [
1, 0, 0, 1, 0, 0,
0, 1, 0, 0, 1, 0,
0, 0, 1, 0, 0, 1
]
...
geometry.setColors(colors);
...
const material = new LineMaterial({
  linewidth,
  vertexColors: true
});

PS Haven’t tested :slight_smile:

1 Like
7

Thank you so much for this! helps me a ton!

8

I tried the cylinders and fulfilled my need.
What I used:

const cylinderX = new THREE.Mesh(
            new THREE.CylinderGeometry(0.1, 0.1, 2), // radius,height,length
            new THREE.MeshBasicMaterial({ color: 0xff0000 }) // Red - X
        );
        cylinderX.position.copy(targetPoint.clone().add(new THREE.Vector3(1, 0, 0)));
        cylinderX.rotation.set(0, 0, Math.PI / 2);
        this.Scene.add(cylinderX);
    
        const cylinderY = new THREE.Mesh(
            new THREE.CylinderGeometry(0.1, 0.1, 2), 
            new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // Green - Y
        );
        cylinderY.position.copy(targetPoint.clone().add(new THREE.Vector3(0, 1, 0))); 
        this.Scene.add(cylinderY);
    
        const cylinderZ = new THREE.Mesh(
            new THREE.CylinderGeometry(0.1, 0.1, 2), 
            new THREE.MeshBasicMaterial({ color: 0x0000ff }) // Blue - Z
        );
        cylinderZ.position.copy(targetPoint.clone().add(new THREE.Vector3(0, 0, 1))); 
        cylinderZ.rotation.set(Math.PI / 2, 0, 0);
        this.Scene.add(cylinderZ);```
9

Actually, I do it by simply removing the AxesHelper from the scene, then changing its size and displaying it again.
Here, with a gui-dat panel to change its size:

// AxesHelper
// =============================================================================
const axes = new THREE.AxesHelper;
scene.add(axes); // Size default is 1

let axesHelperParam = {size:1};

function axesHelperResize(size:number) {
  scene.remove(axes); 
  axes.scale.setScalar(size);
  scene.add(axes);
  render(); // Function to renderer.render on demand
}

const axesFolder = gui.addFolder("Axes");
axesFolder.add(axesHelperParam, 'size', 1, 5).onChange(axesHelperResize);
axesFolder.open();

I use the same approach for a Grid Helper