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.