Explore the possibilities of combining rotation and translation in three.js for dynamic visual

I am currently working with Three.js, utilizing existing object methods to create animations without shaders. However, I have a simple question: is it possible to combine multiple animations on a shape? For example, rotating and translating a sphere. When I try the following code:

three.sphere.rotation.y += 0.1;
three.sphere.translateZ += 1;

The result is that the sphere rotates but the translation vector also rotates, rendering the translation ineffective. I have some experience with OpenGL and have used glPushMatrix and glPopMatrix functions before. Do similar functionalities exist in this framework? Thanks!

javascriptthree.js

Answer №1

Every object in three.js, as stated in the documentation, possesses attributes like position, rotation, and scale. The rotation is relative to its center, determining its local axis coordinates (the object's perceived front, up, right directions). When using translateZ, movement occurs according to these local directions rather than the global Z axis of the world or parent. To move along the global Z axis instead, utilize three.sphere.position.z += 1.

Answer №2

It's crucial to consider the sequence of transformation steps. The outcome varies depending on whether you perform translation before rotation or vice versa. Although, visualizing the rotation may prove challenging with a spherical object.

Answer №3

According to the user "plyawn," it is important to note that the rotation is always applied before the transformation, regardless of how you define them. To change this order, objects must be nested in a specific way: first create the mesh, then transform the mesh, nest the mesh in Object3D, and finally rotate the object.

let object1 = ...
const object2 = new THREE.Object3D();
object2.add(object1)
object2.rotation.x = ... 
object2.position.set(...)
return object2

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

Ways to convert JavaScript object to hashmap

I am attempting to generate a map of type <String, Array()> from a JSON object. Suppose I have the following JSON structure: [ { "userId": "123123", "password": "fafafa", "age": "21" }, { "userId": "321321 ...

javascriptjsondictionary

RayCaster fails to identify meshes that were created at a later time using a cloned geometry

Take a look at the simple example below (don't forget to adjust the URL of three.min.js) and then open the html file in a new window. You'll notice a tetrahedron shape that is not regular displayed on the canvas. As you move the mouse over the ca ...

three.js

Cookie Strategy for Managing Popups Site-wide

Below is a script that will trigger a popup after 60 seconds of page load. This script also creates a cookie to prevent the popup from appearing more than once. The cookie expires when the user's session ends. However, the popup only appears on the e ...

javascriptjquerycookies

Interdependent function calls between two functions

When faced with the task of recursively checking two objects with sorted keys, I came up with a solution involving two functions. buildObj - this function retrieves all unique keys from the objects, sorts them, and then calls buildObjKey for each key bui ...

javascriptfunctionrecursionfunctional-programming

Exploring the functionality of maximizing and minimizing logic in an Angular Bootstrap modal popup

I'm currently utilizing Angular Bootstrap Modal Popup and I'd like to include options for Maximize and Minimize in addition to the close button. By clicking on the maximize option, the popup should expand to full screen, and by clicking on minimi ...

javascriptangularbootstrap-4angular-bootstrap

NodeJS parseStream, setting boundaries for chunk extraction from a stream

Struggling with parsing Node's filesystem. Below is the code snippet in question: var fs = require('fs'), xml2js = require('xml2js'); var parser = new xml2js.Parser(); var stream = fs.createReadStream('xml/bigXML.xml&ap ...

javascriptxmlnode.jsnode.js-stream

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Attempting to set up the Spika backend (node application), I ran into an issue while trying to start the server in standalone mode with the command: $ node src/server/main.js The error that popped up was: Error: Cannot find module 'socket.io-clien ...

javascriptnpm

I encountered an error stating "delta is not defined" while using the

I am testing the use of FirstPersonControls in three.js. However, when I try to copy examples to understand how it works, I always encounter the same error in the console: "delta is not defined." Can someone provide an explanation? <!-- Include librari ...

controlsthree.jsundefineddelta

Generate responsive elements using Bootstrap dynamically

I'm having success dynamically generating bootstrap elements in my project, except for creating a drop-down menu. ColdFusion is the language I am using to implement these div elements: <div class="panel panel-primary"><div class="panel-head ...

javascriptjqueryhtmltwitter-bootstrap

Issues with Javascript's JSON.parse functionalityI'm having trouble

As a complete newcomer to the world of JavaScript, I find myself struggling with some issues regarding JSON manipulation. This is my very first attempt at working with it, and I am encountering difficulties in converting my JSON string into an object that ...

javascriptjson

Display the properties of the nested object

I am trying to extract and print the postal_code value from the JSON file provided below: { "results" : [ { "address_components" : [ { "long_name" : "286", "short_name" : "286", "t ...

javascriptjsonajax

Encountering a 404 error when trying to reload the page?

My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server: historyApiFallback: { index: 'index.html', } Now, when transitioning to production mode, I wanted to replicate the ...

javascriptexpresswebpack

Unable to Display "Hello World" in Vue.js

I am attempting to launch the Vuejs hello world project on a Cloud 9 development environment. Despite its simplicity, I am unable to determine why it is not rendering, even though there are no visible errors. What could be the issue here? <!DOCTYPE h ...

javascriptvue.jsvuejs2

Enhancing images with JCrop's height and width adjustments

I am currently utilizing JCrop for photo cropping, and I have encountered an issue where the image clicked on is not displaying at the set width and height. Instead, it appears smaller when loaded in a modal window. Here is an example of the code snippet: ...

javascriptjqueryhtmlcss

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

Unable to accept the link ID in the modal

Presently, I am facing an issue with a modal that links a product with a customer and involves product discount calculations. The customer is automatically selected using the modal id, and the product is chosen through select options with a while loop. T ...

javascriptphphtmlmysql

The execution of Jasmine implementation callbacks is not governed by karma

I'm currently facing an issue with running my Jasmine tests using Karma. Any help or suggestions would be greatly appreciated. When I try to run the tests with Karma (using "karma start --singleRun=true"), the browser opens but nothing happens and ev ...

javascriptunit-testingjasminekarma-jasminekarma-runner

Uncertainty surrounding the inherited styling of an element in HTML

I am seeking clarification on the distinction between two methods of writing HTML code: CSS file (applies to both the first and second way): .parent{ color:red; font-style: italic; } .child_1{ color:blue; } .child_2{ color:green; } First approach ...

javascripthtmlcsselement

How can I restrict the number of input data to 10 on a single page in a TodoList application?

As a newcomer to web development, I recently built a todoList app. It's functioning flawlessly and allows me to add multiple lists to my webpage with ease. The technologies used are React js and Bootstrap. However, I now wish to implement a limitati ...

javascriptreactjspaginationfrontend

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

javascripthtmlangularjs