第二十七章、燃燒吧！Three.js 小宇宙！(伍)

第 12 屆 iThome 鐵人賽

DAY 28

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 28 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-10-13 13:17:31

2025 瀏覽

分享至

前言

嗨大家好，今天是鐵人賽的第 27 天，也是本系列 Three.js 最後一篇囉，照慣例，最後一天我們要來利用前面所學技術製作小功能。那麼廢話不多說，就讓我們開始吧！

幾何多面體旋轉

這邊有個小提醒，若你是使用 codepen 即時渲染畫面等線上編輯器，記得把 three.js 引入，然後在 Behavior 內關閉即時渲染程式畫面的功能，以免爆掉喔～

首先，先給一個初始化渲染環境
```
function init() {}
```

接著將場景、相機類型設定好

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

指定 WebGL 的渲染器方式，將背景顏色設定為透明色(預設值為 false 黑色)。並且設定渲染器環境大小，這邊我們讓整張畫布大小與 viewport 比利一模一樣，然後將整包 renderer 節點插入 body。
```
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
```
設定物體形狀與貼圖，由於我們要讓好幾個多面體以不同的角度旋轉，因此我們用一個陣列將這些形狀組裝起來。
```
var shape = [];
```

直接使用 Three.js 內建的 Constructor 繪製多面(20面)體，半徑為 2.5 面數為 0 (也就是 20 面)。並且貼上材質，我們用 MeshNormalMaterial Constructor 將材質用法向量投射RGB 顏色的材質。

geometry = new THREE.IcosahedronGeometry(2.5,0);
material = new THREE.MeshNormalMaterial();
shape[0] = new THREE.Mesh( geometry, material );
shape[1] = new THREE.Mesh( geometry, material );
shape[2] = new THREE.Mesh( geometry, material );

接著我們將繪製好的物件定位，目前先讓多個多面體重疊再一起，所以把定位都設在同一點就好
```
shape[0].position.set(0,5,0);
shape[1].position.set(0,5,0);
shape[2].position.set(0,5,0);
```
把繪製好的物件渲染進場景內
```
scene.add(shape[0],shape[1],shape[2]);
```
設定燈光，這邊我們使用的是點光源，設定好光源位置後將其渲染到場景內
```
var light = new THREE.PointLight(0xfca4c5);
light.position.set(250,0,0);
scene.add(light);
```
上述基礎設定完後調整一下相機定位
```
camera.position.set(3,4,10);
```
render 上面所有的設定到場景與相機內，我們就會得到一個多面體物件。
```
renderer.render(scene, camera);
```

到了重頭戲，在 render 內設定動畫。我們利用瀏覽器自動渲染的 requestAnimationFrame 運作動畫，接著針對我們上面繪製的三個多面體物件去透過 旋轉矩陣 來調整旋轉角度。

function render() {
  requestAnimationFrame( render );

  shape[0].rotation.x += 0.035;
  shape[0].rotation.y -= 0.005;
  shape[1].rotation.y += 0.015;
  shape[1].rotation.z -= 0.005;
  shape[2].rotation.z -= 0.025;
  shape[2].rotation.x += 0.005;
  renderer.render(scene, camera);
}
render();