A ideia Link para o cabeçalho
No post de hoje eu gostaria de demonstrar como fazer o efeito 3D dolly zoom effect utilizando a three.js.
Antes de irmos para a parte do código, eu vou deixar o link do vídeo onde eu vi o efeito. O vídeo também fala de outros efeitos e eu vou deixar marcado em dois pontos importantes para explicar o efeito posteriormente.
O código [no Github] Link para o cabeçalho
Inicialmente nós temos que fazer o setup da cena como no código abaixo. Esse código, cria a cena com um plano, uma esfera e cinco cubos. Com os objetos necessários criados, podemos trabalhar com os dois componentes do efeito, o movimento e o zoom.
O movimento da câmera (tag Movimento no vídeo acima) pode ser feito facilmente apenas movendo a câmera em direção ao nosso objeto, ou seja, apenas precisamos mudar as coordenadas da câmera. O zoom (tag Zoom no vídeo acima) trabalha da mesma forma que o movimento, porém para aumentarmos o zoom nós precisamos diminuir o FOV (Field of View) da câmera.
Para que o efeito fique correto, é necessário diminuir o zoom enquanto move a câmera em direção ao objeto e posteriormente aumentar o zoom enquanto move a câmera para longe do objeto. Abaixo está o código de uma função que demonstra o efeito. Neste momento nós temos os dois componentes principais do efeito, o movimento da câmera e o zoom. Agora podemos trabalhar em como realizar o efeito que consiste em aproximar a câmera do objeto enquanto se diminui o campo de visão.
No código acima, o if faz o movimento de aproximação com objeto, movendo a câmera em direção ao objeto e aumentando o FOV. Enquanto o else afasta o objeto, movendo a câmera na direção contrária do objeto e diminuindo o FOV.
Abraços.