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
Post a Comment