Is it possible for an object in three.js to be both rotated and moved simultaneously?

Hello, thank you for your time. I'm trying to simultaneously move and rotate an object, but it seems to be behaving erratically. I've read that rotation can change the axis in some way. Is this true? Below is the code where I attempted to rotate using both a world axis and an object axis, but encountered the same issue.

   var rotObjectMatrix;
   function rotateAroundObjectAxis(object, axis, radians) {
      rotObjectMatrix = new THREE.Matrix4();
      rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

      object.matrix.multiply(rotObjectMatrix);

      object.rotation.setFromRotationMatrix(object.matrix);
  }


var rotWorldMatrix;
     // Rotate an object around an arbitrary axis in world space       
    function rotateAroundWorldAxis(object, axis, radians) {
       rotWorldMatrix = new THREE.Matrix4();
       rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
       rotWorldMatrix.multiply(object.matrix);               

       object.matrix = rotWorldMatrix;

       object.rotation.setFromRotationMatrix(object.matrix);
  }

          function spriteAI2() {
            //var ranTen = Math.floor((Math.random()*7)+2);
            var xAxis = new THREE.Vector3(1,0,0);
            var yAxis = new THREE.Vector3(0,1,0);
            var zAxis = new THREE.Vector3(0,0,1);
            rotateAroundObjectAxis(meshSprite, zAxis, Math.PI / 180);
            if (meshSprite.position.x > 30 && meshSprite.position.x <= 450) { 
            meshSprite.translateX( -6 );
            } else if (meshSprite.position.y > 30 && meshSprite.position.y <= 250) {
            meshSprite.translateY( -6);
            } else if (meshSprite.position.z > 30 && meshSprite.position.z <= 350) {
            meshSprite.translateZ( -6 );
            } else if (meshSprite.position.x < -30 && meshSprite.position.x >= -450) {
            meshSprite.translateX( 6 );
            } else if (meshSprite.position.y < -30 && meshSprite.position.y >= -250) {
            meshSprite.translateY( 6 );
            } else if (meshSprite.position.z < -30 && meshSprite.position.z >= -350) {
            meshSprite.translateZ( 6 );
            } else if (meshSprite.position.x < 31 && meshSprite.position.y < 31 && meshSprite.position.z < 31 && meshSprite.position.x > -31 && meshSprite.position.y > -31 && meshSprite.position.z > -31) { 
            var locX = Math.floor((Math.random()*450)+1);
            locX *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            var locY = Math.floor((Math.random()*250)+1);
            locY *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            var locZ = Math.floor((Math.random()*350)+1);
            locZ *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
            scene.remove(meshSprite);
            //texture.dispose();
            c2ImgMaterial.dispose();
            meshSprite.position.set( locX, locY, locZ );
            scene.add( meshSprite );
            //c2Sprite.clone;
            }
        }   

Answer №1

Upon investigation, I have pinpointed the root of my issue. It appears that in three.js, objects have the capability to be relocated either locally or globally. In my particular case, I had been utilizing the local approach.

            meshSprite.translateX(-6); // Local

            var delta = clock.getDelta(); // Global
            var moveDistance = 125 * delta; // Moving at a rate of 200 pixels per second
            meshSprite.position.x += moveDistance;

Upon switching to the global method of movement, any conflicts during rotation were successfully resolved. For a more thorough explanation, please visit the following URL:

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 make a recursive function display every return value in Javascript?

I need help with a function I have been working on. function main() { //retrieve the start text var start_text = document.getElementById("start_text").value; //retrieve target text var target_text = document.getElementById("target_text"). ...

Having trouble showing my Google map using canvas

Can anyone help me with this issue that I'm facing? I am working on a JavaScript web page and trying to show a Google map (Google API) along with a canvas tag in the html body. Currently, the map and canvas are only displaying separately. https://i ...

Retrieve SQL data and store it in a JavaScript variable

Need assistance with fetching data from SQL and storing it in a JavaScript variable. I have already connected PHPMyAdmin to my website. I am attempting to retrieve two variables (date) from my SQL table. JAVASCRIPT: var countdown_48 = new Date; countdow ...

Behind every radio button lies a vertical line

Among a set of 7 radio buttons, I am looking to highlight the one in the center (id=q1val6) with a short vertical line running behind it to signify the zero point on a likert scale. <form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method= ...

What is the process for accessing a website using Java programming language?

Currently, I have a jar file up for sale that requires users to sign up on a particular website in order to download it. My issue lies in wanting to verify if purchasers have a valid login for the site when they run the jar file. Despite my attempts with h ...

Are you facing issues with Handlebars parsing?

I am struggling to identify the issue in my HTML/JS code. Here is my HTML/JS: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="handlebars-v1.1.2.js"> ...

What is the process for "unleashing" the X Axis following the execution of chart.zoom()?

After setting the scroll strategy to setScrollStrategy(AxisScrollStrategies.progressive), I noticed that my chart was scrolling too quickly due to the fast incoming data. To address this, I decided to set a specific initial zoom level for the chart using c ...

The JQuery datepicker fails to provide the date in the format mm/dd/yy

Recently, I attempted to transform a date into the dd/mm/yy format using JQuery datepicker. Unfortunately, my results displayed in the dd/mm/yyyy format instead. Here is the code snippet that I utilized: chkIn = $.datepicker.formatDate("dd/mm/yy", cinDate ...

Combining router.get and https.get in Node.js: A step-by-step guide

Looking for a more efficient method to retrieve information from an http request and send it to the frontend using the path '/get'. Currently, I have combined two functions that seem to work but may not be the most optimal: const router = express ...

Node does not recognize the $or operator

Currently, I am enrolled in an online course and facing a problem with a query issue. Interestingly, the query functions perfectly fine in the shell, however, when executing the js file, an error arises stating: unknown operator: $or. Here is the crucial c ...

Executing NestJS code after applying a pipe but before reaching the method handler

Is it possible to insert additional code after all the pipes have transformed but before the method handler is called? https://i.sstatic.net/IjQvv.png ...

Error in Typescript index: iterating over properties of a typed object

My scenario involves an interface that extends multiple other interfaces from an external library: interface LabeledProps extends TextProps, ComponentProps { id: string; count: number; ... } In a different section of the codebase, there is an ...

"Unveiling the gritty surface feel upon loading an OBJ file in three.js

We are encountering challenges with loading models in three.js Our team is utilizing OBJLoader2 due to its ability to smooth meshes effectively, however, the textures are appearing much rougher than anticipated. There are also some abnormal issues with n ...

Can we programmatically switch to a different mat-tab that is currently active?

Looking to programmatically change the selected mat-tab in a TypeScript file. I came across a solution for md-tab, but I need it for mat-tab. I attempted the suggested solution without success. Here's what I tried: HTML <button class="btn btn- ...

Add small pieces of content to CKEditor

Is there a way to add "atomic" block content into CKEditor? For instance, I would like to add <h1>Test</h1> right after the letter "B" in the sentence <p>A B C</p>. Currently, when using CKEDITOR.currentInstance.insertHtml('&l ...

Utilizing setColumns() function within Google Charts for JSON data tables

Is there a feature in the Google Charts API that functions similar to setColumns() for working with JSON data? I'm aiming to reduce PHP calls by consolidating my data into a single array and then specifying which columns Google Charts should utilize. ...

Most effective method to retrieve yesterday's data

Currently, I'm working on a requirement and I need to validate the logic that I've implemented. Can someone help me with this? The task at hand is to calculate the 1 month, 3 month, and 6 month return percentages of a stock price from the curren ...

Utilizing Node Js and Selenium webdriver, what is the process of dragging and dropping an element from its current position to a new position just below it?

After multiple attempts, I have come to realize that the following code is ineffective. driver.findElement(By.xpath(xpath)).then(function (element1) { driver.findElement(By.xpath(xpath)).then(function (element2) { ...

Establishing communication between a master process and worker processes in Node.js: A guide to verifying bidirectional communication

After coming across this particular script from the node documentation, I tried to implement it for sending messages between Master and worker processes using cluster. However, upon running the script, I encountered an issue where I could not verify the me ...

Discover the magic of using the spread operator to effortlessly insert key-value pairs into an object!

Currently, I am grappling with the challenge of handling variable products using the spread function. For instance, in an online store selling clothes (similar to the screenshot linked below), I am looking to track when a user adds different sizes of the s ...