I have a Three.js Group containing five elements, but I am having trouble accessing the meshes within. Is there a way to properly access the meshes within a Three.js group?

Question

I have a Three.js Group containing five elements, but I am having trouble accessing the meshes within. Is there a way to properly access the meshes within a Three.js group?

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

I am encountering an issue while trying to access elements within this array. Despite there being a length of 5, the code returns "undefined" and has a length of 0. The image above shows the output of this code.

console.log(scene.children[1].children);

The result of the following code is 0

console.log(scene.children[1].children.length);

The result of the next code snippet is undefined

console.log(scene.children[1].children[0]);

If it helps provide context, here are previous paths:

console.log(scene);

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

console.log(scene.children[1]);

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

As per comments, here is the full code:

import "./styles.css";
... (the rest of the original code goes here)

javascript three.js

Answer 1

Answer №1

Your issue stems from asynchronous code causing the loadModels function to load models asynchronously, leading to the rest of the code completing before all calls to this method finish.

To gain a better understanding of why this occurs, watch this informative video on the event loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ.

Loading GLTF models may also introduce some delay based on their size, requiring a few milliseconds before they are accessible within the group.

You can experiment with logging on each tick by modifying your tick method as follows:

const tick = () => {
    // Code snippet for raycaster
    window.requestAnimationFrame(tick);
};

In our threejs experience, it proved beneficial to assign the scene to the global window for convenient access in Chrome. Simply insert the following lines after creating the scene:

window.scene = scene

import "./styles.css";
// Additional imports and setup code...
window.scene = scene;

This modification enables you to access the group via the Chrome console once the GLTF models have loaded. With scene now reachable from devtools, simply type 'scene' to access it or use scene.children[0].children[1] to view your group.

Note: This approach is primarily for debugging purposes.

Answer 2

Your issue stems from asynchronous code causing the loadModels function to load models asynchronously, leading to the rest of the code completing before all calls to this method finish.

To gain a better understanding of why this occurs, watch this informative video on the event loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ.

Loading GLTF models may also introduce some delay based on their size, requiring a few milliseconds before they are accessible within the group.

You can experiment with logging on each tick by modifying your tick method as follows:

const tick = () => {
    // Code snippet for raycaster
    window.requestAnimationFrame(tick);
};

In our threejs experience, it proved beneficial to assign the scene to the global window for convenient access in Chrome. Simply insert the following lines after creating the scene:

window.scene = scene

import "./styles.css";
// Additional imports and setup code...
window.scene = scene;

This modification enables you to access the group via the Chrome console once the GLTF models have loaded. With scene now reachable from devtools, simply type 'scene' to access it or use scene.children[0].children[1] to view your group.

Note: This approach is primarily for debugging purposes.

Answer 3

Answer №2

After much trial and error, I managed to find a workaround for the problem at hand. However, the root cause of the issue still eludes me. Interestingly enough, when I included the

console.log(scene.children[1].children[0]);

within the tick function, the output was puzzling:

undefined
mesh
mesh
mesh

The initial iteration resulted in 'undefined', prompting me to devise a simple solution by checking if it's undefined before proceeding. This adjustment led to an error-free execution and all components working as intended:

// Raycaster logic
raycaster.setFromCamera(mouse, camera);
if (
    typeof scene.children[1].children[0] !== "undefined" &&
    typeof scene.children[1].children[1] !== "undefined" &&
    typeof scene.children[1].children[2] !== "undefined" &&
    typeof scene.children[1].children[3] !== "undefined"
) {
    const intersects = raycaster.intersectObjects([
        scene.children[1].children[0],
        scene.children[1].children[1],
        scene.children[1].children[2],
        scene.children[1].children[3],
    ]);
    if (intersects.length) {
        if (!currentIntersect) {
            console.log("mouse enter");
        }
        currentIntersect = intersects[0];
    } else {
        if (currentIntersect) {
            console.log("mouse leave");
        }
        currentIntersect = null;
    }
}

Yet, the lingering question remains: why does it return undefined during the early iterations?

Answer 4

After much trial and error, I managed to find a workaround for the problem at hand. However, the root cause of the issue still eludes me. Interestingly enough, when I included the

console.log(scene.children[1].children[0]);

within the tick function, the output was puzzling:

undefined
mesh
mesh
mesh

The initial iteration resulted in 'undefined', prompting me to devise a simple solution by checking if it's undefined before proceeding. This adjustment led to an error-free execution and all components working as intended:

// Raycaster logic
raycaster.setFromCamera(mouse, camera);
if (
    typeof scene.children[1].children[0] !== "undefined" &&
    typeof scene.children[1].children[1] !== "undefined" &&
    typeof scene.children[1].children[2] !== "undefined" &&
    typeof scene.children[1].children[3] !== "undefined"
) {
    const intersects = raycaster.intersectObjects([
        scene.children[1].children[0],
        scene.children[1].children[1],
        scene.children[1].children[2],
        scene.children[1].children[3],
    ]);
    if (intersects.length) {
        if (!currentIntersect) {
            console.log("mouse enter");
        }
        currentIntersect = intersects[0];
    } else {
        if (currentIntersect) {
            console.log("mouse leave");
        }
        currentIntersect = null;
    }
}

Yet, the lingering question remains: why does it return undefined during the early iterations?

I have a Three.js Group containing five elements, but I am having trouble accessing the meshes within. Is there a way to properly access the meshes within a Three.js group?

Answer №1

Answer №2

Similar questions

Rearranging Arrays in AngularJS: Ensuring a Specific Element Stays at the

Show the present category name within breadcrumbs (utilizing angularJS)

Tips for developing a dynamic game that adjusts to different screen sizes using Phaser 3

Drag and drop a Jquery image onto the div with its top left corner

I need help with customizing the progress bar in HTML and CSS

React - The previous condition is maintained when selected

Adding a collection to an array in JavaScript

Using Jquery to toggle visibility and position of a button when clicked

What could be causing my recursive function to skip over certain parts of my JSON data?

How come JSON.parse is altering the data within nested arrays?

Having trouble with Vuex in Vue JS when trying to set up a modular store

What's the best way to update the value of an angular field upon submission?

AngularJS enables the creation of a checkbox that toggles the visibility of content

jquery activating the toggle function to switch between child elements

Using $nin alongside $and in Mongoose

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

Challenges with Textures in Three.js

Personalizing buttons on a carousel in React-bootstrap

Using Vue.js to bind labels and radio buttons in a form

Adding an external JavaScript file to an HTML document by importing an array