Exploring the possibilities of Three.JS by manipulating the world position of a child 3D object

I have a child object3D that is part of a group Object3D. While the child object's position is displayed relative to the parent object's space, I am trying to change the location of the child object within the 3D space. To do this, I first need to obtain the child object's position in the world space.

var worldPosition = childObject.matrixWorld.multiplyVector3(new THREE.Vector3);

This gives me a vector representing the child's position in the world space. Next, I want to manually set the position. So I create a new vector with three elements.

var newPosition = new THREE.Vector3();
newPosition.x = 1;
newPosition.y = 2;
newPosition.z = 3;

childObject.matrixWorld.setPosition(newPosition);

The setPosition function sets the last three elements of the object's world matrix to the values of the vector provided as an argument, effectively changing the object's location in the world space. To ensure the matrix updates correctly after these changes, I use the following functions.

childObject.matrixWorldNeedsUpdate = true;
childObject.updateMatrixWorld();

However, upon inspecting the updated world matrix, I noticed that the setPosition function had no effect whatsoever.

Why is this happening? If you need actual code examples, I can provide them. But the above explanation accurately reflects the domain and syntax I am working with.

Answer №1

UPDATE: Answer has been revised.


If you need to adjust the world position of a child object, there are steps you can take.

Assuming there are no transformations already applied in the scene, one technique you could use involves the following approach:

scene.attach( child ); // remove from current parent and add to scene

child.position.set( x, y, z );

parent.attach( child ); // reattach to original parent

By using the Object3D.attach( child ) method, you can successfully relocate the child object while preserving its global transformation.

This solution is applicable for three.js version r.132

Answer №2

Here's a helpful answer that could provide assistance in this situation. The recommended steps include detaching the child from the parent, adjusting its position, and then reattaching it.

Answer №3

When setting the position in an animation loop to move objects, using attach may result in objects shaking.

My preferred solution is:

let newPosition = new THREE.Vector3(1,2,3);
let parentPosition = new THREE.Vector3();
childobject.parent.getWorldPosition(parentPosition);
childobject.position.set(
    newPosition.x-parentPosition.x,
    newPosition.y-parentPosition.y,
    newPosition.z-parentPosition.z
);

If you require both position and rotation, using attach is the only option.

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

Trouble with React Native ListView Item Visibility

I'm currently working on integrating the React Native <ListView /> component with the <List /> and <ListItem /> components from React Native Elements. However, I seem to be facing an issue where the <ListItem /> component is no ...

How to pass a prop from Nuxt.js to a component's inner element

I've created a basic component: <template> <div id="search__index_search-form"> <input :bar-id="barId" @keyup.enter="findBars()" type="text" :value="keyword" @input="updateKeyword" placeholder="Search for a b ...

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

Developing pledges in AngularJS

I am currently working on implementing a promise in Angular using the $q service to retrieve an object from a web service. The unique aspect of this implementation is that if the object is already cached, it should be returned without making a call to the ...

Optimizing jQuery scripts by consolidating them to reduce file size

I've created a jQuery script that performs the same task but triggers on different events, including: Page load Dropdown selection change Clicking the swap button Typing in a text field However, I had to write separate scripts for each of these eve ...

Issue with delayed chaining of class addition and removal in JQuery not functioning as expected

Here is the code snippet: $(document).ready(function () { $('.current-visitors').delay(3000).queue(function () { $(this).addClass('show').delay(1000).queue(function () { $(this).removeClass('sho ...

Is it beneficial to create a separate component for React form elements?

I've come across advice that suggests when unsure, turning an element into a component is a good idea. But what are the actual benefits of converting form elements like <input /> into components? Let's consider the following example: cons ...

Using AngularJS to dynamically assign classes with values derived from an ng-repeat loop

I'm attempting to assign a class to a table row using ng-class based on the value of ng-repeat. I have searched online and found examples that involve calling a function. Is it possible to simply set ng-class with a value instead of using a function? ...

Navigating Google Oauth - Optimal User Sign in Locations on Frontend and Backend Platforms

What are the distinctions between utilizing Google OAuth versus implementing user sign-ins at the frontend of an application, as opposed to handling them on the backend? For instance, managing user authentication in React to obtain the ID and auth object ...

TinyMCE generates HTML code with embedded tags

Hey there, I'm currently facing an issue with TinyMCE that I just can't seem to solve. I've browsed through some related posts but haven't found a solution that works for me... For example: When I input something in my back office, ...

Fade out the notification div when the user clicks anywhere outside of it

I am currently working on a website with a notification feature. When the user clicks on the notification button, a notification box will appear at the bottom of the button. I would like the behavior of this notification to be similar to Facebook's - ...

Creating lifelike images with accurate reflections and shadows (photorealism) through the utilization of WebGL and the three

I have been attempting to display a scene that was originally created in 3ds Max. I exported all the objects as obj files and utilized the three.js libraries to showcase the scene on a web browser. However, the Cubecamera method for reflections did not yie ...

What are the mechanics behind the functionality of ES6 class instance variables?

I'm encountering an issue with the following code that is not behaving as expected: import React, { Component } from 'react'; let result = null; class MyData extends Component { _getData = () => { fetch(url) .then(response = ...

Ways to trigger an onClick event of one div based on the presence of another div

I'm looking to execute a function when a specific type of button is clicked on my HTML page. I have approximately 10 buttons on the page and I've written the following code to call a function when a button is clicked: $('.divname').ea ...

A method for categorizing every tier of JSON data based on a shared attribute

I am encountering issues with my project as I attempt to construct a tree using JSON data. Here is an example of what I have: var treeData = [ { "name": "Root Node", "parent": "null", "children": [ ...

Enhance the sequence of tweens by triggering them sequentially in response to rapid UI events

I am currently working on my three.js app setup and I am facing a challenge with creating a smooth transition between two models. The desired effect is to have the first model quickly scale down to zero, followed by the second model scaling up from zero t ...

a single function spread across two controllers[JavaScript]

My query pertains to a JavaScript program with 2 controllers. The issue I am facing is the need for one function in both controllers (data.duration). This function serves two purposes, once for features themselves and once for the summary. Currently, this ...

Utilizing Jquery.validate() for personalized checkbox validation

My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having ...

Express.js and gridfs-stream are unable to retrieve the error

Imagine an effortless image download server where Express.js takes the request, fetches an image from MongoDB GridFS, and serves it as a response. Everything works fine when the request is valid and the file exists. The issue arises when it fails to catc ...

The logout confirmation message functionality in Laravel 8 is malfunctioning

In my Laravel project, I am attempting to implement a logout confirmation message that will pop up when a user clicks on the logout button. Here is the code I have added to my navbar.blade.php: <a class="dropdown-item" id="logout" hr ...