Spin a ThreeJS Object3D along a slanted Y axis

I've experimented with various methods to tilt my object and then rotate it around this newly tilted axis, but no matter what I attempt, it always rotates as if the Y axis is pointing straight up. It fails to rotate along the newly tilted axis. WHY?

this.axis = new Vector3(0, 0, 0.5).normalize()
this.mesh = new Mesh(this.geometry, this.material)
this.mesh.rotateOnAxis(this.axis, Math.degToRad(25))

I've explored using rotateOnWorldAxis, as well as experimenting with makeRotationAxis on Matrix4 and directly applying it to the geometry.

See the example here:

codesandbox.io

Answer №1

If you're looking to achieve this effect, one way to do it is by implementing a hierarchical structure in your scene. One solution is to introduce a group node. By adding the group as a child to the scene, and then adding your mesh as a child to that group, you create a hierarchy in which the tilt is applied to the group rather than the mesh.

this.mesh = new Mesh(this.geometry, this.material);

/* Create a new group */
this.group = new THREE.Group();
/* Tilt the group */
this.group.rotateOnAxis(this.axis, Math.degToRad(25));
/* Add the mesh to the group */
this.group.add(this.mesh);
/* Add the group to the scene */
this.scene.add(group);

By adding this hierarchy, any children (like the mesh) of the group will inherit the tilt as well. This method offers a way to combine the tilt with locally applied rotation to achieve the desired axis-based rotation.

For a visual demonstration and sample code, you can check out this codesandbox.

Another Approach

Alternatively, you can use the rotateY() method to apply a rotation transform around the mesh object's local frame:

this.mesh.rotateY(0.005);

// this.mesh.rotation.y += 0.005 <-- not necessary

Here's a working example demonstrating this approach.

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

WebGL Tips: Resizing an object using vector multiplication, achievement showcased (see image)

I'm currently exploring methods to scale an object without taking into consideration its local rotation. While I have achieved some success using morph animation, I am searching for a more dependable solution. ...

I'm attempting to save my information with react-redux, but unfortunately, it's not working as expected. Any ideas on how to troubleshoot

Working on a React project, storing data using Postman works well, but with React-Redux, the data doesn't pass into the database. How can this be resolved? Below are snippets of the code: const mongoose = require('mongoose'); const verifySc ...

transferring information from PHP to JavaScript through the use of JSON encoding

I am currently in the process of developing a Google maps page that utilizes latitude and longitude data coordinates to generate a heat map displaying the distribution of foxes within a specific area. At present, my application functions properly when the ...

Obtaining data from a CSV file and transforming it into JSON format results in an array

Currently, I am working on a function that takes a JSON object and prints it out as strings: GetAllArticles: (req, res) => { var allArticles = getAllArticles(); res.setHeader("Content-Type", 'application/json'); res.w ...

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

Building web navigation using a combination of HTML, JavaScript, and PHP within a category, sub

I've been struggling to find a detailed tutorial on implementing a dynamic website navigation system using javascript or php. It seems like every time I attempt to research this topic, I end up feeling confused and unsure of where to start. My goal i ...

Only the initial element within the specified class is targeted by JQuery

Currently, I am utilizing Kendo UI to refresh multiple charts by class without having to access each one individually. Here is the code snippet I am using: $(".k-chart").data("kendoChart").refresh(); The issue I am encountering is that only the first cha ...

Turn off effect using props in react-three-fiber

An animated scene has been created using react-three-fiber, featuring an EffectsComposer with a Glitch effect implemented through the react-postprocessing npm package. The goal is to toggle the active state of the Glitch effect by utilizing an HTML input ...

The concept of JavaScript variable scope

I am working on a script that has a structure similar to this $(function(){ var someVariable; function doSomething(){ //need to figure out how to access someVariable here } $('#something').click(function(){ //need to figur ...

Arranging a 2D array of matchups to ensure an equal distribution of home and away matches for each team

I am in the process of developing a unique UEFA Champions League 24 'Swiss Model' tournament with 36 teams. Each team is set to compete against 8 different opponents, resulting in a total of 144 matches. I already have a list of matchups prepared ...

Rendering with node.js express inside nested JS files

Imagine I have a basic view <html> <head> <title>something</title> </head> <body> <%= param %> </body> <script type="text/javascript" src="myscript.js"></script> </html> Be ...

Exploring MessageEmbed Properties

I am trying to retrieve the description of this Message embed. So far, I have used console.log(reaction.message.embeds) which displays the information below. However, when I attempt to access the description directly with console.log(reaction.message.embe ...

Customize the CloseIconButton in Material-UI Autocomplete for a unique touch

Hello everyone, I have a simple dilemma. I am trying to implement a custom closeIconButton, but the only available prop is closeIcon. However, this prop is not sufficient because I need this custom button to also have an onClick property. If I add the onC ...

Conceal the div class upon clicking it

I'm dealing with a list of videos and I need to hide the class when it's clicked. Check out this sample HTML output: <div id="primary-video"> <iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/test" fra ...

How can I create a new div element for every item in an array by utilizing JSX?

I am currently working on creating a div element for each item in an array using reactjs JSX. I wasn't sure how to tackle this, so I attempted the following approach: {results.map((element, index) => ( <div key={index} className={ ...

Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden. Is there a way to achieve this using JQuery? <tr class=" ...

Is there a way to create a self-contained installation package for my Vue application?

Is it possible for my application to be downloaded and installed without requiring internet access after the download is complete? I am looking to create a standalone installer for this purpose. Are there any suggestions on how to go about implementing t ...

Unable to isolate segments of a string

Looking for a way to extract two different IDs from the following string: SPList:6E5F5E0D-0CA4-426C-A523-134BA33369D7?SPWeb:C5DD2ADA-E0C4-4971-961F-233789297FE9: using Javascript. The regular expression being used is : ^SPList\:(?:[0-9A-Za-z\-]+ ...

When trying to upload a file using multer, an error occurred stating "Unexpected field

My current issue involves using multer to upload an image from a form. However, I am encountering an Unexpected field error after uploading the image. In my HTML code, I have specified the file and file-model names as myFile. app.js var express = re ...

Locate the div in the array that includes ValueA, and save ValueB from it into a new variable

When the button is clicked, I retrieve the current value of a Select control using the following code... $('#myBtn').on('click', function (clickEvent) { var nameSelected = document.getElementById('mySelectControl').getEle ...