Three入門，製造一個會動的立方體

Three.js介紹

Three.js是一款開源的主流3D繪圖JS引擎,原做者是Mr.Doob,Three.js項目地址爲

咱們知道WebGL是一種網頁3D繪圖標準，和jQuery簡化了HTML DOM操做同樣，Three.js 能夠簡化WebGL編程

嚴格意義上講，除了WebGL以外，Three.js也支持其餘渲染器如Canvas 2D，所以即便在不支持WebGL的瀏覽器中，也能夠回退

Three.js使用

1.下載壓縮庫並將其包含在您的HTML中

<script src="three.js"></script>
複製代碼

2.將其安裝並導入爲模塊

npm install three
//在使用Webpack或Browserify之類的工具捆綁文件，經過捆綁全部依賴項，它們能夠在瀏覽器中「 require（'modules'）」
var THREE = require('three');
var scene = new THREE.Scene();
//或者利用ES6導入語法
import * as THREE from 'three';
const scene = new THREE.Scene();
//只想導入three.js庫的選定部分，例如Scene：
import { Scene } from 'three';
const scene = new Scene();
複製代碼

Three.js入門

若是你學習過WebGL程序,你應該瞭解建立一個WebGL程序，你基本上須要四個步驟:

1. 初始化WebGL繪圖上下文
2. 初始化着色器程序
3. 創建模型和數據緩存
4. 完成繪製和動畫

  這基本是一種過程式編程，而Three.js則不盡相同，其使用面向對象的方式來構建應用程序,包含3個基本對象：場景(scene),相機(camera),以及一個渲染器(render)。拿電影來類比的話，場景對應於整個佈景空間，相機是拍攝鏡頭，渲染器用來把拍攝好的場景轉換成膠捲（對於網頁來說，是電腦屏幕）。 場景和相機表明了3D觀察空間和數據模型，渲染器則包含了WebGL繪圖上下文和着色器。

建立一個場景

//建立場景
var scene = new THREE.Scene();
複製代碼

建立一個相機

// Three.js的架構支持多種camera,這裏使用最經常使用的遠景相機(PerspectiveCamera),
//也就是相似人眼的觀察方式
var camera = new THREE
.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
複製代碼

屬性介紹:

1. 第一個屬性75設置的是視角(filed of view)；
2. 第二個屬相設置的是相機拍攝面的長寬比,使用元素的寬除以高,不然會出現擠壓變形。
3. 近裁平面
4. 遠裁平面

  這幾個參數所限定的綠色3D空間被稱之爲視椎體（View Frustum），用來裁剪視圖，在該視錐體之外的物體將不會被渲染。咱們暫時能夠先無論，但你須要瞭解這個空間和渲染性能有關。

建立渲染器

//渲染器，全部魔法效果都在這裏產生。除了咱們這裏使用的WebGLRenderer，three.js
//支持一些其它渲染器，基本上只是用來回退處理那些不支持WebGL的舊式用戶瀏覽器。
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
複製代碼

  除了建立renderer實例，咱們還須要設置渲染空間的尺寸，通常就使用目標屏幕的寬高（window.innerWidth和window.innerHeight），也能夠給定一個小尺寸。   若是你想保持渲染空間的尺寸，但使用一個較低的分辨率，你能夠在調用setSize的時候設置參數updateStyle爲false，好比 setSize(window.innerWidth/2, window.innerHeight/2, false) 將使用1/2分辨率來繪製你的應用程序，假定 爲100%的寬高。   最後，咱們把 renderer 元素添加到HTML文檔中。這裏是一個 元素，渲染器用來顯示場景。

建立3D立方體

上面的都是準備工做，電影佈景都好了，演員還沒進場。接下來咱們添加「演員」。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
複製代碼

  爲了建立一個立方體，咱們須要使用盒子模型（BoxGeometry），這是一個包含立方體全部頂點和填充面的對象。   除了這個幾何模型（geometry）外，咱們還須要一個材料（material）來對其着色。Three.js支持多種材料，如今咱們只使用 網孔基礎材料（MeshBasicMaterial）。 全部材料都含有一個屬性對象。這裏簡單起見，咱們只提供了顏色值爲0x00ff00，表示綠色。這和CSS和Photoshop中16進制顏色值同樣。   第3件事是咱們須要一個網孔(Mesh)。網孔是用來承載幾何模型的一個對象，還能夠把材料應用到它上面，而後添加到場景中完成旋轉動畫。 默認狀況下，當咱們調用 scene.add() 時，對象將被添加到原點處，即座標點(0,0,0)，這將致使相機和立方體發生空間重疊。爲了不這樣，咱們把相機（camera）的位置移出來一些。

渲染場景（Rendering the scene）

  若是你在新建做品中拷貝了前述的代碼，並點擊[運行]，你仍是看不到任何東西，由於咱們尚未實際去渲染它。爲此，咱們須要一個 渲染循環（render loop）。

function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();
複製代碼

  這將建立一個循環，以每秒60次的頻率來繪製場景。閱讀過本站相關教程的同窗，可能會熟悉requestAnimationFrame這個函數，它用來替代 setInterval， 這個新接口具有多個優勢，好比瀏覽器Tab切換後中止渲染以節約資源、和屏幕刷新同步避免無效刷新、在不支持該接口的瀏覽器中能安全回退爲setInterval。

建立動畫（Animating the cube）

  若是你一步步完成前述的代碼，點擊[運行]，你如今應該能夠看到一個綠色的立方體，如今咱們添加一點動畫，讓它轉動起來。 把以下代碼加在 render 函數中 renderer.render 這行代碼以前：

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

  這樣咱們就使用Three.js完成了一個旋轉的立方體。基本上，若是要改變立方體的運動，咱們都是在render循環中處理。

實例讓一個立方體動起來代碼

var THREE = require('three');
var scene = new THREE.Scene();
var camera=new THREE.PerspectiveCamera(
  75,
  window.innerWidth/window.innerHeight,
  0.1,1000
);

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

var geometry=new THREE.BoxGeometry(1,1,1);
var material=new THREE.MeshBasicMaterial( { color: 0x00ff00 })
var cube=new THREE.Mesh(geometry,material);
scene.add( cube );

camera.position.z = 5;

var render=function() {
  requestAnimationFrame( render );
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render( scene, camera );
}
render();
複製代碼

參考連接

Three.js項目地址爲 Three.js中文教程