我所憧憬的3D表現（WebGL）時代 ― 用Three.js與Blender試玩的故事

從前，我經常瀏覽各種網站，被首屏中轉圈旋轉的物體或具有深度感的動畫所吸引，心想「哇，太厲害了！」當時我就產生了「我也想自己做出這樣的東西！」的念頭，於是開始接觸Three.js和Blender。

我就是帶著這份憧憬加入Liberogic的，但從結果來說……最近我的日常工作大多是比較踏實的實作，像是業務系統應用或headless CMS構築之類的呢（笑）別誤會，我並沒有貶低啦～！

如今已進入第四年了，回想起當初對「動態Web」的憧憬，我想輕鬆地回顧一下WebGL相關的基礎知識。

什麼是WebGL

WebGL是在網站上顯示3D圖形的技術，可在Chrome、Firefox、Safari等主要瀏覽器上運作。

很久以前，Flash Player這類外掛程式曾是主流，但在智慧型手機上有難以運行的問題。

相比之下，WebGL是原生支援的，可以說是開啟隨後到來的行動時代3D表現的技術。

實際嘗試看看

使用 Three.js 在瀏覽器中顯示 3D

Three.js 是一個使用 JavaScript就能輕鬆建立 3D 內容的開源函式庫。

首先，作為 WebGL 的概念，我們需要 Renderer、Scene 和 Camera。

Renderer 是 Three.js 的主要物件。將 Scene 和 Camera 傳遞給它後，就會將相機視錐體Renderer內的 3D Scene部分作為 2D 影像渲染（繪製）到畫布上。

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

然後，使用稱為網格的顯示物件來建立 3D 立方體部分。建立網格需要準備幾何體（形狀）和材質（素材）。

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

最後加入動畫效果。

這次我們略過周圍粒子的實現！

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

設定好的 camera、geometry、material、light 所在的 scene 經過渲染後，就會在瀏覽器中顯示。