今天不再只是讓立方體旋轉，而是開始控制它在 3D 空間中的位置、旋轉與大小。
這些概念之後都會直接用在太陽系。
今天我們會學習
認識 X、Y、Z 三個座標軸
使用 position 移動 3D 物件
使用 rotation 旋轉 3D 物件
使用 scale 改變 3D 物件大小比例
實際製作一個在 3D 空間中移動、旋轉的立方體
index.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>從 Web 到宇宙</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>從 Web 到宇宙</h1>
<p>DAY 6｜3D 座標</p>
<div id="scene"></div>
</div>
<script
type="module"
src="js/main.js"
></script>
</body>
</html>
css/style.css
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #050816;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
.container {
padding: 40px;
}
h1 {
font-size: 42px;
margin-bottom: 10px;
}
p {
color: #aaaaaa;
font-size: 18px;
}
#scene {
margin-top: 20px;
}
js/main.js
// 載入 Three.js
import * as THREE from
"https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";
// ======================
// 1. 建立 Scene
// ======================
const scene = new THREE.Scene();
// ======================
// 2. 建立 Camera
// ======================
const camera = new THREE.PerspectiveCamera(
75,
800 / 500,
0.1,
1000
);
camera.position.z = 6;
// ======================
// 3. 建立 Renderer
// ======================
const renderer = new THREE.WebGLRenderer();
renderer.setSize(
800,
500
);
document
.getElementById("scene")
.appendChild(renderer.domElement);
// ======================
// 4. 建立立方體
// ======================
const geometry = new THREE.BoxGeometry(
2,
2,
2
);
// 建立材質
const material = new THREE.MeshBasicMaterial({
color: 0x0088ff
});
// 建立 Mesh
const cube = new THREE.Mesh(
geometry,
material
);
// 加入 Scene
scene.add(cube);
// ======================
// 5. 設定位置
// ======================
cube.position.set(
1,
0,
0
);
// ======================
// 6. 設定大小
// ======================
cube.scale.set(
1,
1,
1
);
// ======================
// 7. 動畫
// ======================
function animate() {
requestAnimationFrame(animate);
// X 軸旋轉
cube.rotation.x += 0.01;
// Y 軸旋轉
cube.rotation.y += 0.01;
// Y 軸上下移動
cube.position.y =
Math.sin(Date.now() * 0.002);
// 渲染畫面
renderer.render(
scene,
camera
);
}
// 開始動畫
animate();
今天第一次使用：
cube.position.set(
1,
0,
0
);
代表：
X = 1
Y = 0
Z = 0
也就是讓立方體往 X 軸方向移動。
如果改成：
cube.position.set(
-2,
0,
0
);
立方體就會往左邊移動。
今天我們讓立方體上下浮動：
cube.position.y =
Math.sin(Date.now() * 0.002);
小解析：為什麼選用 Math.sin()？
Date.now() 會回傳不斷增加的時間戳記毫秒數。而 Math.sin() 正弦函數的輸出值永遠只會在 -1 到 1 之間呈光滑波浪狀起伏。這樣就能不靠複雜的邏輯，輕鬆寫出自然、流暢的平滑浮動效果！之後製作行星軌道與週期變化時也會用到類似的數學觀念。
我們在 DAY 5 已經看過：
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
今天把它正式整理起來。
rotation.x → 繞 X 軸旋轉
rotation.y → 繞 Y 軸旋轉
rotation.z → 繞 Z 軸旋轉
例如：
cube.rotation.z += 0.01;
就可以讓立方體繞 Z 軸旋轉。
今天加入：
cube.scale.set(
1,
1,
1
);
這代表目前比例是：
X = 1
Y = 1
Z = 1
如果改成：
cube.scale.set(
2,
2,
2
);
整個立方體就會變成原本的 2 倍。
讓立方體變大
cube.scale.set(
2,
2,
2
);
讓立方體往右邊
cube.position.set(
3,
0,
0
);
讓立方體往上
cube.position.set(
0,
2,
0
);
讓立方體往後
cube.position.set(
0,
0,
-2
);
改變旋轉速度
原本：
cube.rotation.y += 0.01;
改成：
cube.rotation.y += 0.05;
就會轉得更快。
今天我們正式認識 Three.js 的 3D 座標。
最重要的是：
X → 左右
Y → 上下
Z → 前後
以及三個常用屬性：
position → 位置
rotation → 旋轉
scale → 大小
目前我們已經學習建立 3D 世界和可以控制 3D 物件
這會是之後製作太陽系非常重要的基礎。
「Geometry、Material、Mesh：打造真正的 3D 物件」
下一天會講解之前說的 Mesh（網格） = Geometry（幾何體） + Material（材質）：
並開始認識 Three.js 裡不同的幾何形狀。
iThome鐵人賽
看影片追技術