Incorporating TWEEN for camera position animations: A complete guide

function adjustCameraPosition(newPosition, animationDuration) {
           var tween =  new TWEEN.Tween( camera.position )
                .to( newPosition, animationDuration )
                .easing(TWEEN.Easing.Linear.None)
                .onUpdate(function () {
                    camera.position = new THREE.Vector3().copy(newPosition)
                    camera.lookAt({x:0,y:0,z:0})
                })
                .onComplete(function () {
                    camera.lookAt({x:0,y:0,z:0})
                })
                .start()
        }

Using the above method, I am able to smoothly transition the camera to a specific position. However, after the initial movement, the TrackballControls plugin stops functioning and an error is thrown in the console.

TrackballControls.js:318 Uncaught TypeError: _this.object.position.addVectors is not a function
at THREE.TrackballControls.update (TrackballControls.js:318)
at animate ((index):456)
javascriptthree.jstweentrackball

Answer №1

It's not possible to directly tween the camera's position since it is fixed.

However, you can still animate the camera's position using Tween with the following method. It is recommended to deactivate the camera controls while animating and reactivate them once the animation is complete.

function animateCameraPosition( targetPosition, duration ) {

    controls.enabled = false;

    var position = new THREE.Vector3().copy( camera.position );

    var tween = new TWEEN.Tween( position )
        .to( targetPosition, duration )
        .easing( TWEEN.Easing.Back.InOut )
        .onUpdate( function () {
            camera.position.copy( position );
            camera.lookAt( controls.target );
        } )
        .onComplete( function () {
            camera.position.copy( targetPosition );
            camera.lookAt( controls.target );
            controls.enabled = true;
        } )
        .start();

}

var targetPosition = new THREE.Vector3( 10, 10, 10 );
var duration = 5000;

animateCameraPosition( targetPosition, duration );

Remember to include TWEEN.update() in your animation loop.

Using three.js version r.86

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

What is the process for setting up basic http authorization using angular.js?

My backend setup follows a structure similar to what is explained in this article. I am looking to make a GET request using angular.js, just like curl does it, with authorization via HTTP headers: $ curl -u miguel:python -i -X GET http://127.0.0.1:5000/a ...

javascriptangularjshttp-authentication

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

I am in the process of creating a JavaScript function that redirects users based on their selection from a dropdown menu. Additionally, I need to ensure that the word "admin" is set for both the username and password fields. view image here function my ...

javascripthtmlif-statementdomauthentication

Leveraging geoPosition.js in conjunction with colobox

How can I create a colorbox link that prompts the user for permission to access their location, and if granted, displays a map with directions from their current location? I've managed to get it partially working, but there's an issue when the us ...

javascriptjquerygeolocationcolorbox

The v-for loop seems to only update the last element instead of all of them, which is incorrect

How can I ensure that all 3 page links in the nav are displayed in 3 languages of user choice? Initially, the language change works fine on page load. However, after clicking on a language change link once, only the last link's language changes instea ...

javascriptvue.jsvuejs3nuxt.jsvue-component

What is the purpose of using double quotes within single quotes in JavaScript?

Could someone clarify the reason behind needing to nest double quotes inside single quotes in my Webpack configuration shown below? What is preventing using just double quotes? module.exports = merge(prodEnv, { NODE_ENV: '"development"', API ...

javascriptnpmwebpack

Issue encountered when importing async function: Invalid hook call. Hooks are designed to be called only within the body of a function component

All I desire is the ability to access logic from my geolocationApi file in my react-native components without using a hook. Instead, I prefer normal asynchronous functions. The geolocationApi file employs a custom hook for handling mobx state updates, whic ...

javascriptreactjsreact-native

JSON object containing elements with dash (-) character in their names

While I am in the process of parsing a `json` object, I encountered an element labeled as `data-config`. Here's an example: var video = data.element.data-config; Every time I attempt to parse this specific element, an error pops up: ReferenceError ...

javascriptjqueryajaxjsonjquery-mobile

Unsuccessful CORS on whateverorigin.org with YQL

Despite trying all three methods, I keep getting an error regarding cross domain access denied. Previously, I had successfully used YQL in different parts of my applications, but now it seems to have stopped working as well. JSFIDDLE <script> $(fun ...

javascriptjqueryhtmlcorsyql

Knockout.js Introduction - Identifying the Reason for Data Binding Failure

Trying out the most basic example of Knockout.js as showcased on their documentation page: I've followed the documentation instructions to set everything up correctly, and there are no errors showing on the page. However, the span that should display ...

javascriptjqueryknockout.js

Using Svelte to effectively connect to a specified object within an array

Check out this code snippet: <script> let data = [ {id: 1, first: "x"}, {id: 2, second: "y"} ]; </script> <input type="text" bind:value={data.first}/> If you modify the value in the input field and ...

javascripthtmlsveltesveltekitsvelte-component

Interactive tooltip feature in Apexchart

I need to include % in my Apexcharts tooltip after the Y value. Working with vue.js and without official documentation from apexchart, I managed to make it function correctly. This is what I have accomplished so far: data: function () { return { ...

javascriptvue.jsapexcharts

Expo running into issues with recognizing .jsx files when using Jest

I'm encountering an issue with running jest to execute its test suite on .jsx files within my Expo project. Here is my babel.config.js: module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; ...

javascriptreactjsreact-nativejestjsexpo

Beginning external plugin in Angular 4 application

Is it possible to incorporate an external plugin into an Angular 4 application? I am looking to utilize the niceScroll plugin for a scrollable div, which is defined within a component. <div class="d-flex" id="scrollable"> <app-threads-list> ...

javascriptangularnicescroll

What is the best way to implement Bootstrap 5 jQuery plugins in an ES6 project with Webpack?

Currently in the process of transitioning an ES6 project from Bootstrap 4 to Bootstrap 5, encountering the following error: Error: Uncaught TypeError: bootstrapElement.Tooltip is not a function According to the Migration Notes, Bootstrap 5 no longer inc ...

javascriptwebpackbootstrap-5

Getting a Next.js error after performing a hard refresh on a page that contains a dynamic query

I have encountered an issue with my Next.js app when I attempt to hard reload it in production mode. The error message I receive is 404 - File or directory not found. Below is the code snippet I am using: import { useRouter } from "next/router"; import ...

javascriptreactjsnext.jsserver-side-rendering

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

javascriptjqueryhtmlajaxobject

Creating a JavaScript script to implement a CAPTCHA feature on Google Forms

I'm looking to implement a JavaScript solution that can prevent spam on Google Forms. The idea is as follows: Generate a random number a between 1 and 1000; Generate another random number b between 1 and 1000; Obtain input from the user, storing it a ...

javascriptjquerycaptchagoogle-forms

Tips for updating multiple documents in a MongoDB database using an array of values

I have a range of Product items in my inventory and when a client places an Order, they submit an array of objects. Each object in the array includes the _id product (objectId) and the quantity they purchased. [ {producId: "dshsdsdh72382377923", quantity: ...

javascriptmongodbmongoose

changing the value of a global variable from inside a function

Currently, I am working with Vue in an attempt to assign values to checkboxes. Below is the code snippet: let variable = false; export default { name: "nyle-home", created() { this.notifstate = this.$route.params.data[0].state; ...

javascriptvue.jsvariablesparametersglobal-variables

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss