What is the process for rotating an object 90 degrees on the global x-axis?

I have the need to precisely adjust the rotation of an object along the world axis by a specific angle. At the moment, I am utilizing the rotateAroundWorldAxis function (which I came across in another discussion) in my attempts to accomplish this.

function render() {

  // update mesh position
  rotateAroundWorldAxis(mesh, new THREE.Vector3(1, 0, 0), angle);

  renderer.render(scene, camera);

}

function rotateAroundWorldAxis(object, axis, radians) {

  rotWorldMatrix = new THREE.Matrix4();
  rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
  rotWorldMatrix.multiply(object.matrix); 
  object.matrix = rotWorldMatrix;
  object.rotation.setFromRotationMatrix(object.matrix);

}

The issue lies in my requirement to solely set the angle (such as rotation.x = angle), rather than incrementing it (like rotation.x += angle). Can anyone suggest how I can modify the rotateAroundWorldAxis function above to allow me to set the angle without incrementing it?

Visit jsfiddle for more details.

Answer №1

Eliminate the third line within the function

rotWorldMatrix.multiply(object.matrix); // pre-multiply

This particular line combines the two rotations.

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

Using JavaScript to open a document file in Chrome at launch

Is it possible to automatically open a doc file stored on my C:// drive when a link is clicked on my HTML page? Here is the code I have been using: <a href="C://mytestfile.doc">Click Me To launch the DOC FILE</a> Unfortunately, instead of op ...

Error: The requested collection# cannot be found in the Node.js Express routing system

Recently, I have started learning nodejs and implemented a simple API that allows users to log in with passport and then redirects them to the /collections route. While this part is functioning correctly, I am encountering issues with POST requests which a ...

Switch to the designated tab when clicked

I'm new to Vuejs and I am struggling to change the selected tab in the navigation bar when clicking on it. I tried using a function but I keep getting an error message in the console: vue.runtime.global.js:8392 Uncaught TypeError: _ctx.changeTab is ...

Is there a way to determine if the items in an array are duplicated?

Hello all, as a beginner in coding, I'm looking for guidance on determining whether an array contains repeated objects regardless of their order, without knowing the specific objects in advance. Let's say: I initialize an empty array: var rando ...

Difficulty in displaying YQL JSON Results with HTML/JavaScript

When utilizing the subsequent YQL query along with XPATH to retrieve data from certain elements on a webpage: select * from html where url="http://www.desidime.com" and xpath='//h5[@class="product_text"]' I am attempting to showcase the outc ...

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

Enhance the attributes of a collection of objects using values from a different array

Looking for a way to enhance a set of objects with properties sourced from another array? I have two arrays at hand. The first one contains a series of objects, while the second one consists of integers. My goal is to attribute a new property to each objec ...

Creating hashbang #! URL patterns for handling REST requests in client-side applications

I'm currently working on a single page application with my own custom router implementation. window.onhashchange = function(event) {... Within the URL structure, I am using hash bangs similar to the following examples: #!/products #!/products/1 #! ...

"Utilizing a single OrbitControls for navigating between dueling scenes

As a chemistry professor and not a programmer, I am seeking assistance with syncing the mouse control of two .dae files in side-by-side scenes using OrbitControls. While I can control each object individually in their respective scenes, my attempts to cont ...

Is there a way to display tooltip information for exactly 4 seconds when the page loads, hide it, and then have it reappear when hovered over

I am currently working with react-bootstrap version 0.32.4 and due to various changes, I am unable to update the version. My goal is to display a tooltip for 4 seconds upon page load and then hide it, only to show the tooltip again on hover. Here's ...

Using jQuery's .html() method to update the inner HTML of an element can cause the .click() event on a form button to stop functioning

There is a puzzling issue with my HTML form button and jQuery functionality. The button is supposed to trigger a .click() event from a JavaScript file, and it was working perfectly until I used jQuery .html() to replace the main page content with the form ...

What is the method to combine two geometries using Quickhull in Three.js?

I've been scratching my head over the Quickhull extension. Can anyone guide me on how to calculate the convex hull of two objects? I want to hull them after translating, so I'm guessing I need to adjust the actual vertices rather than just changi ...

Utilize JSON data using jQuery

I have a question about loading JSON data as HTML similar to the example shown in this fiddle and below. (function () { var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON(flickerAPI, { ...

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

The Vue component dynamically responds to updates in the Vue data object

After receiving some raw html from the server side, I wanted to dynamically update it using the Vue framework. Initially, I tried using v-html for this purpose but realized that it doesn't respond to changes in Vue data values. I found out that comp ...

The upcoming picture does not have a valid "width" or "height" attribute. Please ensure that these properties are set to numerical values

Recently, I attempted to apply my custom style definition to the Next image element, but encountered an unexpected error. Unhandled Runtime Error Error: Image with src "/images/search_icon_green.svg" has invalid "width" or "height& ...

What considerations need to be made for testing a component that relies on other components as well?

When creating tests for a web-component (parent) that utilizes other web-components (children), should the parent component's tests also cover to ensure proper rendering/configuration of the children components? For instance, let's consider a co ...

What methods does Angular use to display custom HTML tags in IE9/10 without causing any issues for the browser?

Exploring web components and utilizing customElements.define tends to cause issues in IE9/10. I've noticed that Angular is compatible with IE9/10, and upon inspecting the DOM tree, it seems like Angular successfully displays the custom element tags. ...

AngularJS simplifies request handling by allowing currying of requests

I am working with three forms within the same container, each triggered by a specific objectId. I want to create a function that can handle all actions related to these objectIds. Unfortunately, I am restricted to using ES5. var applyActions = function( ...