Is it possible to enable selection functionality for WebGL text geometry once it has been integrated into the viewer's scene?

Upon adding a text geometry object to the viewer, I realized that I am unable to select it with the mouse as I can with other objects in the viewer. How can I make this text selectable? I have not attempted any solutions yet, as the documentation does not provide any ideas. My goal is to be able to listen for the selection event, which I have achieved, but I am unsure how to make this new TextGeometry object clickable. Here is my code snippet, apologies for not including it earlier.

    createText (params) {

    const geometry = new TextGeometry(params.text,
      Object.assign({}, {
        font: new Font(FontJson),
        params
      }))

    const material = this.createColorMaterial(
      params.color)

    const text = new THREE.Mesh(
      geometry , material)

    text.position.set(
      params.position.x,
      params.position.y,
      params.position.z)

    this.viewer.impl.scene.add(text)

    this.viewer.impl.sceneUpdated(true)
  }

Appreciate your help!

Answer №1

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.

Answer №2

I recently penned a piece focusing on this subject: Navigating custom meshes selection within model components using the Forge Viewer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React is experiencing issues with loading the bootstrap font due to a loader error

Recently, I encountered an issue with my React project that also loads bootstrap.css. The compiler is throwing this error message: Error: Module parse failed: /Users/me/myproject/app/fonts/glyphicons-halflings-regular.eot Unexpected character '&apos ...

Skipping beforeRouteLeave in VueJS

In my Vue SPA, there is a component where I am using the beforeRouteLeave guard to prevent accidental page exits. However, within this component, I occasionally make an ajax request that, upon successful completion, needs to redirect the user to another lo ...

Strategies for organizing a list of objects to minimize the number of GL calls

As I delve into the code of three.js, I can't help but notice that it iterates over all objects during the drawing process. This results in updating the GL context for each object individually. However, when dealing with multiple objects sharing a mat ...

Add letters to the input field as soon as typing begins without the need to first click on the input field when

Take a look at the code below: document.addEventListener('keyup', logKey); function logKey($event) { var charCode = $event.keyCode; if(charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > ...

Styled-Component: Incorporating Variables into Styled-Component is my goal

Currently, I am working on an app and have created a separate file for styling. I decided to use style-components for custom CSS, but faced an issue where I couldn't access variables instead of HEX values. Even after storing color values in a variable ...

Determining appropriate camera field of view (FOV) in THREE.JS based on camera position, and the reverse

I am currently working with a squared plane and a camera positioned perpendicularly to it. https://i.sstatic.net/GsSyd.png The renderer view is also square in shape. The camera is set to move along the Z axis starting from the plane (0 to infinity). I a ...

What is the best way to add unique styles to multiple tags with the same class designation?

Looking for suggestions on styling two tags with the same class differently? I have 2 tables: <table id="tab1" class=".ui-jqgrid .ui-jqgrid-hbox"> <table id="tab2" class=".ui-jqgrid .ui-jqgrid-hbox"> The first table is a jqgrid on the page, ...

Mobile site's call button functionality is malfunctioning

For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...

Angular fails to refresh Ng-class after on-change event is activated

Encountering an unusual issue with Angular. While I can trigger the desired action with ng-click, I must utilize onchange for other specific requirements. Although my code works smoothly for other buttons that execute the same action, the upload button fa ...

Assign the value of one dropdown menu based on the selected value of another dropdown menu using PHP

When a selection is made in the first dropdown, I want the values in another dropdown to be populated accordingly. I need to verify the value of the first dropdown with a variable and then populate the options in the second dropdown based on that conditio ...

Switching the dialogue with no need for a refresh

I am working on a feature for my website where I want to switch the language seamlessly without having to reload the page when a user clicks on one of three language flags (German, French, and English). When a flag is clicked, I store a cookie called lang ...

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Hey there! I encountered an issue with my website where the recaptcha isn't working on the desktop version. It's strange because I've used the same code successfully on other sites before. I attempted to fix it by creating a new recaptcha a ...

What is the process for acquiring a comprehensive catalog of Node.js modules?

Currently, I am working on integrating NPM functionality into my Node.js applications. My goal is to be able to analyze the node modules available on my system. When referring to a "module" in this context, it could either be an identifier like "fd" or a f ...

Chrome experiencing issues with jQuery AJAX, not related to cross-domain problems

I have a simple JS/jQuery code that makes an AJAX call to retrieve some HTML and insert it into a div on my webpage. While this process works smoothly in Firefox, it encounters a failure in Chrome. Upon checking the Chrome console, I can see the AJAX requ ...

Adjust the month to be plotted on the X-axis of the ColumnChart using the specified

My ORIGINAL POST: I've put together a fiddle to showcase how my data is sourced from JSON and displayed in a ColumnChart. https://jsfiddle.net/w4dokdt9/3/ This is an example of how my JSON data is structured: [{"lPlusScoreID":1,"jan":60.03,"feb":4 ...

AngularJS: The best practices for passing $scope variables to functions

Exploring the TodoMVC application has been a great way for me to enhance my skills with AngularJS. While delving into the index.html file, I stumbled upon lines 14-16 which contain the following code: <form id="todo-form" ng-submit="addTodo()"> ...

Animating positional changes with translate percentages in Android's native browser version 4.x

Lately, I've been developing a compact web application that incorporates the well-liked sidebar interaction design. In applying CSS3 animations to shift the sidebar into view, the animation glides smoothly but halts at the correct spot in the native b ...

Is there a way to troubleshoot and adjust this regex to accurately replace asterisks within words?

I've been experimenting with regex. I came up with a regex pattern that converts * into <em>, similar to Markdown: el = el.replace(/\*\b/g, '<em>') el = el.replace(/\b\*|(\.|\,|\?|\!|&bsol ...

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Let me begin by sharing some context: I am currently employed at a company where I have taken over the codebase. To better understand the issue, I decided to replicate it in a new nestjs project, which involves 4 entities (for demonstration purposes only). ...

updating a d3js line graph in real-time using JSON information

Trying to wrap my head around dynamically updating a line graph with new data, shifting the graph to the left and adding fresh data from the right - you following me? Want it to behave just like the examples on I'm fairly new to d3 (javascript) and l ...