Spinning a basic square two times

I am somewhat familiar with Blender 3D, but I have very little experience with 3D programming and I am currently trying to work with three.js.

My query is this: I have a basic cube that I rotated around the y-axis; now I need to rotate it again around the y-axis, but with the axis also rotated. In Blender, I would press the RKEY twice.

To perform the first rotation, I used: cube.rotation.y += Math.PI*.5;

How can I achieve this in Three.js? I have attempted some matrix transformations as well, but haven't been successful.

--

@muimota assisted me with a JSFiddle, so I will provide further details below:

Thank you @muimota for your help. This example will allow me to clarify what I am attempting to accomplish! You can find an updated version of the fiddle with a more detailed explanation at this link: The cube has been rotated twice (y and z), and will now rotate endlessly along the y-axis. My goal is to ensure that it always rotates parallel to one of its faces – just like the initial rotation was parallel to its top face.

javascriptthree.jsblender

Answer №1

Even if you rotate a cube 90º every frame, it may appear unchanged and give the illusion of not rotating (but in fact, it is).

Take a look at this demonstration: http://jsfiddle.net/KdJaUht9/

function animate() {
 
  //Rotates by 90º each frame but maintains the same appearance
  mesh.rotation.y += Math.PI/2;

  renderer.render(scene, camera);
}

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

Copying the position and rotation of a mesh from one world to another in ThreeJS

In my setup, I currently have 3 meshes named cube(a), tempSphere(b), and m_mesh(c). Mesh a and b are grouped together with a as the parent mesh. I have managed to update the location, rotation, and position of the group, so that meshes a and b automatical ...

typescriptthree.js

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript

Submitting a form in Rails without refreshing the page and dynamically updating the view

Hello everyone! I am currently utilizing Rails and in my process, I would like the user to perform the following steps on the same page: Input their address Completing the form Submit the form Clicking to submit Update the view to display the add ...

javascriptruby-on-railsajaxstimulusjs

Why is Socket.io functioning on localhost but fails to work once deployed to Heroku?

Sharing my socket server code: const io = require("socket.io")(8080, { cors: { // origin: "http://localhost:3000", origin: "https://mern-bubble.herokuapp.com", }, }); This is the client-side implementation: useEf ...

javascriptnode.jsexpresssocket.io

Saving the accurate x and y coordinates into the database

My website features draggable images that each have their own x and y positions. I am attempting to pass these values into a MySQL database, but I'm facing an issue where all the images are getting assigned the same x and y values in the database. In ...

javascriptphpjquerymysqlajax

Confirming the existence of a folder with AngularJS

Currently, I am attempting to determine if a folder exists so that I can make decisions on which files to include using ng-include. This is what I have so far: $scope.isVisible = { buttons: checkForClientOverwride('buttons'), it ...

javascriptangularjsdirectory

Initiate a jQuery modal dialogue box

As an apprentice with no prior experience working with JavaScript, I encountered a problem with my function that calls a popup. The function works fine on the first button, but fails to work on all subsequent buttons. Since the application keeps adding b ...

javascriptjquerybutton

Troubleshooting MeshStandardMaterial problem in Three.js on Mac M1 with Chrome

Having an issue on my M1 Mac with Chrome, where my scene appears like https://i.sstatic.net/tWckT.png. However, it looks fine in Safari or Firefox https://i.sstatic.net/9TJvQ.png The problem seems to be related to the rendering of walls. Here is my code: ...

typescriptthree.js

Unspecified functionalities within VueJs

data() { return { arrayToBeSorted: [1, 2, 3, 4, 5, 6, 7, 8], isManipulatingArray: false, shuffleButtonText: "Shuffle!", sortAlgorithms: [ { id: 1, name: "Bubble sort", fn: bubbleSort }, { id: 2, ...

javascriptvue.js

Trigger event listener of AngularJS directive on click and send information to it

During my exploration of AngularJS directives, I encountered a task that required me to activate the directive's listener upon clicking a button and passing data from the controller to it. Sample Directive app.directive('graphVisualization&apos ...

javascriptangularjsangular-directive

Unable to integrate a new third-party script into a Next.js application

In my attempt to integrate the following script, I have tried adding it first to _document.js, then to app.js, and finally to a specific page. <Script src="https://anywebsite.ai/chatbot/chatbot.js"></Script> <Script id=" ...

javascriptreactjsnext.js

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code: public static getKeys(obj: Object) { let keys: string[] = []; for (let k in obj) { if (typeof obj[k] == "Object" && obj[k] !== null) { ...

javascriptjsonrecursiontypescriptjavascript-objects

Steps to exit browser in WebDriver Sampler in JMeter and halt execution

I have been attempting to close the browser in my Selenium Jmeter last sampler thread, but I keep encountering the following error: INFO c.g.j.p.w.s.WebDriverSampler: WebDriver has been quit. 2024-02-01 22:53:24,989 ERROR c.g.j.p.w.s.WebDriverSampler: Sess ...

javascriptselenium-webdriverjmeter

Combining strings and variables in Vue.js with the use of bootstrap-vue syntax

Hey, I'm facing a little syntax hiccup with '="collapse-{{ product.id }}"' in both the b-button and b-collapse. Any ideas on how to properly structure this? Just looking to set up a unique ID that connects the button to the collaps ...

javascriptvue.jsbootstrap-vue

Troublesome issue with Internet Explorer and Safari: The .click() function does not work for input type="button" in Jquery

Is there a way to ensure that the input type="button" functions properly with jquery function .click() in Internet Explorer and Safari? While it works seamlessly in Mozilla, Chrome, and Opera. For instance, when the button is clicked, a hidden div should b ...

javascriptjqueryhtmlsafariexplorer

Efficiently sending VueJS data to a separate script

I am in the process of transitioning an existing site to VueJS, but I have encountered a roadblock when it comes to finding the best method to accomplish this task. The site currently utilizes D3-Funnel (https://github.com/jakezatecky/d3-funnel) to genera ...

javascriptvue.js

Persistently save retrieved information and store data in MongoDB by utilizing Node.js

I am facing the challenge of continuously making an http.get request to an API that provides location data. I have tried a basic get request to test if the data is being received, and it is. However, the issue is that I need this process to run in a contin ...

javascriptnode.jsmongodbgps

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to ...

javascriptcssfirefoxbackground-imagerepeating-linear-gradient

Launch all external links in Browser (NWjs)

While attempting to create my own independent version of Google Chat using NWjs, I encountered some obstacles. When a link is opened in the NWjs window, it opens in another NWjs window instead of the default system browser, which is what I want. I attemp ...

javascriptjquerynwjs

Deeply nested .map function to update state value

The current state value const [settings, setSettings] = useContext(SettingsContext) Utilizing the .map method on the settings state {settings[categoryIndex]?.config?.map((item: ConfigItem, index: number) => ...

javascriptreactjstypescript