摘要：前言在現(xiàn)在市面上很多全景的環(huán)境下，要實(shí)現(xiàn)全景的方式有很多，可以用直接構(gòu)建也可以用基于的庫(kù)來(lái)實(shí)現(xiàn)，還有很多別的制作全景的軟件使用本教學(xué)適用于未開(kāi)發(fā)過(guò)全景的工程獅如果覺(jué)得內(nèi)容太無(wú)聊可以直接跳到最后下載代碼理論整個(gè)全景所用的相關(guān)理論就不多說(shuō)了，就

在現(xiàn)在市面上很多全景H5的環(huán)境下，要實(shí)現(xiàn)全景的方式有很多，可以用css3直接構(gòu)建也可以用基于threeJs的庫(kù)來(lái)實(shí)現(xiàn)，還有很多別的制作全景的軟件使用
本教學(xué)適用于未開(kāi)發(fā)過(guò)3D全景的工程獅

如果覺(jué)得內(nèi)容太無(wú)聊可以直接跳到最后

下載代碼

整個(gè)3D全景所用的相關(guān)理論就不多說(shuō)了，就稍微講一下本案例用到的相關(guān)理論

相信程序猿們會(huì)更加關(guān)注代碼實(shí)現(xiàn)的內(nèi)容

這次講解的demo是用css3DRender來(lái)構(gòu)建一個(gè)正方體的全景場(chǎng)景

想象一下，我們需要做的就是構(gòu)建一個(gè)正方體的盒子

然后把鏡頭放在以下這個(gè)正方體盒子里

每個(gè)面都貼上我們場(chǎng)景的一個(gè)面，那么當(dāng)鏡頭轉(zhuǎn)動(dòng)時(shí)看到的就是置身其中的全景

詳細(xì)理論的東西以后再說(shuō)，這次先跑起來(lái)一個(gè)簡(jiǎn)單的demo吧

本教學(xué)用到兩個(gè)庫(kù)：
threeJS和基于它的CSS3DRender.js

代碼是從官網(wǎng)上樣例上扒下來(lái)做了一點(diǎn)調(diào)整。

html這邊沒(méi)什么特別的，首先把每個(gè)面放進(jìn)去，用div把每個(gè)面的圖片放進(jìn)去。

沒(méi)有用官網(wǎng)demo的實(shí)現(xiàn)方式是因?yàn)楣倬W(wǎng)是create一個(gè)img插入到頁(yè)面，我們?cè)趯?duì)每個(gè)面添加元素的時(shí)候不太方便

先把六個(gè)面定義好，如果要在每個(gè)面上加入一些交互的元素，直接在html上添加dom就可以了

一共就引入了3個(gè)js，除了index另外兩個(gè)都是壓縮過(guò)的js，不用關(guān)心，看一下index.js的實(shí)現(xiàn)

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

scene = new THREE.Scene();

那么很明顯這兩行代碼，字面上的意思就是創(chuàng)建了一個(gè)相機(jī)，創(chuàng)建了一個(gè)場(chǎng)景。

那這里稍微解釋一下這兩個(gè)類(lèi)

以下是官網(wǎng)的解釋

大概意思：
這是一個(gè)模仿人眼的投影模式，它是用于渲染3D場(chǎng)景最常見(jiàn)的投影模式。
總之這個(gè)類(lèi)就是new一個(gè)鏡頭
下面是樣例代碼

這個(gè)類(lèi)的構(gòu)造函數(shù)接受四個(gè)參數(shù)

那么這四個(gè)參數(shù)具體是什么東西？

圖片來(lái)源：https://isux.tencent.com/3d.html

分別表示的
鏡頭夾角，寬高比，最近焦距，最遠(yuǎn)焦距

接下來(lái)，用Scene類(lèi)創(chuàng)建場(chǎng)景
以下官方說(shuō)明

這東西創(chuàng)建了一個(gè)場(chǎng)景，這個(gè)場(chǎng)景允許你對(duì)某個(gè)東西某個(gè)位置通過(guò)threeJs渲染場(chǎng)景

創(chuàng)建了場(chǎng)景和相機(jī)，我們需要往場(chǎng)景里面放入之前說(shuō)的正方體

首先定義好六個(gè)面的數(shù)據(jù)，每個(gè)面的位置，3D旋轉(zhuǎn)的旋轉(zhuǎn)角度。

position三個(gè)參數(shù)分別對(duì)應(yīng)的x,y,z軸的位置
因?yàn)槲疫x的面寬度是1024px
所以位置是基于中心點(diǎn)的正負(fù)1024/2

rotation的三個(gè)參數(shù)分貝對(duì)應(yīng)xyz軸的旋轉(zhuǎn)角度
Math.PI/2代表90度

var sides = [
    {
        position: [ -512, 0, 0 ],//位置
        rotation: [ 0, Math.PI / 2, 0 ]//角度
    },
    {
        position: [ 512, 0, 0 ],
        rotation: [ 0, -Math.PI / 2, 0 ]
    },
    {
        position: [ 0,  512, 0 ],
        rotation: [ Math.PI / 2, 0, Math.PI ]
    },
    {
        position: [ 0, -512, 0 ],
        rotation: [ - Math.PI / 2, 0, Math.PI ]
    },
    {
        position: [ 0, 0,  512 ],
        rotation: [ 0, Math.PI, 0 ]
    },
    {
        position: [ 0, 0, -512 ],
        rotation: [ 0, 0, 0 ]
    }
];

/**
 * 根據(jù)六個(gè)面的信息，new出六個(gè)對(duì)象放入場(chǎng)景中
 */
for ( var i = 0; i < sides.length; i ++ ) {

    var side = sides[ i ];

    var element = document.getElementById("surface_"+i);
    element.width = 1026; // 2 pixels extra to close the gap.多余的2像素用于閉合正方體

    var object = new THREE.CSS3DObject( element );
    object.position.fromArray( side.position );
    object.rotation.fromArray( side.rotation );
    scene.add( object );

}

那么這里有一個(gè)新出現(xiàn)的類(lèi)CSS3DObject
不過(guò)這個(gè)類(lèi)不屬于官方類(lèi)，而是我們引用的3DRender庫(kù)里的類(lèi)

沒(méi)有文檔我們看一下代碼

THREE.CSS3DObject = function (element) {
    THREE.Object3D.call(this);
    this.element = element;
    this.element.style.position = "absolute";
    this.addEventListener("removed", function (event) {
        if (this.element.parentNode !== null) {
            this.element.parentNode.removeChild(this.element);
            for (var i = 0, l = this.children.length; i < l; i++) {
                this.children[i].dispatchEvent(event)
            }
        }
    })
}
;
THREE.CSS3DObject.prototype = Object.create(THREE.Object3D.prototype);

可以看出這是一個(gè)繼承于THREE.Object3D的類(lèi)
將傳入的element的postion改為絕對(duì)定位，然后加了個(gè)被移除時(shí)的事件。
沒(méi)有定義什么別的特別的東西，那么我們查一下官方Object3D的類(lèi)

這個(gè)類(lèi)就是一個(gè)定義對(duì)象的基本類(lèi)，其中new的對(duì)象包含以下兩個(gè)屬性

.position

The object"s local position.

.rotation

Object"s local rotation (see Euler angles), in radians.

分別表示對(duì)象的位置和旋轉(zhuǎn)角度。
那么for循環(huán)就是定義六個(gè)對(duì)象加入場(chǎng)景中
好，我們繼續(xù)

renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

這是我們引用的庫(kù)里的類(lèi)
這個(gè)類(lèi)的主要功能是根據(jù)three中的場(chǎng)景和鏡頭的相關(guān)信息
使用dom元素和css3D的屬性來(lái)渲染出來(lái)

在這里只是new了這個(gè)類(lèi)和設(shè)置了寬高
但是CSS3DRender在這里還沒(méi)有開(kāi)始渲染頁(yè)面

document.addEventListener( "mousedown", onDocumentMouseDown, false );
document.addEventListener( "wheel", onDocumentMouseWheel, false );

document.addEventListener( "touchstart", onDocumentTouchStart, false );
document.addEventListener( "touchmove", onDocumentTouchMove, false );

window.addEventListener( "resize", onWindowResize, false );

這里的事件綁定就不詳細(xì)說(shuō)了
接下來(lái)解析一下渲染時(shí)的代碼

animate();

function animate() {

    requestAnimationFrame( animate );

    // lat +=  0.1;
    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );

    target.x = Math.sin( phi ) * Math.cos( theta );
    target.y = Math.cos( phi );
    target.z = Math.sin( phi ) * Math.sin( theta );

    camera.lookAt( target );
    /**
     * 通過(guò)傳入的scene和camera
     * 獲取其中object在創(chuàng)建時(shí)候傳入的element信息
     * 以及后面定義的包括位置，角度等信息
     * 根據(jù)場(chǎng)景中的obj創(chuàng)建dom元素
     * 插入render本身自己創(chuàng)建的場(chǎng)景div中
     * 達(dá)到渲染場(chǎng)景的效果
     */
    renderer.render( scene, camera );

}

requestAnimationFrame( animate );
這個(gè)方法可以根據(jù)幀速率觸發(fā)animate方法。

lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );

    target.x = Math.sin( phi ) * Math.cos( theta );
    target.y = Math.cos( phi );
    target.z = Math.sin( phi ) * Math.sin( theta );

    camera.lookAt( target );

這段代碼根據(jù)現(xiàn)成的（通過(guò)手指滑動(dòng)或鼠標(biāo)滑動(dòng)實(shí)時(shí)更新的）屬性值，調(diào)整camera鏡頭的位置

renderer.render( scene, camera );

然后渲染........
因?yàn)閞ender里面的代碼比較多，這里就不貼代碼了，大概總結(jié)一下render做的事情就是
首先render自己創(chuàng)建一個(gè)作為場(chǎng)景的div

通過(guò)傳入的scene和camera

獲取其中object在創(chuàng)建時(shí)候傳入的element信息
以及后面定義的包括位置，角度等信息

根據(jù)場(chǎng)景中的obj創(chuàng)建dom元素（就是通過(guò)dom實(shí)現(xiàn)本應(yīng)在canvas里的東西）

插入render本身自己創(chuàng)建的場(chǎng)景div中

當(dāng)鏡頭方向變了，獲取到的參數(shù)就變了，通過(guò)傳入的對(duì)象身上帶有的變化的參數(shù)改變頁(yè)面上dom元素的位置。

達(dá)到渲染場(chǎng)景的效果

鏈接: http://pan.baidu.com/s/1eR2Rlb8 密碼: sdyt