曾經憧憬的 3D 呈現（WebGL）挑戰時期 ― 用 Three.js 和 Blender 玩玩看的分享

以前在各種網站上瀏覽時，首屏那些會動起來的物件，或是帶有縱深感的動畫，總讓我看得「哇！」一聲就被吸引。當時心想「我也想做出這樣的東西！」，於是就開始接觸 Three.js 和 Blender。

就是抱著這樣的憧憬進入 Liberogic，但老實說…… 最近的工作大多是業務系統應用程式和 Headless CMS 建置等比較務實的開發內容呢（笑）。我可沒有在酸喔～！

已經快邁入第 4 年了，現在想一邊回想當年對「會動的 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 影像的形式繪製（渲染）到 canvas 上。

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 立方體是使用稱為網格（Mesh）的顯示物件來建立。要建立網格，需要準備幾何體（形狀）與材質（素材）。

//ジオメトリ（立方体）
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 後進行渲染，即可在瀏覽器中繪製出來。