Ways to obtain the angle of a camera's movement vector

Help needed with passing the angle of movement from an animation of a camera to a 2D sprite shader. Trying to project two vectors to the camera and compute the angle, but encountering issues.

let prevCameraVector = null;
function tick() {
  if(prevCameraVector && !prevCameraVector.equals(camera.position)) {
    let vector1 = prevCameraVector;
    let vector2 = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);

    vector1.project(camera);
    vector2.project(camera);
    let angle = vector1.angleTo(vector2);

    uniforms.uRotate.value = angle;
  }
  prevCameraVector = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);
}

Answer №1

After discovering a helpful example involving motion blur, I decided to implement its algorithm for my project with great success.

let previousCameraVector = null;
function update() {
    if (previousCameraVector && !previousCameraVector.equals(camera.position)) {
        let vec1 = previousCameraVector;
        let vec2 = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);

        vec1.project(this.camera);
        vec2.project(this.camera);

        vec2.sub(vec1);
        vec2.y *= window.innerWidth / window.innerHeight;
        let angle = Math.atan2(vec2.x, vec2.y);

        uniforms.uRotate.value = angle;
    }
    previousCameraVector = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);
}

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

Ways to time animations differently and activate two animations at the same time in every loop

I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes. Below is the relevant JavaScript code snippet: jQuery(fu ...

The result of Ajax is coming back as unclear

I've encountered an issue while trying to upload an image to my server using a POST form and AJAX. Every time I submit the form, my AJAX response shows as undefined in the error box. Here is the Ajax function I am referring to: $('.register_subm ...

methods for extracting header information using JavaScript

Is there a way to retrieve values from the header URL using JavaScript? Consider this scenario: www.example.com/content.html?param=value How can one extract this information upon redirecting to the page content.html? What techniques could be employed f ...

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

You won't be able to view over 15 KML layers on a page that relies on Google Maps API

I've encountered an unusual issue: I need to create multiple KML layers from separate KML files and display them on a single map window. The number of files ranges from just a couple to less than fifty. Currently, my code works perfectly when given 1, ...

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

Exploring ways to pass props in functional components in React Native

I am currently exploring how to create an API in React Native with TypeScript without using the class extends component. However, I am struggling to figure out how to access and send props from one const view to another function: App.tsx import React, {us ...

creating a value and finalizing on the yield operation

Despite my attempt to use es6 generators to set the value/done as I want, I am struggling to achieve the desired outcome. Whenever I try to set a value, it ends up in the "value" field, while the generator always returns "done: false" when I am actually ai ...

Using only the $http.get method, you can easily retrieve data in a simple

Here is my message from JSP, I am attempting to extract information from the response. $http.get('url.jsp', data).then(successCallback, errorCallback); I encountered an issue with "data is not defined" https://i.sstatic.net/NX60Y.png Is there ...

Revise for embedded frame contents

Is it possible to modify the HTML content of an iframe within a webpage? I currently have this code snippet: <iframe src="sample.html"></iframe> I am looking for a way to edit the contents of sample.html without directly altering the HTML co ...

Utilizing component state or props within Redux mapDispatchToProps operations

As a newcomer to Redux/React, I am still grappling with the concept of dispatch in the Redux environment. Currently, my approach to issuing Redux actions within components involves directly calling the dispatch() function from my component props: const ma ...

What is the most effective way to reset the state array of objects in React JS?

I'm facing a challenge in resetting an array of objects without having to rewrite the initial state value again. Initial state const [state, setState] = useState([ {name: 'abc', age: 24}, {name: 'xyz', age: 20} ]) Is there a metho ...

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

Tips for adjusting the color of each material on a shared object independently

After loading an array of 3D objects from a collada file, I encountered an issue where changing the color of one object also changed the color for all objects in the array. For example, using arr[5].material.color.setHex(0x00CC00); resulted in the color ...

Storing data with just a click

Upon clicking the link <a href="http://localhost/redmine/projects/'+ value.id+'">'+ value.name+'</a>, I aim to store the value.id into the following variable: x is the variable. var x = document.getElementById(value.id).va ...

Is it necessary for an embedded YouTube video to automatically play with sound?

My current project involves developing a Web Application where the client has specified that videos must autoplay with sound when a user visits it. Here is a snippet of what I have implemented: HTML: <embed id="video1" src="" wmode="transparent" type= ...

How to Implement Multiple OR Statements in SharePoint 2010 Using Jquery and JSON Rest

Struggling to create a multiple OR variable, but it just won't work. Is there an issue with my syntax or logic? var category = (i.Category == "Electric" ? "E" : i.Category == "Power Module" ? "PM" : i.Category == "Branch Office" ? "BO" : ""); After ...

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

Transferring JSON data from JavaScript to ASP.NET

In my web app, the backend is built in ASP.net. The ajax call I'm using is a standard get request. $.ajax({ url: 'myurl/updatejson', contentType: "application/json; charset=utf-8", data: data, success: function (data) { ...