Enhance your camera control experience with seamless transitions on Three.js

Question

Enhance your camera control experience with seamless transitions on Three.js

I've been developing a website that allows users to explore celestial objects in the sky using VRControls and focus on their favorites with Trackball controls, which are activated by clicking on the object. Check out a demo of the project here: https://jsfiddle.net/tushuhei/4f1Lum5n/6/

function smoothTransition (obj, target) {
  var dummyCamera = camera.clone();
  controls = new THREE.TrackballControls(dummyCamera);
  controls.target.set(obj.point.x, obj.point.y, obj.point.z);
  new TWEEN.Tween(camera.position)
    .to(target, 1000)
    .onComplete(function() {
      transitioning = false;
      controls.dispose();
      controls = new THREE.TrackballControls(camera);
      controls.target.set(obj.point.x, obj.point.y, obj.point.z);
  }).start();
}

While TWEEN effectively handles transitions between WebVR and Trackball modes, I'm encountering a slight gap at the end of the transition. This discrepancy seems to stem from fluctuations in the camera's rotation during the completion phase.

Does anyone know of a method to ensure a seamless transition between two different camera controls, taking into account both position and rotation?

Thanks,

javascript 3d three.js webvr

Answer 1

Answer №1

Your approach with dummyCamera was on the right path. To achieve the desired effect, you need to obtain the final quaternion and interpolate between the initial and final quaternions while the tween handles the position transition.

// Store the initial quaternion for slerp interpolation.
var startQuaternion = camera.quaternion.clone();

// Create a cloned dummy camera for applying tracking controls
// to get the final quaternion.
var dummyCamera = camera.clone();
dummyCamera.position.set(target.x, target.y, target.z);
var dummyControls = new THREE.TrackballControls(dummyCamera);
dummyControls.target.set(obj.point.x, obj.point.y, obj.point.z);
dummyControls.update();

// Disable VR controls to avoid conflict with camera control 
// during tween animation.
controls.dispose();
controls = null;

new TWEEN.Tween(camera.position)
.to(target, 1000)
.onUpdate(function (timestamp){
  // Interpolate the camera quaternion using slerp. 
  // timestamp represents the eased time value from the tween.
  THREE.Quaternion.slerp(
    startQuaternion, dummyCamera.quaternion, camera.quaternion, timestamp);
})
.onComplete(function() {
  controls = new THREE.TrackballControls(camera);
  controls.target.set(obj.point.x, obj.point.y, obj.point.z);
}).start();

https://jsfiddle.net/4f1Lum5n/10/

It's worth noting that your current implementation may cause discomfort for VR users due to loss of control over their point of view. Consider placing the user on a ship or platform and animating the platform instead to allow continuous camera control by the user.

Answer 2

Your approach with dummyCamera was on the right path. To achieve the desired effect, you need to obtain the final quaternion and interpolate between the initial and final quaternions while the tween handles the position transition.

// Store the initial quaternion for slerp interpolation.
var startQuaternion = camera.quaternion.clone();

// Create a cloned dummy camera for applying tracking controls
// to get the final quaternion.
var dummyCamera = camera.clone();
dummyCamera.position.set(target.x, target.y, target.z);
var dummyControls = new THREE.TrackballControls(dummyCamera);
dummyControls.target.set(obj.point.x, obj.point.y, obj.point.z);
dummyControls.update();

// Disable VR controls to avoid conflict with camera control 
// during tween animation.
controls.dispose();
controls = null;

new TWEEN.Tween(camera.position)
.to(target, 1000)
.onUpdate(function (timestamp){
  // Interpolate the camera quaternion using slerp. 
  // timestamp represents the eased time value from the tween.
  THREE.Quaternion.slerp(
    startQuaternion, dummyCamera.quaternion, camera.quaternion, timestamp);
})
.onComplete(function() {
  controls = new THREE.TrackballControls(camera);
  controls.target.set(obj.point.x, obj.point.y, obj.point.z);
}).start();

https://jsfiddle.net/4f1Lum5n/10/

It's worth noting that your current implementation may cause discomfort for VR users due to loss of control over their point of view. Consider placing the user on a ship or platform and animating the platform instead to allow continuous camera control by the user.

Enhance your camera control experience with seamless transitions on Three.js

Answer №1

Similar questions

A Guide to Dynamically Updating Page Titles Using JavaScript in a Ruby on Rails Application

Update a specific element within Angular framework

Is there a way to specifically execute a Mongoose validate function solely for the create user page and not the edit user page?

Having issues with Phonegap's getPhoto functionality

The functionality of my LinkButton activates a code sequence only when clicked twice during its Click event

What is the best way to write an SQL query to safely insert a record into a table with a dynamic name?

Sorting elements to the beginning of each nested array

The validation process is malfunctioning

Methods for retrieving a file within a nodejs project from another file

Setting a value for the identifier just one time

When removing a react component from the list, it results in the deletion of all other components within the same

Find the frequency of a specific string within a JSON array

Local error when attempting to export a node module

Updating Material-UI DataGrid Component with Fresh State Information

Having trouble locating the CSS and JavaScript files within my Spring Maven project

While conducting tests on a Vue single file component, Jest came across an unforeseen token

How can one efficiently manage a large number of images on a website in a clever way?

What is the best way to retrieve a Promise from a store.dispatch within Redux-saga in order to wait for it to resolve before rendering in SSR?

Mobile Size Setting

How does a web worker behave when the owner is not actively engaged?