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

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

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

下載代碼

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

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

這次講解的demo是用css3DRender來構(gòu)建一個正方體的全景場景

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

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

每個面都貼上我們場景的一個面，那么當鏡頭轉(zhuǎn)動時看到的就是置身其中的全景

詳細理論的東西以后再說，這次先跑起來一個簡單的demo吧

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

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

html這邊沒什么特別的，首先把每個面放進去，用div把每個面的圖片放進去。

沒有用官網(wǎng)demo的實現(xiàn)方式是因為官網(wǎng)是create一個img插入到頁面，我們在對每個面添加元素的時候不太方便

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

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

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

scene = new THREE.Scene();

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

那這里稍微解釋一下這兩個類

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

大概意思：
這是一個模仿人眼的投影模式，它是用于渲染3D場景最常見的投影模式。
總之這個類就是new一個鏡頭
下面是樣例代碼

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

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

圖片來源：https://isux.tencent.com/3d.html

分別表示的
鏡頭夾角，寬高比，最近焦距，最遠焦距

接下來，用Scene類創(chuàng)建場景
以下官方說明

這東西創(chuàng)建了一個場景，這個場景允許你對某個東西某個位置通過threeJs渲染場景

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

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

position三個參數(shù)分別對應(yīng)的x,y,z軸的位置
因為我選的面寬度是1024px
所以位置是基于中心點的正負1024/2

rotation的三個參數(shù)分貝對應(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ù)六個面的信息，new出六個對象放入場景中
 */
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 );

}

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

沒有文檔我們看一下代碼

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);

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

這個類就是一個定義對象的基本類，其中new的對象包含以下兩個屬性

.position

The object"s local position.

.rotation

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

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

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

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

在這里只是new了這個類和設(shè)置了寬高
但是CSS3DRender在這里還沒有開始渲染頁面

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 );

這里的事件綁定就不詳細說了
接下來解析一下渲染時的代碼

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 );
    /**
     * 通過傳入的scene和camera
     * 獲取其中object在創(chuàng)建時候傳入的element信息
     * 以及后面定義的包括位置，角度等信息
     * 根據(jù)場景中的obj創(chuàng)建dom元素
     * 插入render本身自己創(chuàng)建的場景div中
     * 達到渲染場景的效果
     */
    renderer.render( scene, camera );

}

requestAnimationFrame( animate );
這個方法可以根據(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)成的（通過手指滑動或鼠標滑動實時更新的）屬性值，調(diào)整camera鏡頭的位置

renderer.render( scene, camera );

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

通過傳入的scene和camera

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

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

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

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

達到渲染場景的效果

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