javascript - Camera Smoothly Zoom Into Object Position On Mouse Click -


so have scene multiple boxes , perspectivecamera.

i'd achieve effect whenever click on specific box.

  • the camera smoothly transition current position box's position
  • the box centered in camera's viewport
  • the camera smoothly zoom in , focus on box

this effect inspired 100,000 stars. whenever user click on star, camera zoom star , display in center. i'm trying replicate effect.

i'm able grab box's position , @ it. want more , i'm unsure how proceed.

i think need animation, there many animation libraries anime.js , tween.js. have grabbed position after translating, can make animation smooth translation. here snippet tween.js:

var tween2 = new tween.tween(camera.position)                 .to({                     x : target.position.x,                     y : target.position.y,                     z : target.position.z                 } , 1000)                 .easing(tween.easing.linear.none)                 .start(); 

if want locate box on center of camera. need change camera rotation. here way compute target rotation using matrix.

    var rotation_matrix = new three.matrix4();     rotation_matrix.lookat(target_position,target_box.position,camera.up);     var target_rotation = new three.euler(0,0,0,"xyz");     target_rotation.setfromrotationmatrix(rotation_matrix);     //now, target_rotation rotation after translating. 

then, can use same way make animation change rotation.

btw, seems in 100000 stars switch camera in end.


Comments

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

How to understand 2 main() functions after using uftrace to profile the C++ program? -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -