這篇文章主要介紹了HTML5實現(xiàn)3D全景的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為湯旺企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計，湯旺網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

理論

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

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

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

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

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

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

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

demo解析

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

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

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

沒有用官網(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)建了一個場景。

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

PerspectiveCamera

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

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

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

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

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

Scene

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

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

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

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

position三個參數(shù)分別對應(yīng)的x,y,z軸的位置
因為我選的面寬度是1024px
所以位置是基于中心點的正負(fù)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 );

}

CSS3DObject

那么這里有一個新出現(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的類

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

CSS3DRenderer

這是我們引用的庫里的類
這個類的主要功能是根據(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 );

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

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)建的場景p中
     * 達(dá)到渲染場景的效果
     */
    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)成的（通過手指滑動或鼠標(biāo)滑動實時更新的）屬性值，調(diào)整camera鏡頭的位置

renderer.render( scene, camera );

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

通過傳入的scene和camera

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5實現(xiàn)3D全景的示例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!