Ways to implement a worldwide change in a subordinate entity

I am facing a challenge where I need to apply a global position, obtained from a WebVR controller, to a child object that is nested within multiple parent objects with transformations. The child object I want to update does not have any transformations applied directly to it:

Scene
¦
¦
Object (with transformations)
¦
¦
Object (no transformations)
¦
¦
Child (cube) (The target for applying the global position)

When I apply the global position to a cube that is a direct child of the scene, everything works correctly:

cube.position.copy(globalPosition);

However, my requirement is to apply this position to the child object. I attempted to convert the global position to a local one using the following code:

const worldToLocal = new THREE.Matrix4().getInverse(cube.parent.matrixWorld);
cube.position.copy(globalPosition);
cube.applyMatrix(worldToLocal);

Unfortunately, after applying these transformation, the cube no longer sits in the same position as it would if it were a child of the scene directly. I'm unsure how to address this issue and would greatly appreciate any guidance provided. Thank you!

javascriptthree.js

Answer №1

Greetings to all! I recommend reorganizing your meshes. To alter the position of a group within the world, apply the position to the parent object and use the transform on child objects. When grouping, consider using an empty mesh and the method parentMesh.add(childMesh). Hopefully, this advice proves useful ;)

Answer №2

After encountering a persistent issue some time ago, I found a workaround by adjusting the grouping of elements and making cube a direct child of scene. However, this led to unexpected behavior from previous parents of cube, causing them to rotate strangely and not respond to position or rotation changes. It became clear that a proper fix was necessary.

Following suggestions from @WestLangley, I implemented a solution involving transformation of rotation using matrices:

const worldToLocal = new THREE.Matrix4().getInverse(cube.parent.matrixWorld);
const poseMatrix = new THREE.Matrix4();
poseMatrix.makeRotationFromQuaternion(globalQuaternion);
poseMatrix.setPosition(globalPosition);
poseMatrix.multiplyMatrices(worldToLocal, poseMatrix);
poseMatrix.decompose(cube.position, cube.quaternion, {});

I appreciate the assistance from everyone involved in resolving this issue!

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

What is the best way to filter two tables using only one search bar?

In my Vue2 application, I have implemented a pair of data tables on one of the pages. Each table is placed behind a tab, allowing users to choose which one they want to view. The search bar, however, is not confined within a tab as I wanted to avoid duplic ...

javascriptvue.jsvuejs2

The initial dropdown menu in PHP coupled with Javascript fails to retain my chosen option

As a novice PHP programmer, I successfully created a double drop-down list from a MySQL database. The idea is to choose a claims hub in the first box and then select an attorney associated with that specific hub in the second box. However, I am facing an ...

phpjavascriptmysql

Assign a value to the active textbox using JavaScript

Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...

javascripthtmltextinput

What is the best way to stop a series of Ajax promises from continuing?

Managing multiple ajax requests that are dependent on each other can be tricky, especially when you need to stop the chain if one of the requests returns false. Check out this sample code snippet below: // Implementing a promise chain return this.getBan ...

javascriptajaxember.jspromise

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

The issue with jquery slideToggle is that it mistakenly opens all divs instead of just the specific div that should

My website has a dynamic page with a variable number of <div> elements. The concept is that users can click on the + symbol, which is represented by an <img> tag, to display the corresponding div. Currently, my code includes: PHP/HTML $plus ...

javascriptphpjqueryhtml

Attempting to sort through elements in JavaScript

I'm looking to filter specific films based on choices made in the dropdown menus below. <select id="filmDropdown"> <option value="0">All Films</option> <option value="1">Film 1</option> <option ...

javascripthtmlfor-loopif-statementdropdown

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

javascriptreactjsnext.js

React Sortable JS is causing the bootstrap grid style to disappear

As I work on developing a straightforward React application, my goal is to integrate React Sortable Js into my Bootstrap grid layout. However, when I enclose within <ReactSortable>, the grid layout no longer displays two boxes side by side in two ro ...

javascriptreactjsreact-sortablejs

Issue with loading controllers in route files [Node.js]

I've encountered an issue while trying to include a user controller into my routes for a node js app. Everything was working fine until suddenly it started throwing an error message. I've thoroughly checked the code for any potential issues but s ...

javascriptnode.jsexpressroutesrequest

The system encountered an issue: "Property 'add' is not defined and cannot be read."

I'm facing a dilemma with my exercise. Despite the numerous inquiries regarding this problem, I haven't been able to find a solution. I am hopeful that you can provide some assistance! Below is the code snippet in question: let myDivs = docume ...

javascriptarraysclassrandomsetinterval

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

javascriptjquery.nettypescriptkendo-ui

Toggle the row to expand or collapse upon clicking it

After extensive research, I have been unable to get the row expansion and collapse feature to work in my script. Here is my current script: <thead> <tr> <th width="5" class="cb"><input type="checkbox" id="cbcall" /& ...

javascriptjquery

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

Transfer the parameter from ajax function to the aspx.cs file

I've written some code using HTML, JS, and AJAX, but it's not functioning as expected. <script type="text/javascript"> function DeleteSelectedRecord(id) { alert(id); $.ajax({ type: "POST", ...

javascriptc#jqueryasp.netajax

Is there a way to make $animate.removeClass function within a directive without needing to use $eval

I have developed a custom directive that smoothly fades out and fades in the content whenever there is a change in the model. app.controller('myCtrl', function($scope, $interval) { $scope.number = 0; $interval(function() { $scope.number+ ...

javascriptangularjsangularjs-directiveng-animate

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...

javascripthtmlajaxmodel-view-controller

Interactive ajax and php dropdown menu

Hey there, I'm running into a small snag with my dynamic select feature, as mentioned in the title. I am aiming to achieve the following outcome: When a user selects an instrument from the first dropdown menu, the second dropdown menu labeled "Besetzu ...

javascriptphpjqueryhtmlajax

Is there a way to configure multiple entry points in a package.json file?

I am looking to execute various commands using npm: "scripts": { "v1": "node v1.js", "v2": "node v2.js" } I would like to use npm start v1 or npm start v2 for this purpose, however, these commands do not seem to trigger the intended Node command. ...

javascriptnode.jsnpmpackage.json

Displaying child properties in a functional ReactJS component

React version 0.14 introduces the concept of pure functional components, ensuring that the same input always results in the same output. Props are passed as function arguments. // Using ES6 arrow functions with implicit return: const PureComponent = ({url ...

javascriptreactjs