Using this.el.object3D.position.set(0,0,0) may not function correctly unless a breakpoint is placed in the debugger beforehand

I am trying to attach a door element to the Vive controller's blue box element.

Once the door is appended, I attempt to set its position to '0 0 0' using the code "this.el.object3D.position.set(0,0,0)" in order to connect it to the blue box.

However, this does not work unless a breakpoint is set in the browser debugger.

When I add a breakpoint and step through the code, the desired result is achieved.

If you are interested, here is the code along with a demo on Glitch:

Does anyone have an idea why this issue occurs?

Thank you for any assistance.

https://i.sstatic.net/s4XTG.jpg https://i.sstatic.net/xB1dS.jpg

javascriptthree.jsaframe

Answer №1

It appears that the child element may not have finished being appended before attempting to change its position.

You can verify this by setting up a timer that executes after the append() function and then adjusts the position accordingly.

To handle this more efficiently, you can utilize a MutationObserver, which triggers an event when a child is added. This allows for seamless modifications:

var viveController, door
// Observer config -> specify what actions trigger the observer
var observerOptions = {    
  childList: true,
}
// create the observer with a callback function
// no need to distinguish events, simply update the door position
var observer = new MutationObserver((e)=>{
     door.setAttribute("position", "0, 0, 0")
});

observer.observe(viveController, observerOptions);
viveController.appendChild(door)

Check out the functionality in action here.

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

My function seems to be functioning perfectly fine in Angular and Express, but for some reason, it's not working in Parse Cloud Code. What could

I am facing an issue with my code where it seems to be stuck. After testing it in both Angular and Express, I realized that the code is only progressing up to a certain point due to the requirement of the Master Key to edit the User table with new data. ...

javascriptparse-platformparse-cloud-code

gulp-eslint struggles with interpreting optional chaining syntax

I'm attempting to use optional chaining syntax in my JavaScript code like this: let foo = bar?.property; When I run eslint directly on my JS files, it works without any issues. However, when I run gulp-eslint with the same configuration, I encounte ...

javascriptgulpeslintgulp-eslint

obtaining pictures from information obtained in vuejs

Trying to showcase images in my code that are already stored in my data like this: <div > <tr v-for='(ships,index) in destroyedShipBox' :key='index'> <td>{{ships}}</td> ...

javascriptvue.js

No user was located using Mongoose.findOne()

Utilizing fetch() to make a call to a URL looks like this: const context = useContext(AuthContext); const navigate = useNavigate(); const handleSubmit = (event) => { event.preventDefault(); const dat ...

javascriptnode.jsreactjsmongodbexpress

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

javascriptjquerycodeigniter

Why is the size of my array shrinking with every iteration of the for-loop in JavaScript?

I am struggling to change the classname of three elements that share the same classname. Unfortunately, as I loop through my array, it seems to decrease in size with each iteration, preventing me from successfully changing all three elements. Any advice or ...

javascripthtmlarrays

Generating shadows with Three.js using noise techniques

After importing a custom mesh and enabling both shadow casting and receiving, I noticed some lighting noise appearing. The same issue occurs with a simple mesh when multiple light sources are present. Could this be related to my computer, browser, or code ...

three.jsshadownoise

Attempting to display a randomly selected element from an array upon clicking a button, utilizing axios and a local JSON file. Is there something crucial that I am overlooking?

I have figured out how to display the entire array in a random order but I am struggling to render just one element of the array. Another issue I am facing is showing the complete JSON object instead of only the quote text. Below is the HTML code: <te ...

javascriptjsonvue.jsaxiosnuxt.js

Encountering 'Illegal Invocation' error while running a basic script

Exploring the Speech Recognition API has been on my to-do list, so I decided to create a simple page that initiates recognition when clicking on the body element. Here is a snippet from my scripts.js file: var recognition = new window.webkitSpeechRecognit ...

javascript

Mocking a named class-export in TypeScript using Jest

I have a node module that exports several classes, including one called Client, which I utilize to create clients with various APIs as methods. I'm currently attempting to test my module, which has a dependency on this node module, using Jest. Howeve ...

javascriptnode.jstypescriptunit-testingjestjs

Identifying Changes in ReactJS Pages

As I delve into learning ReactJS, I have been experimenting with various websites that utilize this technology. Presently, my focus is on making an AJAX call to an API based on the URL of a page. The issue arises when clicking a link breaks my code due t ...

javascriptajaxreactjs

The issue of Dynamoose/DynamoDB converting empty arrays to null during updates

Utilizing the Node.js package Dynamoose to manage DynamoDB requests within my web application has been a challenge. An issue arises when attempting to update an item that contains an empty array in the JSON object. It seems that Dynamoose is setting this ...

javascriptarraysnode.jsamazon-web-servicesamazon-dynamodb

issue retrieving data from live website created with next.js

Hello, I've exhausted all possible avenues to identify the cause of the error occurring on my live website built with NEXTJS. I have observed that this error only occurs when I reload the website. It's worth noting that I can successfully login ...

javascriptreactjsmongodbnext.jsnext-auth

Decoding the information received from Socket.IO within the Flash client

When utilizing server node.js and module Socket.IO, data transmission is handled as shown below: var tests = [555, 777]; client.send("Test string"); //first message client.send({tests:tests}); //second message If the data sent is a text string (fi ...

javascriptnode.jsactionscript-3websocketsocket.io

Guide to linking NodeJs with an Atlas mongodb Cluster

I am currently in the process of setting up a new application that utilizes an Atlas Database with node. Unfortunately, I keep encountering an error message that reads: "MongoError: MongoClient must be connected before calling MongoClient.prototype.db". ...

javascriptnode.jsmongodb

Conflict in Vue.js between using the v-html directive and a function

Below is the component template for a notification: <template> <div> <li class="g-line-height-1_2"> <router-link :to="linkFromNotification(item)" @click.native="readNotification(item)" v-html="item. ...

javascriptvue.jsmomentjsvue-componentdirective

I'm having trouble getting NextJS dynamic routes to function properly on my local server

src/app/user/[username].js [username].js content: import { useRouter } from 'next/router' export default function User() { const router = useRouter() return ( <p> {router.query.username} </p> ); } Upon visiting ...

javascriptreactjsnext.js

Steps to dynamically modify an HTML element within an Android WebView

https://www.bing.com/search?q=кму here I want to switch the bing icon to google I attempted : if (url == "https://www.bing.com/search?q=") { view.evaluateJavascript( ("\n"+ "wind ...

javascriptandroidkotlinwebview

Execute a PHP function through an AJAX request to dynamically update a template variable in PHPBB

Should you require a condensed version of the details provided below, do not hesitate to ask for a summary. My objective is to execute a function in my PHP file which will update a template variable. Here is an example of such a function: function get_ve ...

javascriptphpjqueryajaxphpbb3

I am not getting any reply in Postman - I have sent a patch request but there is no response showing up in the Postman console

const updateProductInfo = async (req, res) => { const productId = req.params.productId; try { const updatedProduct = await Product.findOneAndUpdate({ _id: productId }, { $set: req.body }); console.log("Product updat ...

javascriptmongodbexpress