Using several .obj models in THREE.js and identifying which object has been clicked

After following this example on how to load .obj Models using three.js, I decided to experiment with loading more than one model. Here is a snippet of the code I used:

loader.addEventListener( 'load', function ( event ) {

var object = event.content;

object.position.y = - 80;
scene.add( object );

});
loader.load( 'obj/model1.obj' );
loader.load( 'obj/model2.obj' );

Firstly, I am unsure if this approach is correct as I couldn't find any tutorials on loading multiple .obj models.

Secondly, I want to enable users to click on different models displayed on the screen. I attempted to implement a solution from this interactive cubes example, but it didn't work for me. Any suggestions or alternatives?

Answer №1

If you're looking for a guide on how to load multiple models, check out this helpful example:

http://example.com/loading_multiple_models_guide

When it comes to detecting clicked objects, make sure to consider your specific model requirements and set the recursive flag to true:

ray.intersectObjects( objects, true );

Answer №2

It seems like there may be some missing code in your question, but based on what you've provided, my suggestion would be to create an array of objects and then push the individual objects into it. Here's a basic example:

var arrayOfObjects = [];

Once you have initialized the array, you can add objects to it like this:

arrayOfObjects.push( object );

By doing this, you will have an array ready for checking object intersections after setting up THREE.Ray.

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

Is there a way to customize or update the index page of a directory in an Express application?

When using Express, I typically use the following code to set up a static server with directory index pages: app.configure(function() { app.use('/mystuff', _express.static(__dirname + "/whatever/stuff")); app.use('/mystuff', _e ...

Retrieving Output from forEach Array Object

Is it possible to retrieve a value from a forEach array instance? const numArr = [10, 20, 30, 40, 50]; numArr.forEach(function (num, index, array) { console.log(array[index] + 100); }); While attempting to capture the console.log value, I found that it ...

The jQuery text input field is unable to be hidden using the hide

My table looks like this. <input type=checkbox onclick=enableEdit(this)/> <tr> <td onclick=enableInput(this)> <input style="display:none"> <span>text1</span> </td> <td onclick=enableInput(this)> ...

The model in the Schema has not been registered, unlike other models from the same source that have been successfully registered

When populating a node express route with information from Schemas, I encountered an error that puzzles me. Even though I am referencing three different fields in the same Schema, I am only facing this error for one of those fields. The specific error mes ...

The GET request for a "places" endpoint in a node js application is experiencing issues

Today marks my second day working with node js and mongo. I've explored different tutorials and currently, I'm attempting to follow this specific one: https://github.com/amejiarosario/todoAPIjs/commit/d3be6a287e8aff39ab862971da4f050d04e552a ...

In React Native, what exactly does it signify when you run the packager with the `--clearCache` flag?

Whenever I run my React Native apps, I rely on the command react-native run-ios. However, while debugging, it recommended using the "--clearCache" flag when running the packager. Can someone explain what this suggestion means? What exactly is the package ...

What could be causing the component not to display the accurate data in ReactJS?

Currently, I am working on rendering an array of values along with two buttons - one for adding and the other for removing elements. Everything seems to be working fine, except for the removal functionality. When I click on the Remove button for a specific ...

Storing Json data in a variable within Angular 2: a step-by-step guide

https://i.sstatic.net/2QjkJ.png Within the params.value object, there are 3 arrays containing names that I need to extract and store in a variable. I attempted to use a ForEach loop for this purpose, but encountered an issue. Can you spot what's wron ...

Utilize CSS to showcase the full-size version of a clicked thumbnail

I am working on a web page that features three thumbnails displayed on the side. When one of these thumbnails is clicked, the full-size image should appear in the center of the page with accompanying text below it. Additionally, I have already implemented ...

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

Determining CheckBox Values in GridView Header and Rows: An In-Depth Guide

Encountering an issue with the Header checkbox in my Gridview. The data binding is done through C# and not jQuery Ajax. In the first scenario: When the Header is checked, the AMT calculation works correctly. Second scenario: Unchecking clears the AMT pro ...

Hydration has finished, but there are some discrepancies - Utilizing Ascii art within a vue component

I encountered an issue with displaying ascii art in the {{ name }} section of my component. While developing, a Vue warning popped up: Hydration text content mismatch in <pre> Followed by an error message: Hydration completed but contains mismatch ...

Ensuring correct options are selected in dependent selects using jQuery Validation plugin

OVERVIEW Utilizing the jQuery Validation plugin to ensure form accuracy before submission to the server. While effective for basic scenarios, the official documentation lacks comprehensive advanced examples. SCENARIO Consider an online store with three ...

Passing a value from the Trigger button to the Modal button in Angular-UI Bootstrap

Seeking some help. I am working with angular-ui-bootstrap alongside php and mysql. My goal is to pass a value from a list of links (dynamically generated from php mysql) to a modal button each time the modal is loaded. HTML // The link below is generated ...

How can I apply a style to text when I double click on it?

Rephrased: There is an input field on my webpage: <input type="text" id="some_id" /> I type some text into the input field: Here is my text! If I double click on the word "my", am I able to: Retrieve this value? Yes, the answer is provided belo ...

What is the method for accessing an anonymous function within a JavaScript Object?

Currently facing an issue with a Node.js package called Telegraf, which is a bot framework. The problem arises when trying to create typings for it in TypeScript. The package exports the following: module.exports = Object.assign(Telegraf, { Composer, ...

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

Exploring the vertices with the updated PlaneBufferGeometry feature in ThreeJS

I've recently learned that PlaneGeometry is no longer supported and suggest using PlaneBufferGeometry in the latest updates. While my code used to function properly in versions prior to R125, I am unsure how to modify it to work with PlaneBufferGeomet ...

ReactJS is unable to locate a valid DOM element within the target container

I recently embarked on my journey to learn ReactJS and I celebrated successfully writing my first code. However, when I encountered the same pattern with components, an error popped up stating _Invariant Violation: registerComponent(...): Target container ...