Utilizing Tween for camera animation

Currently, I am attempting to smoothly adjust the camera's rotation in order to focus on a specific object within a graph.

Up until now, my implementation includes:

fourd.render_loop.push(() => TWEEN.update());
fourd.intersect_callback = function(vertex){
    console.log(vertex);
    var camera = fourd._internals.camera;
    var start = new THREE.Euler().copy(camera.rotation);
    camera.lookAt(vertex.position);
    var end = new THREE.Euler().copy(camera.rotation);
    camera.rotation.copy(start);
    var tween = new TWEEN.Tween(camera.rotation)
        .to(end, 600)
        .easing(TWEEN.Easing.Quadratic.In)
        .start();
};

The render_loop function acts as a collection of functions that are called in every render cycle. Despite this setup, I seem to be encountering an error message:

THREE.Euler: .setFromRotationMatrix() given unsupported order: NaN

Answer №1

If you want to animate the camera's orientation or rotation, it's best to tween the camera's quaternion instead.

var temp = new THREE.Camera(); // create these objects once and reuse them
var startQuaternion = new THREE.Quaternion();
var endQuaternion = new THREE.Quaternion();

. . .

// tweening process
var timer = { t: 0 };

new TWEEN.Tween( timer )
    .to( { t : 1 }, 1000 )
    .easing( TWEEN.Easing.Linear.None )
    .onStart( function() {

        temp.position.copy( camera.position );
        temp.lookAt( targetPosition ); // set target Vector3 for camera to look at

        startQuaternion.copy( camera.quaternion );

        endQuaternion.copy( temp.quaternion );

    } )
    .onUpdate( function() {

        THREE.Quaternion.slerp( startQuaternion, endQuaternion, camera.quaternion, timer.t );

    } )
    .onComplete( function() {

        camera.quaternion.copy( endQuaternion ); // ensure exactness at completion

    } )
    .start();

Using three.js version r.88

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

Error message saying "Unable to access 'map' property of undefined" occurs after updating state in ReactJS

Currently facing a challenge while updating the state. I have confirmed that the data obtained from the API is accurate as I verified it with console.log(). Strangely, the error occurs only during searches with more than one letter. I attempted to resolve ...

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

Retrieve a live variable from an external JavaScript file

I'm currently working with an external file that showcases videos on my website using a unique URL with a token and expiration date. Here's an example: https://www.thevideositeurl.com/embed/231231/ To include this video on my page, I use the fo ...

Using jQuery to input a value that returns the [object Object]

While working with jQuery in asp.net, I encountered an issue where the value assigned to a hidden field (hfstockcode) is returning [object Object]. The console output shows v.fn.v.init[1]. How can I retrieve the correct value for the hidden field? $(docum ...

express node struggling to locate bootstrap.js file

I am working with a specific directory structure within my project: projectName | -.sencha/ | - app/ | - view | - controller | - store | - saas | - server/ | -server.js ...

Managing a promise and using async/await functions

Having an issue with my node and express function router.post('/', async (req, res) => { const playlist = new Playlist({ song: req.body.song, artist: req.body.artist }) try { const newPlaylist = await play ...

PHP page Not Refreshing Properly Without Ajax

I am in need of assistance. Could someone please provide me with a code that has been thoroughly reviewed and tested for errors to address my issue? The program, 22.php, consists of a form. The desired functionality is for the user to enter information and ...

The div is inexplicably shifting downward once the first three rows are shown correctly

After displaying the first 3 rows properly, the div mysteriously moves down. Could I be making a silly mistake? All images have the same width and height. Please see the attached image for reference. <?php // start first row echo "<hr class='m ...

What is the method to implement timeago.js?

I've recently embarked on my journey to learn JavaScript, and it has only been two weeks since I started. As a beginner, I'm encountering some difficulties with implementing timeago from . The specific line of instruction that's giving me tr ...

I'm having trouble accessing a deeper level of JSON data after receiving a response from the server via AJAX

After successfully sending the initial http post from the browser to the server and receiving the json data with represented objects in return, I faced an issue with populating the select options on the browser side. Although I managed to populate the sel ...

Is there a way to automatically remove files from the "dist" directory when deleting the prototype from the "src" folder?

I am new to build systems and seeking assistance with the following question. Here is the structure of my boilerplate: /src (working folder) ___/templates(jade files) ___/scss ___/scripts /dist (compiled files) ___/css ___/js ___.html files In the te ...

Display the div with the matching data value when clicked, and conceal all other divs

I need help with a list of items in HTML using UL and LI tags. Each LI item has a specific data attribute value. What I am trying to achieve is that on clicking each LI item, another div with the same data attribute should be displayed while hiding all oth ...

Attempting to verify JavaScript input by utilizing OnClick and a custom function. Regardless of the content inputted, the system consistently confirms that the format is accurate

I am currently working on a project that involves an HTML file and an external JavaScript file. In the HTML file, there is user input and a validation button that triggers the courseValidation() function when clicked. However, I am facing an issue with the ...

Issue with npm version: 'find_dp0' is not a valid command

Hello, I have a small node application and encountered an issue while running a test. The error message displayed is as follows: 'find_dp0' is not recognized as an internal or external command, operable program or batch file. It seems to be re ...

Converting a customer ShaderMaterial to Lambert Material using Three.js

Currently, I am utilizing a cell shading script to shade a Lambert material on a model. However, I am facing challenges when trying to apply the same script to a custom Shader Material. Is there a way to convert the custom material into a Lambert materia ...

Passing data from child to parent in Angular using EventEmitter

I have integrated a child grid component into my Angular application's parent component, and I am facing an issue with emitting data from the child to the parent. Despite using event emitter to transmit the value to the parent, the variable containing ...

Error in JSLint Object Detection

Currently using JSLint to scan the code below: 'use strict'; var mathService = { add: add, subtract: subtract, multiply: multiply, divide: divide, power: power, squareRoot: squareRoot }; function add(first, second) { retur ...

Make sure to wait for the scrollTo function to finish before executing any other commands

I have a sleek scrolling directive in my AngularJS app that automatically scrolls to the bottom of the page. I want this command to execute only after the scrolling has completed. Currently, I trigger the scroll function and then use $('#comment-input ...

Ways to ensure Vue retrieves data from the database whenever a specific event occurs

I have individual buttons next to each row, with unique data entries in the database. When clicking on a button, I want specific information to appear in a Bootstrap Modal. However, I am facing challenges ensuring that Vue updates correctly with each click ...

The ViewChild instance is currently undefined

Within my component, I have the following setup: @ViewChild('PaginatedTableComponent') userTable: PaginatedTableComponent; Here is the corresponding HTML code inside the component: <pag-paginated-table #userTable [(shouldUpdate)]="sh ...