Can custom information be incorporated or shown for the specific area or mesh that is clicked on a rendered GLTF model?

I have a 3D model rendered using three.js, and I've managed to make it so that when you click on a part of it, that area turns red. However, what I want to do is not only highlight the clicked area but also display information about it in a modal window. The challenge I'm facing is figuring out how to link the clicked area with the relevant data. For example, if the model represents a car and the user clicks on a tire, I want to show details about that specific tire.

How should I go about implementing this feature? Should I add custom data to the model during its creation process? While I don't directly build the model myself, I have the ability to modify it if necessary, although I'm unsure if this is the correct approach.

Upon inspecting the object for the clicked MESH, I noticed an empty UserData object, which made me consider the possibility of adding custom data to the model before exporting it.

Any assistance or advice on this matter would be highly appreciated. Thank you,

Answer №1

While some exporters may allow for custom 'userData' fields to be set, the most widely available field is typically the .name field of an object/mesh, which is often derived from the object's name in the modeling software. .userData is commonly used for storing runtime state within a scene graph without affecting the object's built-in properties. Additionally, .userData will be serialized along with the object during toJSON operations. To begin, it would be helpful to check the names of the model's components by using either scene.traverse or model.traverse( (o)=>console.log(o.name) ) to identify the existing names in the model.

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

Musical backdrop for an online game platform

Currently, I am working on developing a game using HTML. I am trying to figure out the best way to incorporate music into the gameplay. Any suggestions on how I can add music to my web-based game? ...

The 3D model is venturing into the great outdoors thanks to React-three-fiber/react-three/drei

As I delved into the world of Three Js, I discovered the library called React-three-fiber which offers all the functionalities of Three Js in component form. Naturally, I decided to give it a try. The Issue:. https://i.sstatic.net/uHLlK.png I wanted to e ...

Using three.js to maintain an object's position on top of another object's surface

I have created a terrain geometry using this JavaScript code: var geometry = new THREE.PlaneGeometry(100, 100, 100 , 100 ); for (var i = 0, l = geometry.vertices.length; i < l; i++) { geometry.vertices[i].z = Math.random() / 2; ...

Is there a way to display the number of active users currently on a page using Pusher?

My goal is to create online classrooms with a maximum of two people in each room, allowing the teacher to know when both the teacher and student are connected. I attempted to track the number of users connected using Pusher's members.me function but ...

What is the best way to add data-content to hr:after using JavaScript?

Adding style to an element in javascript can be simple. For example: myElement.style.color = "red"; However, what if I wanted to achieve something like this: hr:after { content: "myRuntimeValue" } Is there a way to do this using javascript? ...

How to retrieve the value of a hidden field in ASP.NET after a partial postback

On my ASP.NET page, I am encountering an issue with a hidden field not being found during an asynchronous postback within an update panel. In the updatepanel_Load event, the following code is used: if (!IsPostBack || triggeredRefresh.Value == "1") { H ...

Expandable Table displaying all sections upon clicking with Shopify linklists

My current setup includes a sidebar menu that iterates through Shopify linklists to display the parent and child collection titles and URLs. However, I am encountering an issue where clicking on one of the anchor tags opens all anchor links due to non-uniq ...

Comparing Three.js BinaryLoader and BufferGeometry for handling heavy meshes: what's the best approach?

I am seeking the most efficient method for loading large polygonal meshes (with up to 1 million triangles) into Three.js. I am debating between using a THREE.BufferGeometry object or utilizing THREE.BinaryLoader. Some questions that arise are: Does Binar ...

AngularJS function does not send back a value to the caller

Currently, I am diving into the world of AngularJS and decided to create a small playground just for fun. The issue I am facing is that for some reason, the return value from getMessage() function is not being passed back to the caller. Below is the code s ...

If a box in the grid contains a certain class, then JavaScript should be

I've set up a grid featuring a player, represented by a yellow box, along with obstacles denoted by black boxes marked with the .ob class. I want to prevent the player from moving into these obstacle squares when the 'UP' button is clicked. ...

Having trouble pinpointing a particular hidden field within the Ajax response

My main focus is on the backend, but I am attempting to achieve a task on the frontend using Jquery. Here is what I am working on: Sending a URL from the backend in an Ajax response. Extracting and processing the URL from the Ajax response for further act ...

The oninput event does not trigger if the text field value is transferred from a different form

Event Handling: The oninput event functions perfectly when I input a mobile number into the small text field in my form. It displays a message indicating that the number already exists and disables the submit button accordingly. However, it fails to valida ...

A guide to building your own live HTML editing tool

I'm currently developing a PHP website that allows users to enter text into a textarea, and have the input displayed in a table in real time for a preview of the result. I am seeking guidance on how to make this feature possible. I have come across w ...

Transforming an HTML Java script for compatibility with ASP.Net using C#

Hey there! I've been given the task of converting a page from HTML to aspx, and I'm happy to say that I've successfully completed it. However, my main challenge now is getting a javascript function to run when the submit button is clicked. ...

What is the process for retrieving the response from a form_tag in a Rails application?

I am facing an issue with a form that submits information to the database. The form is displayed on a modal popup, and upon clicking the submit button, a new popup appears with two buttons. However, these buttons remain inactive until the controller call i ...

Ninja Sanctuary: SortingPicker blueprint

Looking to customize the Dojo FilteringSelect to prevent typing in it. I know it's possible to just set the textbox as read-only like this: postCreate: function() { this.inherited(arguments); this.textbox.readOnly = true; } However, my g ...

Conceal the heading 4 element when a specific text is searched

I have a search script that filters the text, but I want to hide the h4 element at the top of each ol. How can I achieve this? The issue I'm facing is that while the text gets filtered correctly, the h4 element (which should be hidden) remains visibl ...

How to connect the value of a Material-UI select dropdown with its corresponding list item value in React.js?

I have a group of individuals listed and a dropdown menu generated by material UI with various options. I can log the selected option from the dropdown, but how do I determine which user it corresponds to in the list? <List> {userGroup.map((pe ...

Retrieving information from embedded JavaScript code

The web page I am scraping contains inline JavaScript that dynamically generates telephone numbers inside a script tag. These numbers are not visible in the page source, making it challenging to scrape using common methods like x-path and beautiful soup. U ...

Exploring the intricacies of AJAX and jQuery: An example encountering a

After clicking the run button, an error appears in the Chrome console and there is no alert displayed. POST http://mysite/gd/add.php 503 (Service Unavailable) The issue seems to be with the index.php file: <html> <head> <script src ...