Can orbit controls be tweened in three.js?

When utilizing the TWEEN function within three.js, I have noticed that it is mainly used for tweening objects.

Although I can successfully tween the camera's position, I am looking to also tween the orbit control to mimic following a target while the camera is on a dolly.

Currently, the camera position is being tweened with the following code:

var xTarget = 0;
var yTarget = 0;
var zTarget = 0;

function setupCamTween(xTarget, yTarget, zTarget){

var update = function(){
camera.position.x = current.x;
camera.position.y = current.y;
camera.position.z = current.z;

}   

TWEEN.removeAll();

var current = { x: myCameraX, y: myCameraY, z: myCameraZ };
var target = { x: xTarget, y: yTarget, z: zTarget};

console.log("moving cam");

var camTween = new TWEEN.Tween(current).to(target, 1000);
camTween.easing(TWEEN.Easing.Quadratic.InOut);

camTween.start();

camTween.onUpdate(function(){
camera.position.x = current.x;
camera.position.y = current.y;
camera.position.z = current.z;

});     
}
setupCamTween(0, 900, 4000);

After setting the camera position, I proceed to adjust the target on the orbit using this code:

controls.target.set(0, myCameraY, 2000);
controls.update();

However, when I execute this, the camera tweens to the location and then abruptly jumps to the target controls point.

To eliminate this abrupt jump when the orbit control is set, I formulated a function to tween the orbit control as follows:

function orbitCam(){

var update = function(){
controls.target.x = current.x;
controls.target.y = current.y;
controls.target.z = current.z;
}
//TWEEN.removeAll();

var current = { x: myCameraX, y: myCameraY, z: myCameraZ };
var target = { x: 0, y: 200, z: 0};

var orbitTween = new TWEEN.Tween(current).to(target, 2000);
orbitTween.easing(TWEEN.Easing.Quadratic.InOut);

orbitTween.onUpdate(function(){
controls.target.set.x = current.x;
controls.target.set.y = current.y;
controls.target.set.z = current.z;

}); 

}

However, when I invoke this function, it does not produce any noticeable effect. I am thus exploring the possibility of tweening the setting of the target for the orbit control. Any guidance on this matter would be greatly appreciated.

In my animation function, I am calling the controls update:

function animate() {

requestAnimationFrame( animate );

TWEEN.update();

controls.update();

}

Although I managed to make the following code work, I am faced with the drawback of losing all orbit control after the target has been set:

var xTarget = 0;
var yTarget = 0;
var zTarget = 0;
var tweenDuration = 0;

function setupCamTween(xTarget, yTarget, zTarget, tweenDuration){

var update = function(){
camera.position.x = current_position.x;
camera.position.y = current_position.y;
camera.position.z = current_position.z;
controls.target.x = current_target.x;
controls.target.y = current_target.y;
controls.target.z = current_target.z;

}   

//TWEEN.removeAll();

var current_position = { x: myCameraX, y: myCameraY, z: myCameraZ };
var target = { x: xTarget, y: yTarget, z: zTarget};

var current_target = { x: myCameraX, y: myCameraY, z: myCameraZ };
var new_target = { x: xTarget, y: yTarget, z: zTarget};

console.log("moving cam");

var camTween = new TWEEN.Tween(current_position).to(target, tweenDuration);
camTween.easing(TWEEN.Easing.Quadratic.InOut);  
camTween.start();

var targetTween = new TWEEN.Tween(current_target).to(new_target, tweenDuration);
targetTween.easing(TWEEN.Easing.Quadratic.InOut);   
targetTween.start();

camTween.onUpdate(function(){
camera.position.x = current_position.x;
camera.position.y = current_position.y;
camera.position.z = current_position.z;

}); 

targetTween.onUpdate(function(){
controls.target.x = controls.object.position.x;
controls.target.y = controls.object.position.y;
controls.target.z = controls.object.position.z;
controls.target.x = current_target.x;
controls.target.y = current_target.y;
controls.target.z = current_target.z;

});

}

Answer №1

The code has been successfully streamlined for optimal functionality. The root of the problem was the camera position z value being set to the controls target z, causing an issue with the orbit control.

Below is the simplified approach for panning the camera with a tween. This particular function is triggered by a mouse down event in the code.

        var xTarget=0;
        var yTarget=0;
        var zTarget=0;
        var tweenDuration=0;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          TWEEN.removeAll();

          var camNewPosition= { x : xTarget, y : yTarget, z : zTarget};
          var targetNewPos = {x : xTarget, y : yTarget, z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start();
    }

        function animate() { //invoke this function initially

            requestAnimationFrame( animate );

            TWEEN.update();

            controls.update();


        }
panCam(500,200,4000,1000);  //This action pans the camera to x: 500, y: 200, z: 4000 in 1 second.

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

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

Discover how to access the rotation of an object within ThreeJS based on

Currently in my code, I have implemented rotation restrictions around a specific axis using the following snippet: if (obj.rotation.x > -0.5) { // execute rotation } Initially, this setup worked perfectly. However, things took a turn when I introd ...

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

React-Redux Error: The function this.props.AppendCharacter is not defined

I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

Various Utilizations through a Single Alexa Skill

In my skill SkillIntent, when asked about a specific game, it provides the description of that skill. Now, I want it to also inform WHO has that Skill when asked differently. Below is the code snippet: 'use strict'; var AlexaSkill = require(&a ...

Establishing the initial value of a <select> element

My webpage features a table that displays the details of past order history, with columns for Order, Date, and Review. For the Review column, I am seeking to add a select dropdown with various options. Upon the initial page load, I would like the select d ...

I am trying to showcase a collection of images on my homepage, but unfortunately, it is not functioning as expected

Does anyone know how to display images using Angular? I am currently utilizing the pic controller in an AngularJS file. Any assistance would be greatly appreciated. HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

sharing AMD modules between multiple files

As of now, I am in the process of constructing the Ember.SimpleAuth library - a tool designed for facilitating authentication and authorization within Ember.js applications (https://github.com/simplabs/ember-simple-auth/tree/sub-packages). This library pro ...

Unallocated functions found within Web Sockets Objects

I am currently utilizing javascript (p5.js) in combination with node.js using express and socket.io. Within my code, I believe the issue lies within this specific section: for (var i = 0; i < 3; i ++){ for (var j = 0; j < 3; j ++){ ...

Angular2 (RC5) global variables across the application

I am seeking a solution to create a global variable that can be accessed across different Angular2 components and modules. I initially considered utilizing dependency injection in my `app.module` by setting a class with a property, but with the recent angu ...

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

What is the best way to save request URLs in JavaScript while following the DRY principle?

Is there a standard practice in JavaScript for storing the URLs of endpoints used in AJAX applications? Would you, for instance, consider creating a "Service" class to encapsulate the URLs? ...

Trouble generating document with Firebase setDoc()

In my current project, I am successfully creating a new user with authentication and then using the generated UID to create a new document. Here is the code snippet: const currentUser = await auth.createUserWithEmailAndPassword(email, pass); consol ...

React: Struggling to retrieve the current inputbox event value

I have encountered an issue while working on a customized input box in react. Despite my efforts, I am unable to access the current event value. Here is the relevant code snippet: Parent Component:---------------------------------------------------------- ...

Is it necessary to have a strong understanding of JavaScript in order to effectively utilize jQuery?

While I currently do not have knowledge of JavaScript, I am intending to acquire it soon. My query is whether a strong grasp of JavaScript is necessary to utilize jQuery effectively. I am already familiar with ActionScript and PHP, which share certain si ...

Comparing Arrays with jQuery

I am currently working on a tic-tac-toe project that involves a simple 3x3 grid. I have been storing the index of each selected box in an array for each player. However, I am facing difficulty in comparing my player arrays with the winner array to determin ...

Creating a JavaScript function to imitate the pressing of the Enter

I am attempting to mimic the pressing of the Enter key using JavaScript within a specific TextArea. Below is the code I have written: function enter1() { var keyboardEvent = document.createEvent('KeyboardEvent'); var initMethod = ...

What is the best way to display the Edit and Delete buttons in a single column?

Currently, I am encountering a small issue. I am trying to display Edit and Delete Buttons in the same column but unfortunately, I am unable to achieve that. Let me provide you with my code. var dataTable; $(document).ready(function () { dataTa ...

Show a pop-up notification when the mouse passes over a word in the text

I've been grappling with this issue for days now and could really use some guidance. Despite scouring the web, I'm unsure if I've approached it correctly. What I'm trying to achieve is having an alert box pop up each time a user hovers ...