How can I rotate around the local axis of an object using THREEJS?

I'm struggling to grasp the concept of local axis rotation in ThreeJS. Despite referencing this Rotate around local axis answer, I can't seem to achieve the desired outcome.

For example, if I create a cylinder and rotate it

const geometry = new THREE.CylinderBufferGeometry( 10, 10, 20 );
geometry.rotateX(Math.PI/2)

How can I proceed to rotate the cylinder along its long axis?

I assumed geometry.rotateY(Math.PI/5) would suffice, but it seems to be rotating around the global axis instead. I aim to rotate it solely around the local axis for consistency with:

geometry.rotateY(Math.PI/5)
geometry.rotateX(Math.PI/2)

If anyone could shed some light on how to rotate around an object's internal axis, that would be greatly appreciated.

Actual result: https://jsfiddle.net/h20hnn3n/46/

Desired outcome: https://jsfiddle.net/81j6g2ms/1/

In my scenario, I need to rotate around the X axis by a specific angle first, followed by a rotation around the previous Y axis. It would be convenient if I could execute these rotations in sequence.

Edit: I've noticed a discrepancy when rotating the geometry versus a mesh. Shouldn't they produce the same result?

I'm perplexed as to why this doesn't yield identical behavior: https://jsfiddle.net/10L8se71/2/

javascriptthree.jsrotation

Answer №1

If anyone encounters a similar issue, here's the solution I found.

Rotating a geometry requires a different approach than rotating a mesh. To achieve the desired result, you must first add it to a mesh. The following code snippet demonstrates the correct method:

const mesh = new THREE.Mesh( geometry, material ) ;
mesh.rotateX(Math.PI/2)
mesh.rotateY(Math.PI/5)

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

Double-Image Display: Ennui Content Slider showcasing dual images simultaneously

Hey there! I am attempting to utilize the Ennui Content slider in order to showcase two images for each sequence of images. If you're interested, here is the link to the slider: I'm a bit unsure about what modifications or steps I need to take ...

javascriptjquery

Receiving no communication from Express Router

Having trouble receiving a response from the server after making get/post requests. I've tried adjusting the order of functions in index.js without success. I also attempted to send a post request using Postman to localhost:8080/register, but the requ ...

javascriptnode.jsexpress

Personalize Badge Component

I've been on the hunt for a solution to customize a badge component similar to what's seen here: https://mui.com/material-ui/react-badge/. As of now, only options for making it a dot or adding a number in a circle are available. However, I' ...

javascriptreactjsmaterial-ui

Experiencing a blank page error when trying to render a partial view using Angular.js

Can someone assist me? I am encountering an issue where the partial view is not rendering properly using ui-router in Angular.js. Below is my code snippet. <!DOCTYPE html> <html lang="en" ng-app="Spesh"> <head> <meta charset="utf- ...

javascriptangularjsangular-ui-router

VueJS is utilized to duplicate the innerHTML output value

Currently diving into the world of Vue, I encountered an issue while rendering an HTML text. My component template is a WYSIWYG editor. <template> <div id='editor_container'> <slot name="header" /> <div id='editor ...

javascripthtmlvue.js

Making an Ajax call to a RESTful API from another domain

My Restful API functions properly when called from Postman using a specific configuration. I provide the following details on Postman to receive a response: - POST: "" There is no need for authorization. Headers: Content-Type : application/json, username: ...

javascriptjqueryjsonajax

JavaScript Function Causes Applet's URLConnection.connect to Fail

My website features a Java Applet that needs to connect to the server. Interestingly, it successfully connects in JApplets @Override init(), but when called by JavaScript, it fails to do so. final URL url = new URL(SERVER_URL + action); System.out.println ...

javajavascriptsecurityapplet

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

Function for mapping: Array with nested objects will not be printed one after the other

Looking at the function below, I aim to map _s from res to another function using the return value from the manipulateValidateReqRes function CODE WAS UPDATED BELOW Why am I unable to return _s from the map function on res? It displays an error: TypeError ...

javascriptarraysjsonobjectmapping

Tips for declaring a data variable in Vue with the help of APIs

I'm currently working on a project where I am integrating movie data from an API (TMDb) using Vue Routers. I have a component named 'MovieList' where I am fetching data from the API. Below is the data structure: data() { return { mov ...

javascriptvue.js

Troubleshooting problem with AngularJS ng-repeat

Seeking assistance with an angularjs issue as a newcomer to the platform. Building a photo gallery where the initial page displays thumbnail photos from twitter and instagram using ng-repeat loop. Hovering over an image fades it out, revealing a button f ...

javascriptangularjshtmlcss

able to utilize service within a loop

import { Component, Input, Output, OnInit, OnChanges } from '@angular/core'; import { ViewComponent } from '../view/view.component'; import { HitoService } from '../../services/hito.service'; @Component({ selector: 'ap ...

javascriptangularangular2-observablesvis.js

What is the best way to determine the total number of rows that include a specific value?

Using AngularJS, I have a table that is populated with data using the ng-repeat directive. Here is an example: http://jsfiddle.net/sso3ktz4/ I am looking for a way to determine the number of rows in the table that contain a specific value. For instance, ...

javascriptjqueryangularjsangular-datatables

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

phpjavascriptcsshtml

Is there a way to combine two addEventListeners into one for a single click event?

preview of a to-do list app I am faced with a situation where I have two addEventListeners, one to change the text color and another to change the circle color. In Condition 1: When I click on the circle, both the text and circle colors are changed. In ...

javascriptdomaddeventlistener

Implementing Multiple Exports within the next.config.json File

I am trying to combine withPWA and withTypescript in my configurations but I'm not sure how to do it... This is the code in my next.config.json file : const withPWA = require("next-pwa"); module.exports = withPWA({ pwa: { dest: "public", }, ...

javascriptreactjstypescriptnext.jsprogressive-web-apps

How can we send state updates directly to a conditionally rendered React component?

I am currently developing a React application with a tab section that displays specific components upon clicking on a tab. Initially, I have my parent component: class Interface extends Component { constructor(props) { super(props); ...

javascriptreactjs

Utilizing Google Maps on a jQuery Mobile website

I need to make a change on my jQuery mobile site that currently uses onload="initialize()" in the body tag to display a Google map. I want to find a way to show the map without needing onload="initialize()". Can someone help me figure out what modification ...

javascriptgoogle-mapsjquery-mobile

Load image asynchronously using a mirror server in React/Next.js with a set timeout time

For my website, I have decided to store all of my images on IPFS, which are pinned successfully. This has helped reduce traffic and keep costs within the free tier offered by my hosting provider. However, at times the IPFS url may not load fast enough dep ...

javascriptreactjsnext.jsipfs

Capture of Chrome pages is not possible when the extension has not been activated on the current page due to the absence of the activeTab permission

Hey there! I've encountered a tricky situation while trying to implement a Google extension. Due to technical limitations, I need to open the extension in a separate window as opposed to a disappearing pop-up, which is causing some issues with the fu ...

javascriptgoogle-chrome-extension