How to dynamically update THREE.js PointCloud overlay in Autodesk Forge - three.js

Question

I am working on a markup extension for autodesk forge. I want to be able to click on a position, and have a markup dynamically appear as a pointcloud.
Below is the load function for the extenision. The first time that I load the pointcloud it works, but when I try to add verticies to the geometry, and render that, the new points don't appear. However, the raycaster is able to detect the point. I know this because when I click on a location for the second time, I get a log telling me that the raycaster intercepted the pointcloud (even though that point is not rendered on the screen).
ClickableMarkup.prototype.load = function () {
const self = this;
/* Initizialize */
console.log('Start loading clickableMarkup extension');
this.camera = this.viewer.navigation.getCamera(); // Save camera instance
console.log(this.camera);
this.initCameraInfo(); // Populate cameraInfo array
this.overlayManager.addScene(this.sceneName); // Add scene to overlay manager
this.scene = this.viewer.impl.overlayScenes[this.sceneName].scene; // Save reference to the scene
/* Create pointCloud */
this.geometry = new THREE.Geometry();
this.cameraInfo.forEach( function(e) {
// console.log(` > add ${e.position}`)
self.geometry.vertices.push(e.position);
}
);
this.geometry.computeBoundingBox();
// const material = new THREE.PointCloudMaterial( { size: 50, color: 0Xff0000, opacity: 100, sizeAttenuation: true } );
const texture = THREE.ImageUtils.loadTexture(this.pointCloudTextureURL);
this.material = new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
opacity: this.prefs.POINT_CLOUD_OPACITY,
fragmentShader: this.fragmentShader,
vertexShader: this.vertexShader,
depthWrite: true,
depthTest: true,
uniforms: {
size: {type: "f", value: self.size},
tex: {type: "t", value: texture}
}
});
this.points = new THREE.PointCloud( this.geometry, this.material );
/* Add the pointcloud to the scene */
this.overlayManager.addMesh(this.points, this.sceneName); /* >>> THIS WORKS SO IT RENDERS THE POINTCLOUD AT THE BEGINNING OF LAOD <<< */
/* Set up event listeners */
document.addEventListener('click', event => {
event.preventDefault();
this.setRaycasterIntersects(event); // Fill this.intersects with pointcloud indices that are currently selected
if (this.intersects.length > 0) {
console.log('Raycaster hit index: ' + this.hitIndex + JSON.stringify(this.intersects[0]));
this.setCameraView(this.hitIndex);
} else {
/* >>>> THE PROBLEM IS HERE - IT DOESN'T RENDER THE NEW POINTCLOUD POINTS <<<< */
const mousePos = this.screenToWorld(event);
if (mousePos) { // Only add point to scene if the user clicked on the building
const vertexMousePos = new THREE.Vector3(mousePos.x, mousePos.y, mousePos.z);
this.geometry.vertices.push(vertexMousePos);
this.geometry.verticesNeedUpdate = true;
this.geometry.computeBoundingBox();
this.points = new THREE.PointCloud(this.geometry, this.material);
this.overlayManager.addMesh(this.points, this.sceneName);
this.viewer.impl.invalidate(true); // Render the scene again
}
}
}, false);
console.log('ClickableMarkup extension is loaded!');
return true;
};
How do I make new pointcloud verticies render?

Answer 1

It looks like there might be a typo in the problematic code.
this.overlayManager.addMesh(this.points, 'this.sceneName');
Should probably be
this.overlayManager.addMesh(this.points, this.sceneName);