How to get the position of overlay geometry on hover? - autodesk-forge

Question

In my forge viewer project I am trying to add point-cloud markup to mark selected items in some saved viewpoint. I can create the markers using below code-
createPointCloud(points, overlayName) {
if (points.length > 0) {
try {
const vertexShader = `
attribute vec4 color;
varying vec4 vColor;
void main() {
vec4 vPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * vPosition;
gl_PointSize = 20.0;
vColor = color;
}
`;
// Fragment Shader code
const fragmentShader = `
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`
// Shader material parameters
this.shader = {
side: THREE.DoubleSide,
depthWrite: this.occlusion,
depthTest: this.occlusion,
fragmentShader,
vertexShader,
attributes: {
color: {
type: 'v4',
value: []
}
}
}
// Initialize geometry vertices
// and shader attribute colors
this.geometry = new THREE.Geometry()
for (const point of points) {
this.geometry.vertices.push(
new THREE.Vector3(point.position.x, point.position.y, point.position.z))
this.shader.attributes.color.value.push(
new THREE.Vector4(
point.color.r/255.00,
point.color.g / 255.00,
point.color.b / 255.00,
1.0)
)
}
// creates shader material
let shaderMaterial = new THREE.ShaderMaterial(this.shader);
// creates THREE.PointCloud
let pointCloud = new THREE.PointCloud(
this.geometry, shaderMaterial)
this.overlayPointCloudMap[overlayName] = pointCloud;
this.viewer.impl.createOverlayScene(overlayName);
this.viewer.impl.addOverlay(overlayName, pointCloud);
} catch (ex) {
alert('Can\'t show points, please try again!');
}
}
}
Also want to show some modal on hover over the markup. To do that I need to know the position of the markup that is currently hovered. I've tried a solution based on this. But not able to get the correct item. Sometimes it returns empty list. The hit-test code is like below-
updateHitTest(event) {
const pointer = event.pointers ? event.pointers[0] : event;
const pointerVector = new THREE.Vector3();
const pointerDir = new THREE.Vector3();
const ray = new THREE.Raycaster();
ray.params.PointCloud.threshold = 20; // hit-test markup size = 20
const camera = this.viewer.impl.camera;
const rect = this.viewer.impl.canvas.getBoundingClientRect();
const x = ((pointer.clientX - rect.left) / rect.width) * 2 - 1;
const y = - ((pointer.clientY - rect.top) / rect.height) * 2 + 1;
if (camera.isPerspective) {
pointerVector.set(x, y, 0.5);
pointerVector.unproject(camera);
ray.set(camera.position, pointerVector.sub(camera.position).normalize());
} else {
pointerVector.set(x, y, -1);
pointerVector.unproject(camera);
pointerDir.set(0, 0, -1);
ray.set(pointerVector, pointerDir.transformDirection(camera.matrixWorld));
}
let nodes = [];
// loop through all the overlays and intersect with the respected point-cloud
for (const overlay of this.overlayNames) {
nodes = nodes.concat( ray.intersectObject(this.overlayPointCloudMap[overlay]));
}
if (nodes.length > 0) {
if (this.lastClickedIndex != nodes[0].index) {
this.lastClickedIndex = nodes[0].index;
console.log(this.lastClickedIndex);
}
}
}
Could you please help me to figure out where to change or how can I get the job done? TIA

Answer 1

The code seems alright. But you may need to adjust the ray.params.PointCloud.threshold value. Also, try debugging the three.js code by adding a single point to the point cloud, and stepping into the ray.intersectObject method to see it can't find it.
Alternatively, if the number of points/markers you expect to have on screen is "reasonable", consider the approach of adding them as HTML elements overlaying the 3D view es explained in https://github.com/autodesk-forge/forge-extensions/tree/master/public/extensions/IconMarkupExtension.