Is there a way to retrieve text mesh using the RayCaster in Three.js?

Encountering an issue while using RayCaster to select TextGeometry. The function createText() is used to display text on the canvas, which works fine and adds it to the array of meshes for RayCaster intersection checks. However, the function HandleSingleClick() does not trigger for TextGeometries.

Testing with cubes confirms that it works as intended when clicking on them causes a color change. Strangely, this behavior does not occur with text elements. Even though the meshes are included in the RayCaster's check array, they are not being detected and acted upon as expected.

import {
  Font,
  TextGeometry
} from '../js/libs/Three.es.js';
import FontJson from '../fonts/helvetiker_bold.typeface.json';

export default class TextExtension extends Autodesk.Viewing.Extension {

  constructor(viewer, options) {

      super()

      this.viewer = viewer
  }

  ...

  deactivate() {

  }

  /////////////////////////////////////////////////////////
  // Unload callback
  //
  /////////////////////////////////////////////////////////
  unload() {

      console.log('MeshSelection unloaded')

      this.viewer.toolController.deactivateTool(
          'MeshSelection')

      this.viewer.toolController.unregisterTool(this)

      return true
  }

  ...

}
Autodesk.Viewing.theExtensionManager.registerExtension(
  'TextSpawner', TextExtension);

Answer №1

It is essential to troubleshoot the ray casting logic in order to identify the issue at hand. The version of Three.js being utilized by the viewer includes a check to determine whether the geometry object from the tested mesh belongs to either THREE.BufferGeometry or THREE.Geometry instances. If not, the intersection logic will not be computed.

To ensure compatibility and minimize additional code, I implemented the following approach:

//***************************************************
// Encapsulates TextGeometry object and introduces a new mesh
// to the scene
//***************************************************
createText (params) {

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

  // utilizing a geometry recognized by the viewer's 
  // THREE.js version
  const geometry = new THREE.BufferGeometry

  geometry.fromGeometry(textGeometry)

  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)

  return text
}

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

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

Determining the location of elements in Three.js: A step-by-step guide

As a newcomer to the world of 3D Graphics programming, I have started using Three.js to develop a software application that involves 3D bin packaging visualization. Currently, my code is focused on creating and positioning two elements. var camera, scene, ...

What causes the difference between object[key] and Object.key in JavaScript?

After running the following code snippet, I observed that "typeof object[key]" is displaying as a number while "typeof object.key" is showing undefined. Can anyone explain why this unusual behavior is occurring? var object = {a:3,b:4}; for (var key in o ...

Is it possible to authenticate a user in Firebase using Node.js without utilizing the client side?

Can I access Firebase client functions like signInWithEmailAndPassword in the Firebase SDK on the server side? Although SDKs are typically used for servers and clients use JavaScript, I need a non-JavaScript solution on the client side. I have set up the ...

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

Regular expression patterns for authenticating and verifying passwords

Currently, I am working on a JavaScript program to validate passwords using regex. Here are the requirements: The password must consist of at least seven characters. It should include at least one of the following: an uppercase letter (A-Z) a lowercas ...

Setting up Datatables using AngularJS

I am working on a controller that organizes song rankings based on sales data. Upon initialization, the controller automatically sends an HTTP GET request to retrieve all the songs needed for display (currently set at the top 20 songs). If I ever need to a ...

Experience the frustration when the Ruby on Rails Open Modal Box Link fails to work. Stay tuned for the latest update on the link

My goal is to have a Modal Popup Box open when a specific link is clicked on my page. Here is the code I added to my view file: <%= link_to_remote '+ Add Discount', :url => {:controller => "parent_wise_fee_payments", :action => "ne ...

Exploring Attachments in ASP.NET Core MVC Views

I have placed attachments in a Shared Folder on a server. I attempted to access them using the <a> tag <a href="file:///C:">Open Attachments</a> Unfortunately, this method did not work in ASP.NET Core MVC for unknown reasons. I ...

JSONP error: "Syntax error - token not expected"

While attempting to perform a JSONP AJAX request, an error was thrown: Uncaught SyntaxError: Unexpected token I'm puzzled about what is wrong in my code. Can someone assist? $.ajax({ url: 'http://api.server32.trustklik.com/apiv1/website/ ...

Having trouble with your jQuery AJAX function not receiving the text returned from your PHP file?

After extensive searching, I have come across several individuals facing the same issue as me, but unfortunately, none of them seem to have found a solution. The problem at hand is that PHP is not providing any data to the AJAX function. When I try to dis ...

Display a badge in the navbar on specific VueJS pages

I have embarked on the journey of creating a single page application using Vue 3, and I've encountered an interesting scenario where I want to display a badge in the navigation bar for specific pages. This is how my setup looks: // App.vue <templat ...

express.js creating dynamic URLs causing confusion

router.get('/:username', function(req, res, next) { res.render('dashboard'); }); router.get('/', function(req, res, next) { if(req.user) // this has value res.redirect('/'+req.user); }); I'm experi ...

Tips for managing test cases to execute on various browsers using protractor

unique challenge observing the unique challenge image provided, there are two browsers executing different test scenarios. I aim to execute spec 7 on both active browsers (browser1 and browser2) with an interactive approach like a chat application. After ...

How to dynamically add variables to object paths using JavaScript and Angular

I've been struggling to grasp this concept, despite hours of searching. My goal is to dynamically generate form fields based on a user-selected 'type' from a dropdown menu. This will be linked to the variable "currentType" in Angular, which ...

Leverage node rework CSS directly within your browser for seamless website

Looking to utilize the reworkcss/css library in the browser. Downloaded version 2.0.0 from GitHub and installed necessary packages with npm install. Attempted using requireJS, which supports processing the CommonJS Module Format by requiring index.js, bu ...

Challenge: RxJS timeout function not functioning as expected

I am facing an issue with exiting the Observable stream after 3 seconds if there is no new string input. The problem arises when I paste the same value multiple times, as the distinctUntilChanged operator prevents the input stream from progressing. I wan ...

Showing undefined or null values in React and JavaScript

My goal is to format undefined or null values by italicizing them. If the value is an empty string, it should be displayed as is. If it has a value, that value should also be displayed as is. However, I am encountering an issue where null or undefined val ...

Navigate to a specific section within a div

I am currently developing a web chat application in next.js and have added an emoji picker button. However, when the button is clicked, the emoji menu only appears after scrolling down. I attempted to use scrollIntoView() but it did not work as expected. ...

Dynamically insert a new bootstrap 4 card

Does anyone know how to dynamically add a new card using JavaScript? The code provided allows for the removal of a card, but not the addition of a new one. I attempted to start something like this, but I am currently stuck. An example of the HTML code: ...