Placing a three.js object in an array at a specific position

My goal is to move my object along the x-axis by 1 every time my animate function is called. However, I keep encountering an error that says "cannot read property x of undefined."

To address this issue, I started adding each mesh I create to the sceneObjects array like this:

addToGlScene(mesh, 'player')

By utilizing the addToGlScene function:

function addToGlScene(what, name, glow, storage){
    glScene.add(what)
    what.name = name
    sceneObjects.push(what)
    what.userData.glow = {glow: glow}
    what.userData.storage = {storage: storage}
    sceneObjects[name] = what
}

Despite these efforts, when trying to update the object position in my animate() function using the following method:

sceneObjects['player'].position

I am still getting the same error message.

Even after console logging sceneObjects['player'], it displays a wealth of information:

THREE.MorphAnimMesh {...} // (object details here)

Here is my animate() function:

function animate() {
    // Function contents provided below...
}

What could be causing this issue?

Answer №1

Here's the solution:

playerObjects['sprite'].position.y = newYValue;

The position attribute is part of a Vector2, which allows you to modify the y value.

If playerObjects['sprite'].position returns as undefined during the animation process, then there may be an issue elsewhere.

Answer №2

After some investigation, I finally solved the issue myself :) It turns out that the recurring "undefined" error was caused by my premature call to

console.log(sceneObjects['player'].position)
within the animate function. This function was triggering as soon as the page loaded, before all the models were fully loaded. To fix this, I utilized the Loading Manager in Three.js from their documentation (Loading Manager) to ensure that the animate function only ran after all objects were successfully loaded. Once implemented, everything worked flawlessly!

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

Return to the previous location on the page when clicking the browser's back button

I'm looking to incorporate the following functionality: When on page a, clicking a link takes me to page b and displays all content from the beginning. Pressing the browser back button should then return me to page a and show the content starting fro ...

Is there a way to adjust the path of a lazily loaded Webpack module?

I have a Vue application that utilizes Webpack and dynamic imports: // App.vue <template> <div> <button @click="isBtnClicked = true">Load lazy component</button> <LazyComponent v-if="isBtnClicked" /& ...

Navigate to the correct page when the Button is clicked in a ReactJS/Django project

Embarking on my web development journey, I opted for django/Reactjs to build a social network platform. I created several API methods like account/view_user/ to retrieve a list of users and account/view_user/ for specific user attributes. In React, I cra ...

What is the best way to retrieve SQL results within the parent function's scope in NodeJS?

Currently, I am developing a Brackets text editor extension that stores work time in a database and allows users to view their time entries. The backend is built using Node.js to interact with an SQL server. So far, I have been successful in entering time ...

The error message "Property 'map' is not found on type 'User' in React with typescript"

I am currently experimenting with React using TypeScript. I have set up useState with an object but I am encountering issues trying to use the map function with that object. Below is the error message I am facing: Property 'map' does not exist ...

`I am facing issues with class binding in Vue 3 when using SwiperJS`

Currently, I am working with Vue 3 along with swiperjs. I have encountered a problem related to the v-bind:class behavior in my project. The issue arises when transitioning to the second slide, where the !h-auto class does not get applied as expected. St ...

Ensuring proper execution of the next callback function in an Express get request

I am currently running an express server on nodejs with a specific file structure that I need to convert into a list of links. Included below are my recursive functions for dealing with the file structure. Here are the file structure functions: function ...

Tips for monitoring user preferences across pages

Utilizing JavaScript, I have successfully hidden the site map on every page of the website to ensure accessibility for browsers with disabled JavaScript. By implementing a JQuery toggle function, users can easily reveal the Site Map by clicking on a design ...

Remove an item from a complex JSON structure based on the specified name. The function will then return the

Hey there, I'm just starting out with react native and I have an array of objects. My goal is to remove an inner object from this JSON data. [ { Key: 1, exchnageArr: [ { name: ”FX” }, { name: ”MK” ...

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Firstly, feel free to check out the JSFiddle example My task involves moving an image with the class "Full" after a div with the class "group-of-buttons" using JavaScript. Here is the snippet of HTML code: <img src="http://i.telegraph.co.uk/multimedia ...

Setting up proxy middleware in an express application

My application is structured with a frontend server (React) serving static files and a backend server (Express). I have noticed that custom header requests trigger preflight requests, causing latency in my application. My goal is to eliminate these preflig ...

What is the alternative method for duplicating an array in javascript without resorting to JSON.stringify or JSON.parse?

In this scenario, I have an array labeled as fruit. My goal is to duplicate it into a new array called fruits2, but without maintaining any reference connections between them. The provided example shows how simply assigning the original array to a new var ...

Run a query upon loading the page

I would like to run a query during the onload event. How can I achieve this? Here is my code. This is the specific query that needs to be executed. <?php mysql_query("UPDATE `requests` SET `stat_id`= 3 WHERE `proj_id`='".$_GET['projid&apo ...

What causes the output of Math.pow(a, b) to be NaN when the value of a is negative and b is not a whole number?

After observing different JavaScript behaviors, I noticed the following: > Math.pow(4, 2) 16 > Math.pow(4, 2.1) 18.37917367995256 > Math.pow(4, 0.5) 2 > Math.pow(-4, 2) 16 > Math.pow(-4, 2.1) NaN > Math.pow(-4, 0.5) NaN Why does using a ...

Assigning an argument of type `any` to a parameter of type `Observable<IComboboxItem[]>` can be considered risky

I have a piece of code that retrieves data from the backend server. Here is the code snippet: @Injectable() export class DictionariesDatasourceFacadeService { public invoiceTemplate: IDataSource<IComboboxItem>; public replacedLegalEntity: IData ...

The click events are not functioning correctly when using treex.domevents.js

After days of searching online, I still haven't found a solution to make my three.js object clickable. I thought threex.domevents.js would make it easy, but I'm struggling to implement it in my code ...

Can you explain the distinction between using a mouse to click on an input versus selecting it with the tab key?

I have a unique input field that I'm working with: <div class="btn-group btn-xs" dropdown> <input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New ...

Ways to retrieve the initial key object received through an AJAX request

I have a form with three dynamic dropdowns. The second dropdown depends on the first one, and the third dropdown depends on the second one. Therefore, selecting an option in the first dropdown will automatically populate the next two dropdowns. Below is t ...

Error: When attempting to overwrite res.render, a TypeError occurs because the property 'app' is being read from an undefined source

I am working on a project where I need to modify the behavior of the res.render method in order to consistently include an additional option, regardless of any other options present. However, when attempting to implement this modification, I encounter th ...

Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the ac ...