Just installed the latest version of ThreeJS and now having trouble with the instanceof operator not functioning properly

Question

Just installed the latest version of ThreeJS and now having trouble with the instanceof operator not functioning properly

After updating to r99, I've encountered an issue with my instanceof checks no longer working properly.

For example, when I traverse through an object and check if its children are instances of Mesh, it's returning false. However, if I inspect child.constructor.name, it shows as Mesh.

object.traverse(child => {
    console.log(child);
    if (child instanceof THREE.Mesh) {
        console.log('THREE.Mesh');
    } else {
        console.log('NOT THREE.Mesh');
    }
    console.log(child.constructor.name);
    console.log('----');
}

https://i.sstatic.net/gBxZf.png

What could have possibly gone wrong or changed when simply updating the library?

javascript three.js

Answer 1

Answer №1

It's unclear how the object you're navigating through was generated without access to that code, but it's possible that the loader you're utilizing altered its approach.

When verifying types, I suggest utilizing the predefined .type property, which is what Three.js internally employs to distinguish between different object types. The issue with using instanceof is that it can lead to ambiguous outcomes when working with subclasses:

var myMesh = new THREE.Mesh();
console.log(myMesh instanceof THREE.Mesh);      // True
console.log(myMesh instanceof THREE.Object3D);  // Also true

However, by checking the .type property, you'll have more certainty about the object type.

console.log(myMesh.type === "Mesh");        // True
console.log(myMesh.type === "Object3D");    // False

Answer 2

It's unclear how the object you're navigating through was generated without access to that code, but it's possible that the loader you're utilizing altered its approach.

When verifying types, I suggest utilizing the predefined .type property, which is what Three.js internally employs to distinguish between different object types. The issue with using instanceof is that it can lead to ambiguous outcomes when working with subclasses:

var myMesh = new THREE.Mesh();
console.log(myMesh instanceof THREE.Mesh);      // True
console.log(myMesh instanceof THREE.Object3D);  // Also true

However, by checking the .type property, you'll have more certainty about the object type.

console.log(myMesh.type === "Mesh");        // True
console.log(myMesh.type === "Object3D");    // False

Just installed the latest version of ThreeJS and now having trouble with the instanceof operator not functioning properly

Answer №1

Similar questions

Absence of information from the localStorage is evident

Ways to Display or Conceal an HTML Element in the Document Object Model Using its Position Identifier

Automatically adjust the top margin of the content section to accommodate a fixed header height

Retrieving data objects from axios call in Vue and passing them to the controller

Change the position of a div by clicking a button using JavaScript

Which approach yields better performance: setting all dom events simultaneously, or incrementally?

Breaking down strings using delimiters in JavaScript

Updating the placeholder text of a textarea using a conditional statement in PHP

I am looking to have the passport store req.client instead of req.user when using the Bearer strategy

"Incorporating Adobe Edge Animate alongside AngularJS and AngularUI Router for dynamic web design

The Express.js feature "app.use() mandates the use of middleware functions"

JavaScript Instant Validation: Ensuring Accuracy in Real-Time

Using Ajax with Controller Action in Yii2

Is there an issue with the onClick event in React Buttons when they are generated using the .map()

Displaying an alert when the text box contains a duplicate value

What is the process for choosing and making changes to a specific portion of a textContent?

What could be causing my jQuery to only toggle the first arrow in my HTML?

Route Separation with ExpressJS and Socket.IO

What steps can I take to address this Material UI alert and deliver a solution that adds value?

Managing checkboxes using the useState object