VR俯冲旋转镜头动画

最近在开发VR项目,看到这个房产网站的旋转加载动画不错 房产网站加载动画,于是参考这篇全景图转小行星视角投影原理详解研究了一下原理,写了一个js的demo

项目地址
线上预览地址

实现思路:

1.首先这个动画是一个球面展开, 先新建一个球形,然后给他贴上纹理

  let geometry = new THREE.SphereBufferGeometry(7000, 60, 60);
  geometry.scale(1, 1, -1);
  let texture = new THREE.TextureLoader().load('textures/1.jpg');
  let material = new THREE.MeshBasicMaterial({ map: texture });
  let mesh = new THREE.Mesh(geometry, material);
 mesh.position.set(2000, 0, 0)

注意这里的 geometry.scale(1, 1, -1); 这是把z轴的法线取反,这样我们在球体的外面就可以观察他了

2. 然后将摄像机坐标点放置在球体的北极,视角设置成140大视域

   camera = new THREE.PerspectiveCamera(
                140,
                window.innerWidth / window.innerHeight,
                0.1,
                20000
            );
 camera.position.set(2000, 7000, 0);

此时一个大视角的俯瞰动画就基本实现了

俯瞰效果图

3.最后一步,使用TweenMax给他添加上动画, 使fov逐渐减小,视域逐渐收缩变窄,回归正常,同时使相机的x,y坐标不断趋近于0,来到球体内部的中心点,做出一种俯冲的的感觉

    setTimeout(() => {
                TweenMax.to(camera.position, 4, {
                    x: 0, y: 0, z: 400, ease: 'Circ.easeOut',
                    onUpdate() {
                        if (camera.fov > 90) {
                            camera.fov -= 0.1
                        }
                        camera.updateProjectionMatrix();
                    }
                })
            }, 2000)

Circ.easeOut是圆形平滑,淡出会比较自然,onUpdate函数会在TweenMax执行时不断调用, 注意相机参数变化后要马上调用 camera.updateProjectionMatrix();来更新视图

这样一个VR旋转视图动画就做好了 线上预览地址