Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Question

Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Currently, I am working on developing a procedurally generated city using three.js, focusing mainly on creating buildings. One of the crucial requirements for this project is that when a user clicks on a building with their mouse, detailed information about that specific building, such as its name and location, should be displayed in a text box that hovers next to the building.

I tried to investigate if the three.js mesh object representing each building had a "data" property where this information could be stored, but unfortunately it does not.

Does anyone have any suggestions or insights on how I could implement this functionality? Thank you in advance.

javascript three.js procedural-generation

Answer 1

Answer №1

The Object3D class comes with a feature called userData that allows for the secure addition of custom data.

Due to its inheritance from Object3D, the Mesh class also possesses this property.

To utilize it, follow these steps:

mesh.userData.name = "TheName";

This trick is applicable in three.js r.71

Answer 2

The Object3D class comes with a feature called userData that allows for the secure addition of custom data.

Due to its inheritance from Object3D, the Mesh class also possesses this property.

To utilize it, follow these steps:

mesh.userData.name = "TheName";

This trick is applicable in three.js r.71

Answer 3

Answer №2

Even though it's written in JavaScript, you have the flexibility to include a personalized object to the mesh:

var structure = new THREE.Mesh( [...] );
structure.details = { type: "office building", city: "New York", height: 350, [...] };

console.log( structure.details.type ); //office building

Answer 4

Even though it's written in JavaScript, you have the flexibility to include a personalized object to the mesh:

var structure = new THREE.Mesh( [...] );
structure.details = { type: "office building", city: "New York", height: 350, [...] };

console.log( structure.details.type ); //office building

Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Answer №1

Answer №2

Similar questions

Use jQuery Ajax to fetch an image and display it on the webpage

The JSON parsing failed due to an expected '}' character missing

Steps for invoking a function in an HTML document from an external jQuery script

Is it possible to execute JavaScript in VSCode without the need for Node.js?

What is the best way to display only the current != wanted lines when using "npm outdated"?

Transferring JSON information from JavaScript to PHP using Jquery AJAX

Step-by-step guide on implementing a border-bottom for an active link

Arrange an HTML div element within the confines of a mobile phone graphic

Attempting to iterate over elements within an object labeled as strIngredients 1-15

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

The client side script "/socket.io/socket.io.js" was not located, therefore the Express-generator project was used instead

Accessible Drag and Drop Pattern without Barriers

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

Preventing the use of double-click on Grooveshark

An effective way to mimic an un-exported (private) function within a user module using Jest

Modify the height of every div after a successful ajax request

Corrupted Excel file after downloading using the axios library in Vue.js

Checking for null values using the "and/or" syntax

What steps do I need to take to incorporate dialog-polyfill into my React application?

When a row is clicked, retrieve the data specific to that row