threejs學習隨記（一）

在three.js中，要渲染物體到網頁中，我們必須構建場景（scene）、相機（camera）和渲染器（renderer）。有了這三樣東西，才能將物體渲染到網頁中去。

threejs繪圖的核心：

設定渲染器renderer

設定場景 scene

設定相機 camera

設定光源 light

設定物體 object

1) 渲染器

渲染器的作用就是將相機所拍攝到的場景內容渲染到2d的畫布上，從而在瀏覽器中展示。threejs中的渲染器主要是webglrender。建立乙個渲染器的方式就是new乙個webglrender例項。

**示例如下：

var renderer = new three.webglrenderer();
renderer.setsize(window.innerwidth, window.innerheight);

2) 場景

場景就是物體所處的環境，其作用就是乙個容器。用來放置物體，燈光和相機。換句話說，開發時建立的物體，燈光和相機都需要將其新增進場景中，只有這樣才能進行正確渲染。ps：經過測試，相機其實可以不用新增進場景。建立乙個場景的方式就是new乙個scene例項。

**示例如下：

var scene = new three.scene(); // 場景

3) 相機

相機就如同人的眼睛，人站在不同角度看同乙個靜態事物，會看到不同的景象。因此，相機設定在不同的位置，瀏覽器中呈現的物體形態和位置也會有所不同。ps：threejs中預設相機處於三維空間原點，而建立的物體也預設中心在原點，因此在開發時，注意改變相機位置。

threejs中的相機有以下幾種型別：

**示例如下：

var camera = new three.perspectivecamera(75, window.innerwidth/window.innerheight, 0.1, 1000);

其構造器如下：

4) 光源

opengl（webgl）的三維空間中，存在「點光源」和「聚光燈」兩種型別。而且，作為點光源的一種特例還存在平行光源(無線遠光源)。另外，作為光源的引數還可以進行 [環境光] 等設定。

threejs中的光源有以下幾種型別：

和opengl一樣，在乙個場景中可以設定多個光源。基本上，都是環境光和其他幾種光源進行組合。如果不設定環境光，那麼光線照射不到的面會變得過於黑暗。

5) 物體

待渲染於畫布上的3d圖形，其建立後必須包含在場景中才能被正確渲染，最常用的一種方法是使用網格（mesh）進行繪製。網格是由乙個或多個多邊形組成的物體，各個頂點的座標（x, y, z）定義了多變在3d空間中的位置。網格中的多邊形通常是三角形（包含三個頂點）和四邊形（包含四個頂點）。3d網格通常也被稱為模型（model）。

threejs中內建了許多不同形狀的幾何體，常見的有：boxgeometry（立方體），spheregeometry（球體），cylindergeometry（圓柱體），planegeometry（平面）等，其餘可查詢官網api。

乙個完整3d圖形應該由兩部分組成：網格，網格表面的材質（material），其中材質主要體現物體的外觀，通常依賴於乙個或多個光源來呈現出外觀效果。threejs中有多種型別的材質，常用的如下：

以建立簡單的立方體為例，**如下：

var geometry = new three.boxgeometry(1,1,1);

var material = new three.meshbasicmaterial();

var cube = new three.mesh(geometry, material); scene.add(cube);//新增到場景中（重要）

6）渲染

以上，我們進行了渲染器，場景，相機，光源，物體的建立，最後一步就是渲染。實現這個功能的函式是:

renderer.render(scene, camera);

渲染函式的原型：render( scene, camera, rendertarget, forceclear )

7）迴圈渲染

就是不停的對畫面進行渲染，即使畫面中什麼也沒有改變，也需要重新渲染。當製作物體的動畫效果時就需要迴圈渲染，只有這樣才能將物體位置或形態的變化及時渲染在畫布上。下面就是乙個渲染迴圈：

function render() {

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene, camera); //加入之前建立的場景和相機。

requestanimationframe(render);

｝

以上面建立的立方體為例，使立方體一直繞著x、y軸旋轉，每次改變其旋轉角度後會重新呼叫render函式進行渲染，最終呈現的狀態就是乙個不斷在旋轉的立方體。其中乙個重要的函式是requestanimationframe，該函式功能如同setintervl()，不過其效能更好。

簡單完整示例

title

效果圖如下（實際是**）：

1. webgl中文網

2. threejs官方文件

threejs學習隨記（一）

Linux學習隨記（一）

threejs學習筆記材質

threejs學習筆記 10

threejs學習隨記（一）

Linux學習隨記（一）

threejs學習筆記 材質

threejs學習筆記 10

相關推薦

threejs學習筆記材質