Issue with THREE.js: Object picking does not display the parent object name when an object is loaded using OBJMTLLoader

I successfully loaded an OBJ file along with MTL file textures using OBJMTLLoader. The code I used was borrowed from .

The primary object, a man in a business suit with hair, hands, and shoes, is displayed correctly with all the textures applied, such as eyes, mouth, tie, and buttons.

Upon loading, the object is represented as a THREE.Group with 10 children. Each child contains further THREE.Object3D elements with multiple THREE.Mesh objects.

Below is the JavaScript code snippet I used to load the OBJ and MTL files:

//==================================================

function SOW_F_Load_OBJMTL_Model ( givenFilespec, mtlFilespec, givenName, givenScene, givenHexColorStr, posX, posY, posZ,  rotX, rotY, rotZ, scaleX, scaleY, scaleZ )
    {

          THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

          var ObjMtl_loader = new THREE.OBJMTLLoader();

          ObjMtl_loader.load( givenFilespec, mtlFilespec, SOW_F_make_LoadedOBJ_Handler ( givenName, givenScene, givenHexColorStr, posX, posY, posZ,  rotX, rotY, rotZ, scaleX, scaleY, scaleZ ) );
        }

    } 



//=============================================

function SOW_F_make_LoadedOBJMTL_Handler( givenName, givenScene, givenHexColorStr, posX, posY, posZ, rotX, rotY, rotZ, scaleX, scaleY, scaleZ )
{

    return function ( object )
    {
        object.position.set( posX, posY, posZ );
        object.rotation.set( rotX, rotY, rotZ );
        object.name = givenName; 
        object.scale.set( scaleX, scaleY, scaleZ );
        givenScene.add( object );

        object.traverse (  function ( child )
                {
                    if ( child instanceof THREE.Mesh ) 
                    {
                        child.userData.rootObject = object;                         
                        //... following are for when material doesn't load
                        child.geometry.computeFaceNormals(); 
                        child.geometry.computeVertexNormals();   
                        child.geometry.normalsNeedUpdate = true; 
                    }
                }
             )  

        object.updateMatrix(); //... without this the next command is not effective.
        xxx = SOW_F_grob_Add_to_Target_Set( object );
    };

}

Despite the successful loading, I encountered a problem with object picking not reporting the correct name of the intersected object when loaded via OBJMTLLoader. It either displays the name of a texture material or nothing at all.

Interestingly, object picking functions as expected on mesh objects that I manually create in my THREE.js code.

I attempted to apply the fixes recommended in Picking Object3D loaded via OBJMTLLoader, such as including the following line in the intersection picking code:

var intersects = ray.intersectObjects( scene.children, true );

and in the object child processing code:

child.userData.rootObject = object; 

However, these solutions did not resolve the issue.

If anyone has suggestions on how I can ensure that object picking accurately reports the parent object of an object loaded via OBJMTLLoader, I would greatly appreciate the guidance.

Answer №1

Oh dear, it seems I just overlooked the need to find the name of the rootObject for the object that is intersected!

If you want to select object B (the object whose name needs to be reported) when object A is intersected, follow these steps:

var intersected_object_A = intersects[ 0 ].object; //... nearest object

If the intersected object A has a property userData.rootObject, you can choose the rootObject as object B.

if (intersected_object.userData.rootObject) {
    var referred_Object_B = intersected_object_A.userData.rootObject;
}

If not, simply select object A itself.

else {
    var referred_Object_B = intersected_object_A;
}

alert("You have selected:" + referred_Object_B.name);

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

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

Component loader with dynamic rendering for multiple components

Currently, I am in search of a method to dynamically render components within my Angular application. While exploring various options, I came across the concept of dynamic component loading in Angular (refer to https://angular.io/guide/dynamic-component-lo ...

Using a Function as an Argument to Return an Unnamed Object

There seems to be a common trend in JavaScript code where a function is passed as a parameter, which in turn returns an anonymous object. myFunction(function() { return { foo: 'bar' }; }); What benefits or reasons are there for u ...

"Attempting to use a Chrome Extension to apply inline styles is not producing

Despite my attempts to search on Google, I have been unable to find a solution. I am currently working on developing a Chrome extension with the specific goal of changing/inserting the style.display property for one or more elements. This task would norma ...

Angular: Enhancing URL links

Recently, I discovered a function in my code that allows me to cycle through different pictures and change the URL accordingly. The initial URL is obtained using angular routes, where the "domain" parameter consists of the domain.id and the domain.category ...

Exploring the world of two-dimensional arrays in D3 programming

I am interested in visualizing data obtained from the census data API, specifically from the ACS survey. The data is not in a typical JSON format, but rather as a two-dimensional array. It appears like this: [ [ “POPULATION”, “DATE”, ...

Splitting Code in React Components using Webpack within a Ruby on Rails Application

I'm currently integrating ReactJS components into my Rails application using the Webpack gem. However, I am facing an issue where the React components are only being loaded in specific areas within the layout of the Rails application. This results in ...

Trouble with document updates in MongoDB/Mongoose causing a delay?

I am currently working on updating an object nested in an array in my application. When I test this functionality using Postman, I am experiencing a delay that requires me to make two requests in order to see the updated value. if (taskStatus) { cons ...

Using Python within HTML with Python integration

df2 = pd.DataFrame(np.random.randn(5, 10)).to_html() myPage = """ <html> <body> <h2> Programming Challenge </h2> <form action="/execute" method="get"> <sele ...

JQuery - Issue: Invalid syntax detected in the expression: #

I'm facing an issue with some tabs inside an accordion that don't seem to be functioning properly. The console is showing the following error: Error: Syntax error, unrecognized expression: # Despite searching for a solution online, I can&apos ...

Implementing the disabled attribute in input text fields with Vue.js

There are 2 URLs that I am working with: /register /register?sponsor=4 The first route, /register, provides a clean input field where users can type freely. The second route, on the other hand, pre-fills the input with a value of 4 and disables it, ...

What are effective ways to eliminate cross-origin request restrictions in Chrome?

Just starting out with angular and trying to incorporate a templateUrl in an angular directive. However, when attempting to view the local html file in the browser, I encounter the following errors --> XMLHttpRequest cannot load file:///Users/suparnade ...

Guide on extracting an Array from JSON in a $.ajax response

I received a JSON value that was converted from an array in the AJAX response. {"Text":"Please provide a value","Email":"Please provide a value"} My goal is to extract the response JSON and display it within a div using $(div).html(): Text-Please provid ...

Updating multiple records in MongoDB using ObjectID as the criteria for selection can be achieved by leveraging the

I am currently working in the Mongo shell on Ubuntu and have a Collection with 1 million documents. My goal is to select 50,000 records based on their ObjectID and update one of the values. Is there a way to specify a range of 50,000 documents for the upd ...

Encountering errors while testing a NUXT.js and Vue.js application using Jest, specifically seeing messages like '[vuex] module namespace not found in mapState()' and '[vuex] unknown action type'

Despite NUXT's automatic namespacing feature, I am encountering difficulties testing or referencing the store in my testing modules. Can anyone offer advice on how to edit the namespacing property in a Nuxt app? Below is the code for the component, s ...

Troubleshooting Issue with Nested ng-include in AngularJS: Difficulty arises when the parent element with the ng-include attribute is dynamically added using the ng-

Click here to see a demo plunker that will help you understand my issue. On my main page, I have a table. Each table row is followed by a hidden empty row. When the first row is clicked, I use a directive to inject HTML into the empty row below it. Main ...

The model's function received the error message "Not a valid function."

My project involves NodeJS, Express, and Sequelize(mysql2)... I am encountering an issue where I keep receiving the error message "is not a function". I have created a model and defined a function in the model as shown below: module.exports = (sequelize, D ...

The parameter "file" needs to be a string data type, but npm run deploy to gh-pages received an undefined data type instead

I encountered an error while attempting to deploy a react application to gh-pages. Despite having successfully done it in the past, this is the first time I am facing this specific issue. The error message reads: The "file" argument must be of type string ...

Repetitive use of multiple submit buttons in AngularJS

i'm currently working with AngularJS Currently facing this issue: view screenshot I have utilized the following HTML code to display submit button for two different types of forms. One for TEXT Form and one for ENUM Form: <div ng-controller="g ...

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...