Three.js 入門: 在瀏覽器中打造 3D 互動場景

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
    }
  }
</script>

<script type="module">
  import * as THREE from "three";
  import { OrbitControls } from "three/addons/controls/OrbitControls.js";
</script>

// 建立場景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111122);
scene.fog = new THREE.FogExp2(0x111122, 0.035);

// 建立透視相機
const camera = new THREE.PerspectiveCamera(
  60, // 視野角度（FOV）
  window.innerWidth / window.innerHeight, // 長寬比
  0.1, // 近裁切面
  1000, // 遠裁切面
);
camera.position.set(0, 3, 8);

// 建立渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 啟用阻尼，讓旋轉有慣性
controls.dampingFactor = 0.05;
controls.maxPolarAngle = Math.PI / 2 + 0.1; // 限制不能翻到地板下面

// 環境光：均勻照亮所有物件
const ambientLight = new THREE.AmbientLight(0x404060, 0.5);
scene.add(ambientLight);

// 平行光：模擬太陽光，可以投射陰影
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

// 彩色點光源：營造氣氛
const pointLight1 = new THREE.PointLight(0xff6b6b, 2, 20); // 紅色
pointLight1.position.set(-3, 3, 3);
scene.add(pointLight1);

const pointLight2 = new THREE.PointLight(0x4ecdc4, 2, 20); // 青色
pointLight2.position.set(3, 3, -3);
scene.add(pointLight2);

renderer.shadowMap.enabled = true   → 全域開關
          ↓
light.castShadow = true             → 光源產生陰影
          ↓
mesh.castShadow = true              → 物件投射陰影
          ↓
mesh.receiveShadow = true           → 物件接收陰影（顯示影子）

const floorGeometry = new THREE.PlaneGeometry(50, 50);
const floorMaterial = new THREE.MeshStandardMaterial({
  color: 0x222233,
  roughness: 0.8,
  metalness: 0.2,
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2; // 平面預設是直立的，旋轉 90 度變成地板
floor.position.y = -1.5;
floor.receiveShadow = true; // 接收陰影
scene.add(floor);

const icoGeometry = new THREE.IcosahedronGeometry(1.5, 0);
const icoMaterial = new THREE.MeshStandardMaterial({
  color: 0x6c5ce7,
  roughness: 0.2, // 越小越光滑
  metalness: 0.8, // 越大越像金屬
  flatShading: true, // 平面著色，展現多面體的稜角
});
const icosahedron = new THREE.Mesh(icoGeometry, icoMaterial);
icosahedron.position.y = 1.5;
icosahedron.castShadow = true; // 投射陰影
scene.add(icosahedron);

const cubes = [];
const cubeCount = 12;
const cubeColors = [0xff6b6b, 0x4ecdc4, 0xffe66d, 0xa29bfe, 0xfd79a8, 0x00cec9];

for (let i = 0; i < cubeCount; i++) {
  const geometry = new THREE.BoxGeometry(0.4, 0.4, 0.4);
  const material = new THREE.MeshStandardMaterial({
    color: cubeColors[i % cubeColors.length],
    roughness: 0.3,
    metalness: 0.6,
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.castShadow = true;
  scene.add(cube);
  cubes.push({
    mesh: cube,
    angle: (i / cubeCount) * Math.PI * 2, // 均勻分布在圓上
    radius: 3.5,
    speed: 0.3 + Math.random() * 0.2,
    yOffset: Math.sin((i / cubeCount) * Math.PI * 2) * 0.5,
  });
}

const particleCount = 500;
const particleGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount; i++) {
  positions[i * 3] = (Math.random() - 0.5) * 30; // x
  positions[i * 3 + 1] = Math.random() * 15; // y
  positions[i * 3 + 2] = (Math.random() - 0.5) * 30; // z
}

particleGeometry.setAttribute(
  "position",
  new THREE.BufferAttribute(positions, 3),
);

const particleMaterial = new THREE.PointsMaterial({
  color: 0xaaaaff,
  size: 0.05,
  transparent: true,
  opacity: 0.8,
});

const particles = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particles);

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const elapsed = clock.getElapsedTime();

  // 旋轉二十面體
  icosahedron.rotation.x = elapsed * 0.3;
  icosahedron.rotation.y = elapsed * 0.5;
  icosahedron.position.y = 1.5 + Math.sin(elapsed * 0.8) * 0.3; // 浮動

  // 環繞小方塊
  cubes.forEach((cubeData) => {
    cubeData.angle += cubeData.speed * 0.01;
    cubeData.mesh.position.x = Math.cos(cubeData.angle) * cubeData.radius;
    cubeData.mesh.position.z = Math.sin(cubeData.angle) * cubeData.radius;
    cubeData.mesh.position.y =
      1.5 + Math.sin(elapsed * 1.5 + cubeData.angle) * cubeData.yOffset;
    cubeData.mesh.rotation.x = elapsed * 0.8;
    cubeData.mesh.rotation.y = elapsed * 1.2;
  });

  // 點光源繞行
  pointLight1.position.x = Math.sin(elapsed * 0.5) * 5;
  pointLight1.position.z = Math.cos(elapsed * 0.5) * 5;

  // 粒子緩慢上升
  const pos = particles.geometry.attributes.position.array;
  for (let i = 0; i < particleCount; i++) {
    pos[i * 3 + 1] += 0.005;
    if (pos[i * 3 + 1] > 15) pos[i * 3 + 1] = 0;
  }
  particles.geometry.attributes.position.needsUpdate = true;

  controls.update();
  renderer.render(scene, camera);
}

animate();

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});