Enhance local rotation of objects in Three.js

I am working on creating a spaceship-like object with controls, and I have learned that I need to use quaternions to achieve this. To start, I am attempting to make a cube rotate to the left when the A key is pressed. Here is the code I have written for this:

if(controls.pressingA === true)
{
    //var pLocal = new THREE.Vector3( 0, 0, -1 );
    //var pWorld = pLocal.applyMatrix4( me.matrixWorld );
    //var dir = pWorld.sub( me.position ).normalize();
    var dir = me.getWorldDirection();
    var quaternion = new THREE.Quaternion().setFromAxisAngle( dir, 0.05 );
    me.rotation.setFromQuaternion( quaternion );
}

Based on my understanding of this code, the me.getWorldDirection() function retrieves the axis that the object is facing. Then, I create a quaternion based on this axis and rotate the object by 0.05 degrees in radians. However, the issue I am facing is that it sets the rotation of my object rather than increasing it. How can I adjust the code to increase the rotation instead of merely setting it?

javascriptthree.jsrotationquaternions

Answer №1

Have you considered utilizing any of these options or a combination thereof:

mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
mesh.rotation.z += 0.05;

Example Link

Answer №2

When adjusting each one individually is too cumbersome, simply apply this method:

mesh.rotation.set(9, 7, 3)

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

Following a Node/Npm Update, Sails.js encounters difficulty locating the 'ini' module

While developing an application in Sails.js, I encountered an authentication issue while trying to create user accounts. Despite my efforts to debug the problem, updating Node and NPM only resulted in a different error. module.js:338 throw err; ...

javascriptnode.jsmacosmodulesails.js

What steps can I take to ensure that the full tingle modal, which includes an image, is visible when the

Upon loading the page, I noticed that if the browser width is greater than 540px, the modal displaying an image gets cut off (see figure below). What steps should I take to ensure that the vertical scroll bar appears immediately? https://i.sstatic.net/cJv ...

javascripthtmlcssimagescrollbar

Handling typeError in Vue.js JavaScript filter for object manipulation

I need to sort an object based on state names (e.g. Berlin, Bayern ...). Below is the API response I received. "states":{ "Bayern":{ "total":13124737, "rs":"09", "va ...

javascriptvue.jsobject

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

javascripthtmlangularjs

Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

I am attempting to utilize jquery in order to bring a constantly rotating div (with CSS animation) to a gradual, smooth halt when another div is clicked. My current strategy involves changing the "animation-timing-function" property from "linear" to "ease ...

javascriptjquerycssanimationrotation

What is the process for incorporating JavaScript-generated coordination into an HTML form?

As a newcomer to Javascript, I am on a mission to integrate geo coordination directly into an HTML form input field. After learning from W3Schools how to generate user latitude and longitude Coordination, I am now eager to input them directly into an HTML ...

javascripthtml

Display content exclusively in PDF format

On my HTML page, I have two sections - one for inputting values and the other for viewing a PDF. To ensure that the PDF view is hidden until explicitly requested, I need it to remain invisible by default. It should only appear as a PDF when someone clicks ...

javascriptangulartypescriptpdfjspdf

AngularJS: Issue with ng-show and ng-click not functioning when button is clicked

I have a specific requirement where I need to display and hide the description of each column in a table when a button is clicked. Here is the visual representation of what I have: the table In my HTML code, I have defined a button with ng-click as a func ...

javascriptangularjscontrollerangularjs-ng-clickng-show

Understanding the concept of callbacks and scopes

While experimenting with the concept of callbacks, I encountered a scenario where I wanted to confirm that my understanding of the situation was correct. function greet(callback) { // 'greet' function utilizes a callback var greeting = "hi"; ...

javascript

Traversing Through a Complicated JSON Structure

An application I developed can accept faxes in XML format and convert them into JSON objects to extract the necessary information, specifically the base64 string within the "file contents" variable of the document. Here is the code snippet: exports.recei ...

javascriptjsonnode.js

Issue with jQuery sortable serialization when dynamically adding content is not being recognized

I've been attempting to re-order a list through ajax on sortable update. However, when I add a new item to the list via ajax after the sortable has already been initialized upon page load, it fails to recognize the new item with the "serialize" functi ...

javascriptjqueryajax

Customize the appearance of each element in ng-repeat individually

In my code, I have implemented an ng-repeat. Each alternate div inside the ng-repeat is supposed to have a different border-color, which is achieved by using the following structure: <div ng-repeat="channel in channelList"> <div ng-style="get ...

javascriptangularjsangularjs-ng-repeatangularjs-digest

What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

After successfully obtaining the API Response Time (duration) using the 'makeAPICall' function, I am now faced with the task of passing this duration variable value to another asynchronous function. Can anyone assist me in finding a solution to a ...

javascripttypescriptapifetch-apitestcafe

Heroku, paired with Redis, consistently records information and monitors for socket errors

I have recently implemented Heroku, Redis, and Node.js with Express in my project. I successfully set up caching using Redis in my Node app, but I noticed continuous logs appearing in the Heroku log console in this format: 2024-04-21T18:54:09.000000+00:00 ...

javascriptnode.jssocketsherokuredis

Reorganizing Elements within an Array using JavaScript

Imagine I have the characters: H, M, L I want to create sorted arrays like this: var array1 = [ "H", "M", "L", "L", "M", "H" ]; My goal is to avoid having more than one unique character in the first three and last three characters when using the shuffl ...

javascriptarraysshuffle

Getting started with React Native project

Just dipping my toes into the world of React Native and looking for recommendations on the best starter kit/generator to kickstart my projects. Tried out "create-react-native-app" already, but curious if there are any other generators or kits out there tha ...

javascriptreactjsreact-native

Creating a multi-page app using React: A comprehensive guide

I am in the process of developing an application using NodeJS, and I have decided to incorporate React for creating interactive components within the app. However, my goal is to avoid turning it into a single-page application. How can I effectively distri ...

javascriptnode.jsreactjs

How to protect a non-idempotent post operation from frequent calls in a Node.js environment?

How can you protect your post request handlers in node.js from being called multiple times and causing data corruption when dealing with non-idempotent operations? For example, let's say you have an API that takes a few seconds to return due to proce ...

javascriptnode.jsexpresssequelize.js

Unique trigger for clicking events with customizable widgets in JQuery

I'm in the process of developing a jquery widget that functions similarly to a menu bar, featuring two buttons - ButtonOne and ButtonTwo. With my HTML code and associated styles in place, I've been focusing on creating a "hello world" widget. / ...

javascriptjqueryjquery-ui

Calling Number() on a string will result in returning a value of NaN

Currently, I am working on the following code snippet: app.put("/transaction/:value/:id1/:id2", async(req,res) => { try { const {value,id1,id2} = req.params; const bal1 = await pool.query("Select balance from balance where id=$1",[i ...

javascriptnode.jspostgresqlrestparseint