導讀

本文從繪圖基礎開始講起，詳細介紹瞭如何使用Three.js開發一個功能齊全的全景插件。

我們先來看一下插件的效果：

如果你對Three.js已經很熟悉了，或者你想跳過基礎理論，那麼你可以直接從全景預覽開始看起。

本項目的github地址：https://github.com/ConardLi/tpanorama

#一、理清關係

#1.1 OpenGL

OpenGL是用於渲染2D、3D量圖形的跨語言、跨平臺的應用程序編程接口（API）。

這個接口由近350個不同的函數調用組成，用來從簡單的圖形比特繪製複雜的三維景象。

OpenGL ES 是OpenGL三維圖形API的子集，針對手機、PDA和遊戲主機等嵌入式設備而設計。

基於OpenGL，一般使用C或Cpp開發，對前端開發者來說不是很友好。

#1.2 WebGL

WebGL把JavaScript和OpenGL ES 2.0結合在一起，從而為前端開發者提供了使用JavaScript編寫3D效果的能力。

WebGL為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。

#1.3 Canvas

Canvas是一個可以自由制定大小的矩形區域，可以通過JavaScript可以對矩形區域進行操作，可以自由的繪製圖形，文字等。

一般使用Canvas都是使用它的2d的context功能，進行2d繪圖，這是其本身的能力。

和這個相對的，WebGL是三維，可以描畫3D圖形，WebGL，想要在瀏覽器上進行呈現，它必須需要一個載體，這個載體就是Canvas，區別於之前的2dcontext，還可以從Canvas中獲取webglcontext。

#1.4 Three.js

我們先來從字面意思理解下：Three代表3D，js代表JavaScript，即使用JavaScript來開發3D效果。

Three.js是使用JavaScript對 WebGL接口進行封裝與簡化而形成的一個易用的3D庫。

直接使用WebGL進行開發對於開發者來說成本相對來說是比較高的，它需要你掌握較多的計算機圖形學知識。

Three.js在一定程度上簡化了一些規範和難以理解的概念，對很多API進行了簡化，這大大降低了學習和開發三維效果成本。

下面我們來具體看一下使用Three.js必須要知道的知識。

#二、Three.js基礎知識

使用Three.js繪製一個三維效果，至少需要以下幾個步驟：

• 創建一個容納三維空間的場景 — Sence
• 將需要繪製的元素加入到場景中，對元素的形狀、材料、陰影等進行設置
• 給定一個觀察場景的位置，以及觀察角度，我們用相機對象（Camera）來控制
• 將繪製好的元素使用渲染器（Renderer）進行渲染，最終呈現在瀏覽器上

拿電影來類比的話，場景對應於整個佈景空間，相機是拍攝鏡頭，渲染器用來把拍攝好的場景轉換成膠捲。

#2.1 場景

場景允許你設置哪些對象被three.js渲染以及渲染在哪裡。

我們在場景中放置對象、燈光和相機。

很簡單，直接創建一個Scene的實例即可。

<code> _scene = new Scene();
/<code>

#2.2 元素

有了場景，我們接下來就需要場景裡應該展示哪些東西。

一個複雜的三維場景往往就是由非常多的元素搭建起來的，這些元素可能是一些自定義的幾何體（Geometry），或者外部導入的複雜模型。

Three.js 為我們提供了非常多的Geometry，例如SphereGeometry（球體）、 TetrahedronGeometry（四面體）、TorusGeometry（圓環體）等等。

在Three.js中，材質（Material）決定了幾何圖形具體是以什麼形式展現的。它包括了一個幾何體如何形狀以外的其他屬性，例如色彩、紋理、透明度等等，Material和Geometry是相輔相成的，必須結合使用。

下面的代碼我們創建了一個長方體體，賦予它基礎網孔材料（MeshBasicMaterial）

<code>    var geometry = new THREE.BoxGeometry(200, 100, 100);
    var material = new THREE.MeshBasicMaterial({ color: 0x645d50 });
    var mesh = new THREE.Mesh(geometry, material);
            _scene.add(mesh);
/<code>

能以這個角度看到幾何體實際上是相機的功勞，這個我們下面的章節再介紹，這讓我們看到一個幾何體的輪廓，但是感覺怪怪的，這並不像一個幾何體，實際上我們還需要為它添加光照和陰影，這會讓幾何體看起來更真實。

基礎網孔材料（MeshBasicMaterial）不受光照影響的，它不會產生陰影，下面我們為幾何體換一種受光照影響的材料：網格標準材質(Standard Material)，併為它添加一些光照：

<code>    var geometry = new THREE.BoxGeometry(200, 100, 100);
    var material = new THREE.MeshStandardMaterial({ color: 0x645d50 });
    var mesh = new THREE.Mesh(geometry, material);
    _scene.add(mesh);
    // 創建平行光-照亮幾何體
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
     directionalLight.position.set(-4, 8, 12);
    _scene.add(directionalLight);
    // 創建環境光
    var ambientLight = new THREE.AmbientLight(0xffffff);
    _scene.add(ambientLight);
/<code>

有了光線的渲染，讓幾何體看起來更具有3D效果，Three.js中光源有很多種，我們上面使用了環境光(AmbientLight)和平行光(DirectionalLight)。

環境光會對場景中的所有物品進行顏色渲染。

平行光你可以認為像太陽光一樣，從極遠處射向場景中的光。它具有方向性，也可以啟動物體對光的反射效果。

除了這兩種光，Three.js還提供了其他幾種光源，它們適用於不同情況下對不同材質的渲染，可以根據實際情況選擇。

#2.3 座標系

在說相機之前，我們還是先來了解一下座標系的概念：

在三維世界中，座標定義了一個元素所處於三維空間的位置，座標系的原點即座標的基準點。

最常用的，我們使用距離原點的三個長度（距離x軸、距離y軸、距離z軸）來定義一個位置，這就是直角座標系。

在判定座標系時，我們通常使用大拇指、食指和中指，並互為90度。大拇指代表X軸，食指代表Y軸，中指代表Z軸。

這就產生了兩種座標系：左手座標系和右手座標系。

Three.js中使用的座標系即右手座標系。

我們可以在我們的場景中添加一個座標系，這樣我們可以清楚的看到元素處於什麼位置：

<code> var axisHelper = new THREE.AxisHelper(600);
 _scene.add(axisHelper);
/<code>

其中紅色代表X軸，綠色代表Y軸，藍色代表Z軸。

#2.4 相機

上面看到的幾何體的效果，如果不創建一個相機(Camera)，是什麼也看不到的，因為默認的觀察點在座標軸原點，它處於幾何體的內部。

相機(Camera)指定了我們在什麼位置觀察這個三維場景，以及以什麼樣的角度進行觀察。

#2.4.1 兩種相機的區別

目前Three.js提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是：PerspectiveCamera（透視相機）、 OrthographicCamera（正交投影相機）。

上面的圖很清楚的解釋了兩種相機的區別：

右側是 OrthographicCamera（正交投影相機）他不具有透視效果，即物體的大小不受遠近距離的影響，對應的是投影中的正交投影。我們數學課本上所畫的幾何體大多數都採用這種投影。

左側是PerspectiveCamera（透視相機），這符合我們正常人的視野，近大遠小，對應的是投影中的透視投影。

如果你想讓場景看起來更真實，更具有立體感，那麼採用透視相機最合適，如果場景中有一些元素你不想讓他隨著遠近放大縮小，那麼採用正交投影相機最合適。

#2.4.2 構造參數

我們再分別來看看兩個創建兩個相機需要什麼參數：

<code>_camera = new OrthographicCamera(left, right, top, bottom, near, far);
/<code>

OrthographicCamera接收六個參數，left, right, top, bottom分別對應上、下、左、右、遠、近的一個距離，超過這些距離的元素將不會出現在視野範圍內，也不會被瀏覽器繪製。實際上，這六個距離就構成了一個立方體，所以OrthographicCamera的可視範圍永遠在這個立方體內。

<code>_camera = new PerspectiveCamera(fov, aspect, near, far);
/<code>

PerspectiveCamera接收四個參數，near、far和上面的相同，分別對應相機可觀測的最遠和最近距離；fov代表水平範圍可觀測的角度，fov越大，水平範圍能觀測到的範圍越廣；aspect代表水平方向和豎直方向可觀測距離的比值，所以fov和aspect就可以確定垂直範圍內能觀測到的範圍。

#2.4.3 position、lookAt

關於相機還有兩個必須要知道的點，一個是position屬性，一個是lookAt函數：

position屬性指定了相機所處的位置。

lookAt函數指定相機觀察的方向。

實際上position的值和lookAt接收的參數都是一個類型為Vector3的對象，這個對象用來表示三維空間中的座標，它有三個屬性：x、y、z分別代表距離x軸、距離y軸、距離z軸的距離。

下面，我們讓相機觀察的方向指向原點，另外分別讓x、y、z為0，另外兩個參數不為0，看一下視野會發生什麼變化：

<code>_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
 _camera.lookAt(new THREE.Vector3(0, 0, 0))

 _camera.position.set(0, 300, 600); // 1 - x為0

 _camera.position.set(500, 0, 600); // 2 - y為0

 _camera.position.set(500, 300, 0); // 3 - z為0
/<code>

很清楚的看到position決定了我們視野的出發點，但是鏡頭指向的方向是不變的。

下面我們將position固定，改變相機觀察的方向：

<code>_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
_camera.position.set(500, 300, 600); 

_camera.lookAt(new THREE.Vector3(0, 0, 0)) // 1 - 視野指向原點

_camera.lookAt(new THREE.Vector3(200, 0, 0)) // 2 - 視野偏向x軸
/<code>

可見：我們視野的出發點是相同的，但是視野看向的方向發生了改變。

#2.4.4 兩種相機對比

好，有了上面的基礎，我們再來寫兩個例子看一看兩個相機的視角對比，為了方便觀看，我們創建兩個位置不同的幾何體：

<code>var geometry = new THREE.BoxGeometry(200, 100, 100);
var material = new THREE.MeshStandardMaterial({ color: 0x645d50 });
var mesh = new THREE.Mesh(geometry, material);
_scene.add(mesh);

var geometry = new THREE.SphereGeometry(50, 100, 100);
var ball = new THREE.Mesh(geometry, material);
ball.position.set(200, 0, -200);
_scene.add(ball);
/<code>

正交投影相機視野：

<code>_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
_camera.position.set(0, 300, 600);
_camera.lookAt(new THREE.Vector3(0, 0, 0))
/<code>

透視相機視野：

<code>_camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1100);
_camera.position.set(0, 300, 600);
_camera.lookAt(new THREE.Vector3(0, 0, 0))
/<code>

可見，這印證了我們上面關於兩種相機的理論

#2.5 渲染器

上面我們創建了場景、元素和相機，下面我們要告訴瀏覽器將這些東西渲染到瀏覽器上。

Three.js也為我們提供了幾種不同的渲染器，這裡我們主要看WebGL渲染器(WebGLRenderer)。顧名思義：WebGL渲染器使用WebGL來繪製場景，其夠利用GPU硬件加速從而提高渲染性能。

<code>_renderer = new THREE.WebGLRenderer();
/<code>

你需要將你使用Three.js繪製的元素添加到瀏覽器上，這個過程需要一個載體，上面我們介紹，這個載體就是Canvas，你可以通過_renderer.domElement獲取到這個Canvas，並將它給定到真實DOM中。

<code> _container = document.getElementById('conianer');
 _container.appendChild(_renderer.domElement);
/<code>

使用setSize函數設定你要渲染的範圍，實際上它改變的就是上面Canvas的範圍：

<code>_renderer.setSize(window.innerWidth, window.innerHeight);
/<code>

現在，你已經指定了一個渲染的載體和載體的範圍，你可以通過render函數渲染上面指定的場景和相機：

<code>_renderer.render(_scene, _camera);
/<code>

實際上，你如果依次執行上面的代碼，可能屏幕上還是黑漆漆的一片，並沒有任何元素渲染出來。

這是因為上面你要渲染的元素可能並未被加載完，你就執行了渲染，並且只執行了一次，這時我們需要一種方法，讓場景和相機進行實時渲染，我們需要用到下面的方法：

#2.6 requestAnimationFrame

window.requestAnimationFrame()告訴瀏覽器——你希望執行一個動畫，並且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。

該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行。

<code>window.requestAnimationFrame(callback);
/<code>

若你想在瀏覽器下次重繪之前繼續更新下一幀動畫，那麼回調函數自身必須再次調用window.requestAnimationFrame()。

使用者韓函數就意味著，你可以在requestAnimationFrame不停的執行繪製操作，瀏覽器就實時的知道它需要渲染的內容。

當然，某些時候你已經不需要實時繪製了，你也可以使用cancelAnimationFrame立即停止這個繪製：

<code>window.cancelAnimationFrame(myReq);
/<code>

來看一個簡單的例子：

<code>        var i = 0;
        var animateName;
        animate();
        function animate() {
            animateName = requestAnimationFrame(animate);
            console.log(i++);
            if (i > 100) {
                cancelAnimationFrame(animateName);
            } 

        }
/<code>

來看一下執行效果：

我們使用requestAnimationFrame和Three.js的渲染器結合使用，這樣就能實時繪製三維動畫了：

<code>        function animate() {
            requestAnimationFrame(animate);
            _renderer.render(_scene, _camera);
        }
/<code>

藉助上面的代碼，我們可以簡單實現一些動畫效果：

<code>        var y = 100;
        var option = 'down';
        function animateIn() {
            animateName = requestAnimationFrame(animateIn);
            mesh.rotateX(Math.PI / 40);
            if (option == 'up') {
                ball.position.set(200, y += 8, 0);
            } else {
                ball.position.set(200, y -= 8, 0);
            }
            if (y < 1) { option = 'up'; }
            if (y > 100) { option = 'down' }
        }
/<code>

#2.7 總結

上面的知識是Three.js中最基礎的知識，也是最重要的和最主幹的。

這些知識能夠讓你在看到一個複雜的三維效果時有一定的思路，當然，要實現還需要非常多的細節。這些細節你可以去官方文檔中查閱。

下面的章節即告訴你如何使用Three.js進行實戰 — 實現一個360度全景插件。

這個插件包括兩部分，第一部分是對全景圖進行預覽。

第二部分是對全景圖的標記進行配置，並關聯預覽的座標。

我們首先來看看全景預覽部分。

文中如有錯誤，歡迎在評論區指正，如果這篇文章幫助到了你，歡迎點贊和關注。

原地址:https://github.com/ConardLi/tpanorama

閱讀更多 Echa攻城獅 的文章

關鍵字: OpenGL HTM 2019科技之光