Hello 小伙伴們，如果覺得本文還不錯，記得給個 star ， 小伙伴們的 star 是我持續(xù)更新的動力！GitHub 地址
簡介
全景圖分兩種
由六張正方形圖片組成的SkyBox
一整張的寬高比為2比1的全景圖片。
今天我就實(shí)現(xiàn)一整張全景圖的案例。
思路
我們超贊的設(shè)計師畫的中秋全景圖（利用透視網(wǎng)格輔助PS繪制）
創(chuàng)建一個球體網(wǎng)格，對網(wǎng)格進(jìn)行x軸反轉(zhuǎn)，使所有的面點(diǎn)向內(nèi)
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
使用上面的全景貼圖創(chuàng)建基礎(chǔ)材質(zhì)
let material = new THREE.MeshBasicMaterial({? ?
????map: new THREE.TextureLoader().load('panorama.jpg'),? ?
????depthTest:false//此參數(shù)控制是否使用像素深度來計算新像素的值
});
let mesh = new THREE.Mesh( geometry, material );scene.add( mesh );
把相機(jī)設(shè)置為球的中心點(diǎn)
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);
陀螺儀相機(jī)控制器，實(shí)現(xiàn)移動端陀螺儀控制相機(jī)
let controls = new THREE.DeviceOrientationControls( camera );
此時還沒有動畫效果，還需要增加一個實(shí)時更新渲染動畫
function animate() {? ?
????render();? ?
????requestAnimationFrame(animate);
}
function render() {? ?
????//更新控制器? ?
????controls.update();? ?
????camera.lookAt( camera.target );? ?
????renderer.render(scene, camera);
}
簡單案例代碼
相機(jī)
直接上圖，常規(guī)的全景漫游的進(jìn)場效果：
左邊是效果，右邊是相機(jī)輔助效果。
思路分析
相機(jī)起始在球體接近頂部位置，從上往下看
let camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set(0, 450, 0);//相機(jī)定位在y軸450
camera.target = new THREE.Vector3( 0, -500, 0 );//設(shè)置目標(biāo)點(diǎn)
camera.lookAt( camera.target );//看向y軸負(fù)方向
相機(jī)有上往下移動到求的中心點(diǎn)(0, 0, 0)。同時，相機(jī)目標(biāo)點(diǎn)從底部(0, -500, 0)轉(zhuǎn)到背面(0, 0, -500)。把fov從150調(diào)整為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();? ?
})
進(jìn)場案例代碼
