初識three.js，搭建three.js+vue.js項目

WebGL

簡介：WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，針對手機、遊戲機等設備相對較輕量級的版本）結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。

Three.js

簡介：Three.js是WebGL的JavaScript 3D庫，其對WebGL提供的接口進行了很是好的封裝，簡化了不少細節，大大下降了學習成本，成爲前端開發者完成3D繪圖的得力工具。

three.js官方文檔 ：threejs.org/

three.js中文文檔 ： techbrood.com/threejs/doc…

Three.js總體認知（附：Three.js功能概覽）

1、threejs三大組件（場景-scene，相機-camera，渲染器-renderer）

場景（Scenes）

場景是全部物體的容器，場景只有一種。

場景的構造函數是：

var scene = new THERR.Scene()
複製代碼

Fog（線性霧）：

scene.fog = new THREE.Fog(0xcce0ff, 10, 500)
複製代碼

照相機（Cameras）

定義了三維空間到二維屏幕的投影方式，投影方式主要分爲正交投影和透視投影。

1.正交投影：正交投影照相機得到的結果對於在三維空間內平行的線，投影到二維空間中也必定是平行的。

2.透視投影：透視投影照相機得到的結果是相似人眼在真實世界中看到的有「近大遠小」的效果。

通常說來，對於製圖、建模軟件一般使用正交投影，這樣不會由於投影而改變物體比例；而對於其餘大多數應用，一般使用透視投影，由於這更接近人眼的觀察效果，如下詳細介紹透視投影。

透視投影照相機（Perspective Camera）的構造函數是：

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
複製代碼

讓咱們經過一張透視照相機投影的圖來了解這些參數。

透視圖中，灰色的部分是視景體，是可能被渲染的物體所在的區域，在該視景體之外的物體將不會被渲染。

fov是視景體豎直方向上的張角（是角度制而非弧度制），如側視圖所示。

aspect等於width / height，是照相機水平方向和豎直方向長度的比值，一般設爲Canvas的橫縱比例。

near照相機到視景體最近的距離，爲正值。

far照相機到視景體最遠的距離，爲正值。

渲染器（Renderers）

渲染器的做用就是將相機拍攝出的畫面在瀏覽器中呈現出來。渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，而且以怎樣的方式來繪製。three.js中有不少種類的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，一般使用的是webGLRenderer渲染器。 webGLRenderer渲染器的構造函數是：

renderer = new THERR.WebGLRenderer()
複製代碼

建立完渲染器以後，須要調用render方法將以前建立好的場景和相機相結合從而渲染出來，即調用渲染器的render方法：

renderer.render(scene,camera)
複製代碼

瞭解了three.js完成3D繪圖的三大要素以後，即可以在頁面中建立場景，並利用相機將場景渲染到網頁上。

首先須要下載three.js庫，並引用到本身的代碼中，如下爲三種引入方式，選擇合適的方式在本身的項目中。

<script src="lib/three.js"></script>  //ES5
const THREE=require（'three'）  //CommonJS/AMD
import * as THREE from 'three'   //ES6
複製代碼

// 建立場景
var scene = new THREE.Scene(); 
// 建立透視相機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
// 建立一個 WebGL 渲染器
var renderer = new THREE.WebGLRenderer({
       alpha: true,// 默認狀況下爲黑色場景，此處設置爲透明（即白色場景）
}); 
// 設置渲染器爲全屏
renderer.setSize(window.innerWidth, window.innerHeight); 
// 添加到網頁中
document.body.appendChild(renderer.domElement);
複製代碼

完成上述各個步驟以後，咱們在網頁上看到的只有一塊靜態的白色場景，看不到任何東西，接下來經過一些基礎圖像的學習和了解，以呈現一些圖形效果。

2、圖像的表示

繪製的前期準備工做已經作完，接下來要作的就是把想要繪製的物體添加到場景中。在計算機世界中，3D世界是由點組成，兩個點可以組成一條直線，三個不在一條直線上的點就可以組成一個三角面片，無數個三角面片就可以組成各類各樣形狀的物體，一般把這種網格模型叫作Mesh模型。Mesh模型是三維開發中使用的最爲普遍的型。

Geometries（幾何圖形）

three.js給出了不少方法去生成固定的網格形狀，好比長方體（BoxGeometry）、球體（SphereGeometry）、圓形（CircleGeometry）等等。還有根據具體座標生成具體形狀的方法，能夠藉助第三方建模軟件（SketchUp）建模以後導入，目前支持的模型格式有.obj（最經常使用）,.dae，.ctm，.ply，.stl，.wrl，.vtk等。Three.js有一系列支持外部導入文件的函數，是在three.js庫以外的，使用前須要單獨下載。（例如：OrbitControls-控制器、OBJLoader-加載.obj 文件、MTLLoader-加載.mtl文件）。

Materials（材質）

three.js給出了不少種直接生成材質的方法，其中比較經常使用的有MeshBasicMaterial（對光照無感，給幾何體一種簡單的顏色或顯示線框），MeshLambertMaterial（對光照有反應，無光源則不會顯示，用於建立暗淡的不發光的物體）、MeshPhongMaterial（對光照有反應，無光源不會顯示，用於建立金屬類米昂涼的物體）等等。物體之因此能被人眼看見，一種是它自身的材料就能發光，不須要藉助外界光源；另外一種是自身材料不發光，須要反射環境中的光。對於自身不發光的物體，須要個場景添加光源從而達到可視的效果。

Lights（燈光）

three.js中能夠建立出不少不一樣類型的光源，好比環境光AmbientLight（它的顏色會添加到整個場景和全部對象的當前顏色上），點光源PointLight（這種光源放出的光線來自同一點，且輻射方向四面八方，如蠟燭發出的光），方向光DirectionalLight（也稱做無限光，從這種光源發出的光線能夠看作是平行的，如太陽光），聚光燈SpotLight（這種光源的光線從一個椎體中射出，在被照射的物體上產生聚光的效果，如手電筒發出的光。）有光源就缺乏不了陰影，在Three.js中，能造成陰影的光源只有DirectionalLight和SpotLight；而相對地，能表現陰影效果的材質只有LambertMaterial和PhongMaterial。three.js中渲染陰影的開銷比較大，因此默認物體是沒有陰影的，須要單獨開啓。開啓陰影的方法：

• 將渲染器的shadowMapEnabled屬性設置爲true（告訴渲染器能夠渲染隱形)
• 將物體及光源的castShadow屬性設置爲true（告訴物體及光源能夠透射陰影)
• 將接收該陰影的物體的receiveShadow屬性設置爲true（告訴物體能夠接收其餘物體的陰影）

在瞭解了關於圖形的基本知識以後，在上面的代碼的基礎上添加簡單圖像。

var geometry = new THREE.BoxGeometry(1,1,1); // 建立一個長寬高都爲1個單位的立方體
var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 建立材質，對光照無感
var cube = new THREE.Mesh(geometry, material); // 建立一個立方體網格（mesh）,將材質包裹在立方體上
scene.add(cube); // 將立方體網格添加到場景中

camera.position.z = 5; // 指定相機位置
function render() {
requestAnimationFrame(render); // 讓瀏覽器執行參數中的函數，不斷循環（瀏覽器一個新的API）
renderer.render(scene, camera); // 結合場景和相機進行渲染，即用攝像機拍下此刻的場景
}
render();
複製代碼

在render（）函數中添加如下代碼使上面再場景中添加的正方體運動起來。

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
複製代碼

Controls（控制器）

軌道控制插件OrbitControls.js能夠實現場景用鼠標交互，讓場景動起來，控制場景的旋轉、平移和縮放。因爲OrbitControls.js是一個插件，因此在three.js 中使用時，須要單獨引入該文件。

controls = new THREE.OrbitControls(camera);// 初始化控制器
controls.target.set(0, 0, 0);// 設置控制器的焦點，使控制器圍繞這個焦點進行旋轉
controls.minDistance = 80;// 設置移動的最短距離（默認爲零）
controls.maxDistance = 400;// 設置移動的最長距離（默認爲無窮）
controls.maxPolarAngle = Math.PI / 3;//繞垂直軌道的距離（範圍是0-Math.PI,默認爲Math.PI）
controls.update();// 照相機轉動時，必須更新該控制器
複製代碼

配置該插件以後實現的效果：

操控	效果
按住鼠標左鍵並移動	攝像機圍繞場景中心旋轉
轉動鼠標滑輪或按住中鍵並移動	放大或縮小
按住鼠標右鍵並移動	在場景中平移
上、下、左、右方向鍵	在場景中平移

Loaders（加載器）

用來加載不一樣格式的文件，主要介紹如下三種：

OBJLoader加載器（須要單獨引入js文件）：用來加載.obj文件（分爲有材質和沒有材質兩種）。

// 沒有材質
new THREE.OBJLoader().load('./tree.obj', function (obj) {
    obj.scale.set(10, 10, 10);
    obj.position.set(-10, 0, 0);
   obj.children.forEach(function (e) {
          e.castShadow = true
});// 設置陰影
    scene.add(obj)
});
複製代碼

MTLLoader加載器（須要單獨引入js文件）：用來加載.mtl文件（即加載有材質物體的obj文件以前先加載mtl文件）。

// 有材質
new THREE.MTLLoader().setPath('./model/VANS/').load('VANS.mtl', function (materials) {
    materials.preload();
    new THREE.OBJLoader().setMaterials(materials).setPath('./model/VANS/').load('VANS.obj', function (obj) {
        obj.scale.set(0.8, 0.8, 0.8);
        obj.position.set(-40, -50, 10);
        scene.add(obj)  
    })
});
複製代碼

CSS2DRenderer加載器（須要單獨引入js文件）：若是要將基於HTML的標籤與3D對象組合，則CSS2DRenderer渲染器很是有用。這裏，各個DOM元素也被包裝到CSS2DObject的一個實例中並添加到場景圖中。

// 初始化 CSS2DRenderer
labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器的大小
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
container.appendChild(labelRenderer.domElement);
// 標註實例
function addSprite(text, Mash, callback) {
       biaozhudiv = document.createElement('div');
       biaozhudiv.className = 'label';
       biaozhudiv.textContent = text;
       biaozhudiv.onclick = function () {
           callback(Mash)
       };
       biaozhuLabel = new THREE.CSS2DObject(biaozhudiv);
       biaozhuLabel.position.set(0, 0, 0);
       Mash.add(biaozhuLabel);
    }
複製代碼

Textures(紋理)

紋理是一個2D圖片（甚至也有1D和3D的紋理），它能夠用來添加物體的細節；能夠想象紋理是一張繪有磚塊的紙，無縫摺疊貼合到你的3D的房子上，這樣你的房子看起來就像有磚牆外表了。

var textureCube = new THREE.CubeTextureLoader().load(urls);
scene.background = textureCube；
複製代碼

Three.js+vue.js

1.用npm 安裝three npm install three     

three.js 安裝地址 ：www.npmjs.com/package/thr…

安裝成功後，在項目中 import three from 'three';，以後運行程序。

發現控制檯報錯 default export is not declared in imported module 說明three.js沒有默認的導出對象，應該寫成 import * as three from 'three'; 或者能夠這樣： import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from 'three';

或者使用CommonJS的形式引入var three = require ('three');

2.用npm安裝軌道控制插件 npm install three-orbit-controls  

three-orbit-controls安裝地址：www.npmjs.com/package/thr…

該插件引入以前確認three.js 庫已經引入， OrbitControls = require('three-orbit-controls')(THREE)

使用方法： controls = new OrbitControls(camera);

3.用npm安裝加載.obj和.mtl文件的插件 npm i --save three-obj-mtl-loader

three-obj-mtl-loader安裝地址 ：www.npmjs.com/package/thr…

該插件引入以前必須確認three.js庫已經引入，該插件包括加載.obj和.mtl 文件的加載器

import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';

使用方法：mtlLoader = new MTLLoader(); objLoader = new OBJLoader();

注：單獨使用three-mtl-loader 和 three-obj-loader兩個插件時，會發生錯誤：

4.用npm安裝three-css2drender插件， npm i --save three-css2drender

three-css2drender安裝地址： www.npmjs.com/package/thr…

插件引入以前必須確認htree.js庫已經引入

import {CSS2DRenderer,CSS2DObject} from 'three-css2drenderer';

使用方法： labelRenderer = new CSS2DRenderer(); label = new CSS2DObject( text );

Three.js+vue.js 練習項目

源碼：github.com/mfnn/Mnn.gi…