The camera's rotation remains unchanged even after applying the transformation matrix

Is there a way to effectively apply a transformation matrix to a PerspectiveCamera? I have the transformation matrix and I am applying it to the Perspective camera using

camera.applyMatrix(transformationMatrix);

The camera.position is updated correctly, but the camera.quaternion remains unchanged. Rotation only works when I disable camera.matrixAutoUpdate = false, but this disrupts trackballcontrols. I attempted adding camera.updateMatrix() to trackballcontrols, but it resets the rotation. I also experimented with setting the position, quaternion, and scale of the camera manually like so:

camera.matrixAutoUpdate = false;
camera.useQuaternion = true;

var position = new THREE.Vector3();
var quaternion = new THREE.Quaternion();
var scale = new THREE.Vector3(1, 1, 1);
transformationMatrix.decompose(position, quaternion, scale);

camera.position.copy(position);
camera.quaternion.copy(quaternion);
camera.scale.copy(scale);

camera.updateMatrix();

Despite achieving correct settings, trackballcontrols still do not function properly.

Edit: My goal is to set the matrix once, rather than at each frame.

Answer №1

Make sure to include camera.matrix.identity() inside the animate loop before applying

camera.applyMatrix(transformationMatrix)
. Also, remember to call controls.update() after applying the transformation matrix:

Check out this example on jsFiddle

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

Is there a way to change the screen upon clicking a button?

On my website, I have a simplified "login" screen where users only need to enter their name. There is a button on this screen, but no navigation links. I would like to create another screen with different content that appears when the button is clicked, bu ...

Preflight response indicates that the Access-Control-Allow-Methods does not permit the use of the PATCH method

Implementing the axios PATCH method in my ReactJS project to update a record is resulting in a failure with the following error message: Failed to load : Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response. Below is the co ...

What could be causing BeautifulSoup to overlook certain elements on the page?

For practice, I am in the process of developing an Instagram web scraper. To handle dynamic webpages, I have opted to utilize Selenium. The webpage is loaded using: driver.execute_script("return document.documentElement.outerHTML") (Using this javascript ...

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format? Update: I am cur ...

In what situations should the `#` symbol be used to select a DOM element?

There are times when I have to retrieve elements in the following ways: var object = document.getElementById('ObjectName'); Other times, it's done like this: var object = document.getElementById('#ObjectName'); What distinguishes ...

Attempting to wipe out a request using ajax to access relationship entities in a ruby on rails framework

I'm currently working on implementing an ajax request to delete a "budget" (known as "orçamento" in Portuguese). These budgets are associated with a "cadastre", where each cadastre can have multiple budgets. Below, you can find the components involve ...

Forcing Reload of HTML5 Video to Avoid Caching Issues

Is there a way to instruct the HTML5 Video tag to stream the video chunks on demand/load without caching them on the client side? Essentially, how can I prevent the browser from storing the HTML5 video in its cache? My main objective is to have the video ...

What are the steps to generating and sharing 'npm create' scripts?

I am looking to develop and release a script on npm that functions similarly to: npm create qwik@latest or yarn create next-app --typescript However, I am unsure where to begin. Despite searching extensively online, I have not been able to find any helpf ...

Unable to save the ID of an element into a jQuery variable

I am currently working on a project that involves an unordered list with anchor tags within it. I am trying to access the id of the li element that is being hovered over, but for some reason, the alert is returning undefined or nothing at all. Here is the ...

What is the best way to implement a JavaScript pattern matching for both "aaaa" and "aaa aaa"?

Can anyone help me create a pattern that can accept both strings with spaces and without spaces in the same text box? I would appreciate any guidance on how to achieve this. Thanks! ...

Easy steps for importing node modules in TypeScript

I'm currently navigating the world of TypeScript and attempting to incorporate a module that is imported from a node module. I have chosen not to utilize webpack or any other build tools in order to maintain simplicity and clarity. Here is the struct ...

The ngClass directive does not seem to be functioning properly when utilizing multiple conditions

Trying to apply [ngClass] under different conditions. Here is what I have: condition [ngClass]="{'validator':lang.VideoURL!=null, 'labeltitle': lang.VideoURL==null}" However, when the value of lang.VideoURL is null, the labeltitle cl ...

Incorporating SEO for a Flash-Based Website

After reading through various discussions on this topic, it seems like my question still remains unanswered. We are gearing up to revamp our company's website in the coming months. Currently, our site is mostly text-based, which has helped us achieve ...

What is the best way to implement lazy loading for headless UI Dialog components in a React

Is there a way to implement lazy loading for the headless ui Dialog component while preserving transitions? Below is the current implementation that almost works: // Modal.js const Modal = ({ isOpen }) => { return ( <Transition show={isOpen ...

Using Express and React with Socket.io

I am currently working on setting up a basic WebSocket connection using Socket.io, Express, and ReactJS. Below is the code for the server: const express = require('express'); const socket = require('socket.io'); const path = require(& ...

What causes the axios Library to fail in initiating a request if the API call does not begin with "https://"?

This issue has been resolved, but I still want to ask it in order to gain a better understanding of the underlying processes. So, I am using an API to retrieve data on the current weather in a specific city. The API call (as per the provider's documen ...

Element not producing output via Autocomplete from mui/material package

My challenge involves handling an array of states within the Autocomplete component. Once a state is selected, a corresponding component needs to be rendered based on the selection. However, despite successful state selection in the code, nothing is being ...

Exploring the functionalities of the useState object with mapping techniques

While attempting to convert my class-based component to a functional style, I encountered the following code: const [foo, setFoo] = useState(null); const [roomList, setRoomList] = useState([]); useEffect(() => { setRoomList(props.onFetchRooms(props.to ...

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

Imagine having the following HTML structure: <div id="container"></div> <p>Output: <span id="output"></span></p> accompanied by this block of JS code: function otherAction(e) { document.getElementById('output& ...

Unable to trigger click event on dynamically added element using Chrome (jQuery)

My approach here involves dynamically creating a drop-down and binding the click event to the <option> within the <select> var $select = $('<select></select>'), $option1 = $('<option>a</option>') ...