Exploring a child element within a Three.js scene

My goal is to retrieve the child object sole from a scene. While I can successfully access the variable sole inside the loader function using obj, I am struggling to do so from outside the loader function.

To view the functioning code, click here and the JSON model file can be found here.

I have managed to access the object within the loader:


var loader = new THREE.ObjectLoader();  
loader.load("models/shoe4.json", function (obj) {
    scene.add(obj);
    scene.rotation.y = Math.PI / 1;
    scene.position.y = -5;
    scene.position.z = -24;

    var sole = obj.getObjectByName("sole", true);
    sole.position.y = -5;

});

However, my challenge lies in accessing it outside the loader like this:


var loader = new THREE.ObjectLoader();  
loader.load("models/shoe4.json", function (obj) {
    scene.add(obj);
    scene.rotation.y = Math.PI / 1;
    scene.position.y = -5;
    scene.position.z = -24;     
});

var sole = obj.getObjectByName("sole", true);
sole.position.y = -5;

This necessitates creating its own function for future reference.

I attempted:


var sole = scene.getObjectByName("sole", true);
sole.position.y = -5;

But received the error :

Uncaught TypeError: Cannot read property 'getObjectByName' of undefined

How can I effectively access the sole object from any part of the code? A simple declaration like var obj; doesn't seem to work.

Answer №1

To ensure proper functionality, it is important to declare sole outside of the lambda function as shown below:

var sole = null;
var loader = new THREE.ObjectLoader();
loader.load("models/shoe4.json", function (obj) {
    scene.add(obj);
    scene.rotation.y = Math.PI/1;
    scene.position.y = -5;
    scene.position.z = -24;

    sole = obj.getObjectByName("sole", true);
    sole.position.y = -5;

});

// It is crucial to avoid accessing 'sole' before the lambda function execution
sole.position.x = 5;

Furthermore, the program should only access sole after the lambda function has been executed. Understanding asynchronous programming models is essential for this purpose:

https://msdn.microsoft.com/en-us/library/windows/apps/Hh700330.aspx

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

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

Upon transmitting the information to the server, an error message pops up saying 'Uncaught TypeError: Illegal invocation'

I'm encountering an issue with sending an ajax request in my php-script. The jquery script I'm using selects certain fields from a form and sends them as arguments to a jquery function. However, upon sending the data to the server, I receive the ...

Is there a way to determine if a 3D point lies within an oriented cube?

In my current project with THREE.JS, I attempted to utilize THREE.BOX3 methods for detecting points within an oriented box. Unfortunately, it did not work as expected because these methods only handle maximum and minimum values. Are there any alternative ...

Discovering the list of database names and table names in sqliteHere is how you can

I am in the process of developing a SQLite command editor for an Android application using Cordova. Within the app, users will have the ability to create unlimited tables and databases. When they enter the application, they must select a database from a ...

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

Implementing conditional rendering using custom division return functions with onClick attribute on a submit button in React: A step-by-step guide

import React from "react"; class Input extends React.Component { constructor() { super(); this.state = { phone: "", weight: "", height: "", gender: "", smoke: "", lazy: "", bmi: "", pain: "", ...

Adding an image to your email using Nodemailer and Handlebars: a step-by-step guide

Currently, I am facing an issue with attaching an image in the HTML template created by handlebars in my node project while using nodemailer. Despite trying to include the image in the img src tag directly within the HTML, the image does not show up. The i ...

Is there a method in Discord.JS to remove an embed from a message sent by a user?

Currently, I am developing a bot utilizing the Discord.JS API. This bot is designed to stream audio from specific YouTube links using ytdl-core. Whenever a link is typed in, an embed of the YouTube video appears. While there are methods to disable embeds o ...

Vue.js component fails to load $refs

One of my Vue.js components features a modal view with various embedded references. <template> <div> <b-modal ref="modalDialog" > <b-row> <!-- document --> <b-col> &l ...

I need the language chosen using Lingui's Language Switcher (i18n) to persist throughout the app, even after a refresh

I have been experimenting with Lingui for internationalization (i18n) in my app. I followed the documentation and tutorial to create a language switcher, but I am unsure how to set it up so that the selected language persists throughout the app even after ...

The JavaScript function exclusively reveals the final element, which is Three.js

I'm currently working on a fence generator function using Three.js, but for some reason, my function is only returning the last fence created. It's really puzzling to me... function createFence(nb){ var i; var position = -5; var loadingMan ...

conditionally trigger one observable in rxjs before the other

I am in need of assistance or guidance regarding a challenge I am facing with rxjs that I cannot seem to resolve. In essence, my goal is to trigger an observable and complete it before the original one is triggered. Scenario: I am currently working on a ...

Steps to assign the user id where the isDisliked field is not true

I'm struggling to populate the user from the likedBy field where isDisliked is false. Can you please refer to the document schema https://i.sstatic.net/jb8x8.png for more information? Although I've tried using the query below, I can't seem ...

Enhance your Three.js experience with antialiasing, top-notch rendering, and stunning FX

I've been working on a three.js project that involves 3D models, a ground, and a grid. The 3D models are outlined using outlinePass (). With TransformControl (), I can move objects, and OrbitControls () allows me to change the camera position. Howev ...

Ensure that the placeholder text does not contain any null or empty values

I'm currently working with a dust.js template that generates input fields based on data received from the server. The issue I'm facing is that even when the data is empty, an input box with an empty placeholder value still gets rendered. Is there ...

Passing a value back to a template from a promise

Currently, I am implementing server-side validation for dynamically created input fields within div tags. The issue I am facing is that I need to display the API error message in my template instead of directly setting it in my controller. If I set it in t ...

Displaying error messages received from server-side validation in a React application

After sending an axios request to the server for data submission, I receive validation errors if any. See the code snippet below: const storeExpense = async (expenseData) => { const response = await axios.post('/api/expenses/store/', expe ...

next.js does not optimize JSON data files

During the deployment of my application container, I need to substitute a JSON file with a new one. Situation I have developed a next.js application that relies on a particular JSON file for data. Everything works perfectly when the file is imported into ...

Discovering how to identify words separated by spaces within a full-text search query using regex in both PHP and JavaScript

When working with text, I need to detect words that are separated by spaces. For example, if my text is: some parent +kid -control "human right" world I want to only detect some, parent, and world. This means words without any special characters like +, ...

Combining MxGraph with AngularJS 1 for Seamless Integration

I recently attempted to dynamically add mxgraph with the client-side library angularjs, but I couldn't find any relevant documentation on how to do so. Can anyone offer guidance on integrating mxgraph, such as which files need to be included and what ...