Using Three.js to transfer one object's rotation to another object

I have been attempting to transfer one object's rotation to another with no success using the following methods:

//The first method rotates much faster than the original object's rotation
boxme1.rotateOnAxis(new t.Vector3(0,1,0), cube.rotation.y);

//In this method, the vector and quaternion are meant to determine the direction the
//object is facing. However, when applying the vector to a Euler for rotation, 
//the object disappears from the scene. I'm unsure if this is the correct way to use an Euler.
var vector  = new t.Vector3(0,0,-1);
vector.applyQuaternion(cube.quaternion);
var euler = new t.Euler(vector.x, vector.y, vector.z);
boxme1.rotateOnAxis(new t.Vector3(0,1,0),euler);

//When setting the object rotation with the above Euler instead of using rotateOnAxis,
//the object does not move at all.
boxme1.rotation = euler;

What is the proper way to apply the rotation of one object to another? The issue seems unrelated to the cube rotation as it is functioning correctly. At the moment, I am still learning Three.js so any guidance would be appreciated.

Thank you in advance

Answer №1

boxme1.quaternion = cube.quaternion 

The code above won't function correctly due to how Javascript handles pointers. When cube's quaternion is assigned to boxme1, any changes made to boxme1 will also affect cube, and vice versa - which is not desired. To resolve this issue, consider one of the following solutions:

Optimal Solution:

boxme1.quaternion.copy(cube.quaternion);

Alternatively:

boxme1.quaterion = cube.quaterion.clone();

While your current solution may work, it could be more memory and CPU efficient to implement the alternatives mentioned above.

Answer №2

After some experimentation, I finally discovered the solution

//To begin with, we establish a matrix and insert the cube's rotation into it
rotObjectMatrix = new THREE.Matrix4();
rotObjectMatrix.makeRotationFromQuaternion(cube.quaternion);
//Then, we simply apply a rotation to the quaternion by utilizing the created matrix
boxme1.quaternion.setFromRotationMatrix(rotObjectMatrix);

However, I remain puzzled as to why setting boxme1.quaternion equal to cube.quaternion did not yield the desired outcome.

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 jquery/ajax form submission functionality

I followed a jQuery code for form submission that I found on various tutorial websites, but unfortunately, the ajax functionality doesn't seem to be working. When I try to submit the form, nothing happens at all. I've tried troubleshooting in eve ...

Tips for retrieving all Object3D's from a Canvas in React Fiber using three.js

Working on my first App using react-three-fiber, I am currently setting up the Viewport in this manner: const Viewport = (props) => { return ( <Canvas onCreated={({ gl, raycaster }) => { gl.setClearColor("darkgrey"); ...

Angular 2 click event with changing function name

Even though this question seems simplistic, I'm having trouble figuring it out. As someone new to Angular 2, I've tried various combinations of {}, [], and () brackets to make the following work: <button (click)="this.action">Click me</ ...

Using React Native to integrate a JSON string into a button

I'm currently working on an app to explore the functionality of websockets in react native. I have successfully retrieved data from the websocket in JSON format and can output it to the console using console.log. However, my goal is to display a speci ...

Prevent selection of rows in the initial column of DataTables

I am working on a basic datable, the code can be found here JS: var dataSet = [ ["data/rennes/", "Rennes", "rennes.map"], ["data/nantes/", "Nantes", "nantes.map"], ["data/tours/", "Tours", "tours.map"], ["data/bordeaux/", "Bordeaux", ...

Dynamically load current components in Angular 2's final release

In my quest to dynamically load a component in the upcoming release version 2.0.0, I encountered some challenges. Previously, in RC5, I utilized the following code for loading: I created a directive responsible for loading the controls: import { Check ...

How to change a CSS 'left' property using Jquery or Javascript

Upon examining my DOM, I found the following element: <div id="itemEditor" class="quoteItemEditorView partType_MATERIAL editMode selectorEnabled" style="left: -1px; right: 0px; width: auto; min-width: 480px; display: block;" > I have b ...

Is it possible to programmatically open the Firefox browser console using JavaScript within an extension?

I attempted to link toJavaScriptConsole() with a button, however it is not functioning (undefined reference error) Is there a way to code an XUL button that will launch the firefox browser console, allowing us to view logs from the extension? ...

Having trouble with implementing a 64-bit bitwise AND operation in JavaScript?

I've been attempting to perform a bitwise AND operation on long numbers using Javascript. Despite trying the solutions provided at (How to do bitwise AND in javascript on variables that are longer than 32 bit?), none of them have been accurate for the ...

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...

"NODEJS: Exploring the Concept of Key-Value Pairs in Object

I am facing a challenge with accessing nested key/value pairs in an object received through a webhook. The object in req.body looks like this: {"appId":"7HPEPVBTZGDCP","merchants":{"6RDH804A896K1":[{"objectId&qu ...

There seems to be a compatibility issue between AngularJS and HTML

Here is a simple AngularJS code snippet I have written: var app=angular.module("myApp",[]); app.controller("MyController",['$scope',function($scope){ $scope.name="Asim"; $scope.f1=function(){ console.log("i am clicked"); $scope.vr="lol"; } co ...

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

Require assistance in accurately assigning a date to a Date[] in Typescript Array without altering current elements

In my current code, I have a loop that verifies if a date is a holiday and then adds it to an array. The issue I'm facing is that whenever I assign a new element to the array, all previous data in the list gets updated to the latest element. Here&apos ...

One of the quirks of Angularjs is that the ng-enter animation will only be

The initial animation only occurs the first time. I am utilizing Angularjs version 1.2.22 Here is the CSS that I am using : .ng-enter { animation: bounceInUp 2s; } .ng-leave { animation: bounceOutUp 2s; } And this is the route configuration : ...

Namespace remains ambiguous following compilation

I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors. The problem arises in my main entry file (main.ts) with these ini ...

The process of transferring information from a JSON API to TypeScript models

When working with my JSON API in my services, I need to pass the data to my models. What is the most efficient way to accomplish this task? Currently, I am following this process: import { Attachment } from '.'; export class Contact { id: nu ...

Error message: "Link binding error in knockout collection"

In this example, you'll find my Knockout ViewModel. $(document).ready( function () { var Incident = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIn ...

Tips for adding a "Select All" feature to a dropdown list?

Currently, I have a dropdown list with a filter for IN and OUT values. The functionality is working as expected: <select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeT ...

Sending a file through an Ajax POST request to a PHP server

I am attempting to upload the HTML input file to my PHP file using a different method than the traditional synchronous HTML forms. The problem I am encountering is that it seems like I am not correctly POST'ing the input file to my PHP file because t ...