Cross lines that will always look as a cross no matter which position the camera is

Hi everyone. Might be a simple question but I can’t seem to figure this one out. What I’m trying to do is have hover markers on some of my points. When the user hovers to that point, it will show a cross on top of that point.

private RenderCrossLines(camera: THREE.OrthographicCamera) {
    const material = new THREE.LineBasicMaterial({
      color: 'black'
    });
    
    let points: THREE.Vector3[] = [];
    points.push( new THREE.Vector3( this.position.x, this.position.y + this.GridPointRadius / 2, this.position.z ) );
    points.push( new THREE.Vector3( this.position.x, this.position.y - this.GridPointRadius / 2, this.position.z ) );
    let geometry = new THREE.BufferGeometry().setFromPoints( points );
    let vertLine: THREE.Line = new THREE.Line(geometry, material)
    vertLine.renderOrder = 9999;
    this.CrossLines.push(vertLine)
    this.Scene.add(vertLine);

    let horPts: THREE.Vector3[] = [];
    horPts.push( new THREE.Vector3( this.position.x + this.GridPointRadius / 2, this.position.y, this.position.z ) );
    horPts.push( new THREE.Vector3( this.position.x - this.GridPointRadius / 2, this.position.y, this.position.z ) );
    geometry = new THREE.BufferGeometry().setFromPoints(horPts);
    let horizontalLine: THREE.Line = new THREE.Line(geometry, material)
    horizontalLine.renderOrder = 9999;
    
    this.CrossLines.push(horizontalLine);
    this.Scene.add(horizontalLine);
  }

I have this code shown above. It creates lines based on the global xyz when the user hovers at a specific point. However I can’t figure out how to rotate the lines so that it will show a cross on the screen and not skewed or tilted in any way, while still having the center at the original point. Basically the cross is looking at the camera.

Thank you.

You will want to draw those lines in (2D) screen space, as opposed to (3D) world coordinates.

To compute the former from the latter, there are supporting functions in Three.js:

With a billboard effect!

// Example cross line
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Update the  lookAt in the animation loop
function animate( time ) {
	axesHelper.quaternion.copy(camera.quaternion);
//...

Demo: Three.js - Axis billboard - JSFiddle - Code Playground

1 Like