Copying the position and rotation of a mesh from one world to another in ThreeJS

In my setup, I currently have 3 meshes named cube(a), tempSphere(b), and m_mesh(c). Mesh a and b are grouped together with a as the parent mesh.

I have managed to update the location, rotation, and position of the group, so that meshes a and b automatically adjust themselves. Now, I am facing an issue where I want to set c to the current position and rotation of b. Below is my attempt which is not working as expected:

const cube: Mesh = this.createCube(size, objectColor);
group.add(cube);
const homePos: THREE.Vector3 = this.getHomePosition(size, homePosition);
const tempSphere = this.createHomePosition(cube, homePosition);
group.add(tempSphere);

// Set the local position of the group
group.position.x = meshPosition.x;
group.position.y = meshPosition.y;
group.position.z = meshPosition.z;
// Set the local rotation of the group
const rad = rotationZ * Math.PI / 180;
group.rotation.z = rad;

// Try to update the world matrix of the group and tempSphere
group.updateMatrixWorld(true);
tempSphere.updateMatrix();
tempSphere.updateMatrixWorld(true);
tempSphere.updateWorldMatrix(true, true);
    
// Retrieve the world matrix of tempSphere
let worldRotQuat: THREE.Quaternion;
let worldPos: THREE.Vector3;
tempSphere.getWorldQuaternion(worldRotQuat);
tempSphere.getWorldPosition(worldPos);

// Set the world matrix of tempSphere to another external mesh
if (this.transScaleTool.m_mesh !== null) {
  this.transScaleTool.m_mesh.matrixWorld.setRotationFromQuaternion(worldRotQuat);
  this.transScaleTool.m_mesh.matrixWorld.setPosition(worldPos);
}

Answer №1

The recommended code pattern, assuming that c does not have a rotated parent, is as follows:

b.getWorldQuaternion( c.quaternion );

By using Object3D.getWorldQuaternion(), the world matrix of object b will be automatically updated, eliminating the need for manual update calls.

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

Is it possible to drive without nest.js?

I currently have a node-ts-express-setup that does not utilize nest.js. Unfortunately, the documentation and examples for drivine do not provide setup instructions without nest.js. Is there a way to use drivine without having to include nest as a dependen ...

What is the best way to change an existing boolean value in Prisma using MongoDB?

Exploring prisma with mongoDb for the first time and faced a challenge. I need to update a boolean value in a collection but struggling to find the right query to switch it between true and false... :( const updateUser = await prisma.user.update({ where: ...

Mastering the art of typing a member of an abstract generic class in Typescript with consideration for potential additional implementations

It's quite challenging to put into words, but essentially I aim to create a base abstract class outlining an abstract interface that must vary based on whether a derived class implements a specific interface or not. Here is a TypeScript playground de ...

Utilizing React Native Camera Kit allows for the seamless and continuous scanning of QR codes, offering multiple callbacks when a code is

Attempting to integrate a QR code scanner into my project using react native. Utilizing the plugin react-native-camera-kit, which supports both QR and Bar code scanning. However, I am facing an issue where the scanner continuously scans the code and trig ...

Creating TypeScript definition file bundle using webpack

Currently, my method involves using "gulp" to generate the definition file for my bundle in the following way: dtsGenerator.default({ name: 'ngFramework', project: './', out: './Typings/raw/index.d.ts' }); Howeve ...

WebStorm is not auto-completing the Emotion Styled Components

While using @emotion/styled in WebStorm, I have noticed that there is no Intellisense for autocomplete within my style object. However, Typescript does seem to be checking to some extent: const StepTimer = styled.button({ borderRadius: 50, height: &ap ...

Issue: TypeScript does not allow assigning a boolean type to either true or false when using two interfaces

When utilizing code similar to the one below, one would assume that TypeScript could infer that badObj is a valid argument for fn, as it should have the type Bad. Interestingly, within the body of fn there seems to be no issue. However, when calling fn(ba ...

The launch.json configuration in vscode does not support the use of the property args

I'm currently editing my launch.json file in vscode to make some basic configurations, but I keep encountering an error that says Property args is not allowed. Here is the configuration I have: { "version": "0.2.0", "configurations": [ ...

What is the process of destructuring an array containing objects?

Examining this JSON structure: { "Person": { "UID": 78, "Name": "Brampage", "Surname": "Foo" }, "Notes": [ { "UID": 78, "DateTime": "2017-03-15T15:43:04.4072317", "Person": { ...

Flickering effects in THREE.js using Frame Buffer Objects

I've encountered a strange flickering issue while working on a THREE.js scene that involves using a Frame Buffer Object. The flickering disappears when I comment out the line: mesh.material.uniforms.fboData.value = renderTargetA.texture. THREE.FBO ...

Error: The type 'Promise' cannot be assigned to the type 'Model' in Angular 2 when working with Firebase

I have a method in my bug service that retrieves a single record from Firebase based on the bugId provided: // This method is located in bugservice.ts getBug(bugId: string): Promise<Bug> { return this.bugsDbRef .child(bugId) ...

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

Experiencing an abundance of issues with html-webpack-plugin while incorporating TypeScript

I am working on a project that involves using Webpack and TypeScript. However, when attempting to run the development server, I encountered numerous errors related to the html-webpack-plugin. This is a snippet of the output: > [email protected] dev ...

What is the process of inserting a sparkline chart into a Kendo Angular grid?

I am attempting to display a bullet chart in the first column of my grid. <kendo-grid-column> <ng-template kendoChartSeriesTooltipTemplate let-value="value"> <div> <kendo-sparkline [data]="bulletData" type="bullet" [ ...

fp-ts/typescript steer clear of chaining multiple pipes

Is there a more concise way to handle nested pipes in fp-ts when working with TypeScript? Perhaps using some form of syntactic sugar like Do notation? I'm trying to avoid this kind of nested pipe structure: pipe( userId, O.fold( () => set ...

The data structure of '(string | undefined)[]' cannot be matched with type '[string | undefined]'

I've been working on a TypeScript project and I've encountered the ts(2322) error as my current challenge. Here's a snippet of my code: import { BASE_URL, AIRTABLE_BASE_ID, AIRTABLE_TABLE_STUDENT, AIRTABLE_TABLE_CLASSES, API_KEY, ...

Property of a general object

I am working with an Interface export interface ChartDataResponseI { consumption: string generation: string measure_name: string point_delivery_number: string self_coverage: string time: string } My goal is to create a generic object property ...

rotation of a Object3D in three.js

I am a beginner in using three.js and have encountered an issue with rotating a camera object. The rotation property has x, y, z values which I am curious about. I understand that the x, y, z values represent the radians of Object Euler angles, but accor ...

Exploring the world of TypeScript interfaces and their uses with dynamic keys

I am hopeful that this can be achieved. The requirement is quite simple - I have 2 different types. type Numbers: Number[]; type Name: string; Let's assume they are representing data retrieved from somewhere: // the first provider sends data in th ...

Engaging three-dimensional design inspired by JavaScript frameworks

I'm interested in developing an interactive 3D application using JavaScript. I'm curious to know if either babylon.js or three.js have support for interactivity. I've searched for information on this but haven't found much, and the docu ...