T09▸3D009▸three

Globe Wireframe

線框地球

難度 ★★★★★標籤 globe · wireframe · three3 min read

效果簡述

旋轉的線框地球，球面上撒幾個亮點當「節點」。比真貼圖地球便宜 95% 但視覺感受差不多。「全球部署」、「使用者分佈」這類場景常用。

▸ 預設|wireframe 球 + 點

Claude Code Prompt

💬 Claude Code Prompt

參考：3D009 globe wireframe
技術：r3f sphereGeometry wireframe + 球面隨機撒點

具體行為:
- 主球：sphereGeometry args={[1.5, 28, 18]} + meshBasicMaterial wireframe
- 撒點：useMemo 隨機 phi/theta，球面座標公式
- 小球：sphereGeometry args={[0.04, 12, 12]} + 亮色 BasicMaterial
- group 整體旋轉 useFrame

限制：
- 線段段數 24~32（太密看不清）
- 節點 10~20 個適中
- 不要用 StandardMaterial（要燈光，貴）

完整程式碼

GlobeWireframe.tsx

'use client'

import { Canvas, useFrame } from '@react-three/fiber'
import { useMemo, useRef } from 'react'
import * as THREE from 'three'

function Globe() {
const ref = useRef<THREE.Group>(null)
useFrame((_, d) => { if (ref.current) ref.current.rotation.y += d * 0.18 })

const dots = useMemo(() => {
  const arr: [number, number, number][] = []
  for (let i = 0; i < 12; i++) {
    const phi = Math.acos(2 * Math.random() - 1)
    const theta = 2 * Math.PI * Math.random()
    const r = 1.55
    arr.push([r * Math.sin(phi) * Math.cos(theta), r * Math.cos(phi), r * Math.sin(phi) * Math.sin(theta)])
  }
  return arr
}, [])

return (
  <group ref={ref}>
    <mesh>
      <sphereGeometry args={[1.5, 28, 18]} />
      <meshBasicMaterial color="#c2410c" wireframe />
    </mesh>
    {dots.map((p, i) => (
      <mesh key={i} position={p}>
        <sphereGeometry args={[0.04, 12, 12]} />
        <meshBasicMaterial color="#fbbf24" />
      </mesh>
    ))}
  </group>
)
}

export function GlobeWireframe() {
return (
  <Canvas camera={{ position: [0,0,4.2], fov: 50 }} dpr={[1,2]}>
    <Globe />
  </Canvas>
)
}

何時用

✅ 「全球部署 / 服務」展示
✅ 使用者分佈視覺化
✅ 國際化 / 多區域產品

何時別用

❌ 真的需要地理精度（要貼地圖紋理）
❌ 內容站（廉價科幻感）
❌ 高互動需求（OrbitControls 後別人很難脫離）

我踩過的坑

段數太多看不出 wireframe：48 段以上線變密成面。28 ~ 36 剛好。
球面亂撒點寫錯會塌一邊：用 Math.acos(2*Math.random()-1) 給 phi，不然點都集中在兩極。
MeshBasicMaterial 沒燈光也亮：wireframe 用 Basic 是對的，省燈光成本。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋