WebGL - 互動立方體

你好，有抱負的程式設計師們！今天，我們將踏上一段令人興奮的旅程，進入WebGL的世界。我們將創建一個可以通過滑鼠旋轉的互動立方體。別擔心如果你從未編過程式碼——我會像一隻有耐心的老烏龜一樣，逐步引導你。讓我們一起來看看吧！

WebGL - Interactive Cube

理解基礎知識

在我們開始繪製立方體之前，讓我們快速覆習一些基本概念。

WebGL是什麼？

WebGL（Web 圖形庫）是一個JavaScript API，讓我們能在網頁瀏覽器中渲染3D圖形。這就像給你的網頁頁面超能力，以創造令人驚艷的視覺效果！

我們需要什麼

一個文本編輯器（如Notepad++或Visual Studio Code）
一個網頁瀏覽器（Chrome、Firefox或任何現代瀏覽器）
一點好奇心和一點堅持！

範例——繪製一個互動立方體

步驟1：設置HTML

首先，讓我們創建我們網頁的框架。打開你的文本編輯器，創建一個名為interactive_cube.html的新文件。複製並粘貼以下代碼：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>WebGL 互動立方體</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 我們的WebGL代碼將放在這裡
</script>
</body>
</html>

這樣就設置了我們的HTML結構並包含了Three.js庫，這會讓我們的WebGL工作變得更加容易。

步驟2：創建場景

現在，讓我們添加一些JavaScript來創建我們的3D場景。將script標籤中的註釋替換為以下代碼：

// 設置場景、攝像機和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// 創建一個立方體
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

讓我們來分析一下：

我們創建了一個場景，這就像是我們3D物體的舞台。
攝像機定義了我們的視角。
渲染器負責繪製我們的場景。
我們使用BoxGeometry創建了一個立方體，並給它一個綠色。
最後，我們將攝像機放置在中心5個單位遠的地方。

步驟3：動畫立方體

為了讓我們的立方體旋轉，我們需要添加一個動畫循環。在上一個代碼塊之後添加以下代碼：

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

這個函數將被反覆調用，每個幀都會稍微旋轉立方體，並重新渲染場景。

步驟4：增加互動性

現在，讓我們添加互動性，這樣我們就可以用滑鼠旋轉立方體了。在animate()函數之前添加以下代碼：

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

這段代碼添加了滑鼠事件的監聽器，讓我們可以通過點擊和拖動來旋轉立方體。

步驟5：添加一些花絮

讓我們使立方體更有趣，為每個面添加不同的顏色。將材料創建的行替換為以下代碼：

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 紅色
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 綠色
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 藍色
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黃色
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 洋紅
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
];
const cube = new THREE.Mesh(geometry, materials);

現在，我們的立方體的每個面都會有不同的顏色！

結論

恭喜你！你剛剛使用WebGL創建了一個互動的3D立方體。這只是3D圖形編程的冰山一角。隨著你繼續你的旅程，你將會發現更多令人驚奇的事物。

記住，學習編程就像學習騎自行車一樣。起初可能會有些晃動，但隨著練習，你將會迅速前進！

這裡是一個總結我們使用的主要方法的表格：

方法	描述
`THREE.Scene()`	創建一個新的3D場景
`THREE.PerspectiveCamera()`	設置攝像機視角
`THREE.WebGLRenderer()`	處理場景的渲染
`THREE.BoxGeometry()`	創建模方體幾何
`THREE.MeshBasicMaterial()`	定義立方體的材料
`THREE.Mesh()`	結合幾何和材料
`requestAnimationFrame()`	調用動畫循環

繼續實驗，繼續學習，最重要的是，玩得開心！WebGL的世界是你的牡蠣，現在你可以開始探索它了。快樂編程！

Credits: Image by storyset

上一教程:

WebGL - 立方體旋轉