From my own experience, the Forge Viewer is designed to interact specifically with translated models like SVF and F2D from the Forge Model Derivative service, along with the Built-in APIs. It appears that the text geometry you mentioned may be a custom creation using THREE.TextGeometry
, am I correct? However, there isn't much detail provided about this.
If you wish to engage with custom geometries within the Forge Viewer, you will need to create a Viewer Tool
and incorporate your own logic into it; for instance, enabling the highlighting of a text geometry when clicked by the mouse. For more in-depth information, you can refer to this resource:
Given that no specific code examples were shared here, I assume that your text is inserted into _viewer.sceneAfter
. Below is an example of handling a mouse left click event:
// Implement color change on custom geometries upon mouse click
handleSingleClick( event, button ) {
const _viewer = this.viewer;
// Function to find intersected objects
const intersectObjects = (function () {
// Declare required variables
const pointerVector = new THREE.Vector3();
const pointerDir = new THREE.Vector3();
const ray = new THREE.Raycaster();
const camera = _viewer.impl.camera;
return function(pointer, objects, recursive) {
const rect = _viewer.impl.canvas.getBoundingClientRect();
// Compute normalized coordinates
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 ) );
}
// Find intersections
const intersections = ray.intersectObjects( objects, recursive );
return intersections[0] ? intersections[0] : null;
};
})();
const pointer = event.pointers ? event.pointers[ 0 ] : event;
// Detect intersected custom geometries
const result = intersectObjects( pointer, _viewer.sceneAfter.children );
if( result && result.object ) {
const mesh = result.object;
// Modify object color
let curColor = mesh.material.color;
curColor = ( curColor.getHex() == 0xff0000 ? 0x00ff00 : 0xff0000 );
mesh.material.color.setHex( curColor );
// Trigger re-rendering
this.viewer.impl.invalidate( true, true, false );
}
return false;
}
I hope this explanation proves useful.