當我還在嘗試實現我的 3D 表達夢想（WebGL）時——玩 Three.js 和 Blender | 主題

當年我嘗試實現我的 3D 表達夢想（WebGL）時——一段關於使用 Three.js 和 Blender 的摸索經歷

column

2025年11月25日

過去，當我瀏覽各種網站時，我總是被第一眼看到的動態物體和具有深度感的動畫所吸引，不禁發出“哇！”的驚嘆。那時我就想，“我也想做出這樣的東西！”Three.js或者Blender我曾經嘗試過。

我當初懷著無比的敬佩之情加入Liberlogic，但最終…最近我主要從事一些更紮實的實施工作，例如建立業務應用程式和Headless CMS（笑）。我並不是想貶低他們什麼的！

現在我們已經進入第四年了，我回想起當時我對「動態網路」的渴望。WebGL我想簡單介紹週邊地區的基本情況。

什麼是WebGL？

什麼是WebGL？用於在網站上顯示 3D 圖形的技術它適用於所有主流瀏覽器，包括 Chrome、Firefox 和 Safari。

很久以前，像 Flash Player 這樣的插件很常見，但它們有難以在智慧型手機上運行的問題。

在這方面，WebGL 得到了原生支持，所以接下來開創移動時代3D表達先河的技術也可以說…

我真的試過了

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

Three.js使用 JavaScript一個無商標限制的函式庫，讓您可以輕鬆建立 3D 內容。

首先，就 WebGL 概念而言，你需要渲染器、場景和攝影機。

Renderer 是 Three.js 中的主要物件。Scene的Camera相機視錐體Renderer3D 內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.add(box);

//光源

const light = new THREE.DirectionalLight(0xffffff, 1);

光.position.set(1, 1, 1);

//加入場景

scene.add(light);

最後，加入動畫效果。

這次我將省略周圍粒子的實作！

function animate() {
  requestAnimationFrame(animate);

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

animate()

當您使用設定好的攝影機、幾何、材質和燈光渲染場景時，它將在瀏覽器中繪製出來。