溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5實現3D全景的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
整個3D全景所用的相關理論就不多說了，就稍微講一下本案例用到的相關理論
相信程序猿們會更加關注代碼實現的內容
這次講解的demo是用css3DRender來構建一個正方體的全景場景
想象一下，我們需要做的就是構建一個正方體的盒子
然后把鏡頭放在以下這個正方體盒子里
每個面都貼上我們場景的一個面，那么當鏡頭轉動時看到的就是置身其中的全景
詳細理論的東西以后再說，這次先跑起來一個簡單的demo吧
本教學用到兩個庫：
threeJS和基于它的CSS3DRender.js
代碼是從官網上樣例上扒下來做了一點調整。
<!DOCTYPE html>
<html>
<head>
<title>three.js css3d - panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0;
cursor: move;
overflow: hidden;
}
.surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; }
.surface .bg { position: absolute; width: 1026px; height: 1026px; }
</style>
</head>
<body>
<p>
<p id="surface_0" class="surface">
<img class="bg" src="images/posx.jpg" alt="">
</p>
<p id="surface_1" class="surface">
<img class="bg" src="images/negx.jpg" alt="">
</p>
<p id="surface_2" class="surface">
<img class="bg" src="images/posy.jpg" alt="">
</p>
<p id="surface_3" class="surface">
<img class="bg" src="images/negy.jpg" alt="">
</p>
<p id="surface_4" class="surface">
<img class="bg" src="images/posz.jpg" alt="">
</p>
<p id="surface_5" class="surface">
<img class="bg" src="images/negz.jpg" alt="">
</p>
</p>
<script src="js/three.min.js"></script>
<script src="js/CSS3DRenderer.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>html這邊沒什么特別的，首先把每個面放進去，用p把每個面的圖片放進去。
沒有用官網demo的實現方式是因為官網是create一個img插入到頁面，我們在對每個面添加元素的時候不太方便
先把六個面定義好，如果要在每個面上加入一些交互的元素，直接在html上添加dom就可以了
一共就引入了3個js，除了index另外兩個都是壓縮過的js，不用關心，看一下index.js的實現
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); scene = new THREE.Scene();
那么很明顯這兩行代碼，字面上的意思就是創建了一個相機，創建了一個場景。
那這里稍微解釋一下這兩個類
以下是官網的解釋
大概意思：
這是一個模仿人眼的投影模式，它是用于渲染3D場景最常見的投影模式。
總之這個類就是new一個鏡頭
下面是樣例代碼
這個類的構造函數接受四個參數
那么這四個參數具體是什么東西？
分別表示的
鏡頭夾角，寬高比，最近焦距，最遠焦距
接下來，用Scene類創建場景
以下官方說明
這東西創建了一個場景，這個場景允許你對某個東西某個位置通過threeJs渲染場景
創建了場景和相機，我們需要往場景里面放入之前說的正方體
首先定義好六個面的數據，每個面的位置，3D旋轉的旋轉角度。
position三個參數分別對應的x,y,z軸的位置
因為我選的面寬度是1024px
所以位置是基于中心點的正負1024/2
rotation的三個參數分貝對應xyz軸的旋轉角度
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 ]
}
];
/**
* 根據六個面的信息，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
不過這個類不屬于官方類，而是我們引用的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.
分別表示對象的位置和旋轉角度。
那么for循環就是定義六個對象加入場景中
好，我們繼續
renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
這是我們引用的庫里的類
這個類的主要功能是根據three中的場景和鏡頭的相關信息
使用dom元素和css3D的屬性來渲染出來
在這里只是new了這個類和設置了寬高
但是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在創建時候傳入的element信息
* 以及后面定義的包括位置，角度等信息
* 根據場景中的obj創建dom元素
* 插入render本身自己創建的場景p中
* 達到渲染場景的效果
*/
renderer.render( scene, camera );
}requestAnimationFrame( animate );
這個方法可以根據幀速率觸發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 );
這段代碼根據現成的（通過手指滑動或鼠標滑動實時更新的）屬性值，調整camera鏡頭的位置
renderer.render( scene, camera );
然后渲染........
因為render里面的代碼比較多，這里就不貼代碼了，大概總結一下render做的事情就是
首先render自己創建一個作為場景的p
通過傳入的scene和camera
獲取其中object在創建時候傳入的element信息
以及后面定義的包括位置，角度等信息
根據場景中的obj創建dom元素（就是通過dom實現本應在canvas里的東西）
插入render本身自己創建的場景p中
當鏡頭方向變了，獲取到的參數就變了，通過傳入的對象身上帶有的變化的參數改變頁面上dom元素的位置。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5實現3D全景的示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
