Three.js入門---創建一個動起來的立方體

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中文教程