three.js全景漫游实践前端

Hello 小伙伴们，如果觉得本文还不错，记得给个 star ，小伙伴们的 star 是我持续更新的动力！GitHub 地址
简介
全景图分两种

由六张正方形图片组成的SkyBox
一整张的宽高比为2比1的全景图片。

今天我就实现一整张全景图的案例。
思路
我们超赞的设计师画的中秋全景图（利用透视网格辅助PS绘制）

文章图片

创建一个球体网格，对网格进行x轴反转，使所有的面点向内

let geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.scale( -1, 1, 1 );

使用上面的全景贴图创建基础材质

let material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load( 'panorama.jpg'), depthTest: false//此参数控制是否使用像素深度来计算新像素的值 }); let mesh = new THREE.Mesh( geometry, material ); scene.add( mesh );

把相机设置为球的中心点

let camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 1100 ); camera.target = new THREE.Vector3( 0, 0, 0 ); camera.position.set(0, 0, 0);

陀螺仪相机控制器，实现移动端陀螺仪控制相机

let controls = new THREE.DeviceOrientationControls( camera );

【three.js全景漫游实践】此时还没有动画效果，还需要增加一个实时更新渲染动画

function animate() { render(); requestAnimationFrame(animate); } function render() { //更新控制器 controls.update(); camera.lookAt( camera.target ); renderer.render(scene, camera); }

简单案例代码

DEMO: http://songdy.github.io/panorama/simple-index.html

这就简单实现了一个全景图，贴出以上的全部代码

简单的全景图 - 锐客网

相机
直接上图，常规的全景漫游的进场效果：

左边是效果，右边是相机辅助效果。
思路分析相机起始在球体接近顶部位置，从上往下看

let camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.set(0, 450, 0); //相机定位在y轴450 camera.target = new THREE.Vector3( 0, -500, 0 ); //设置目标点 camera.lookAt( camera.target ); //看向y轴负方向

相机有上往下移动到求的中心点(0, 0, 0)。同时，相机目标点从底部(0, -500, 0)转到背面(0, 0, -500)。把fov从150调整为100，效果更赞了。

new TWEEN.Tween( { y : 450, lat : 0, fov : 150 } ) .to( { y : 0, lat : 90, fov : 100 }, 2500 ) .onUpdate(function() { camera.position.y = this.y; let phi = THREE.Math.degToRad( this.lat ); camera.target.y = -500 * Math.cos( phi ); camera.target.z = -500 * Math.sin( phi ); camera.fov = this.fov; camera.updateProjectionMatrix(); })

进场案例代码