T08▸3D008▸three

Stars Field

星空

難度 ★★★★★標籤 drei · stars · three2 min read

效果簡述

drei 內建的 <Stars /> 元件。一行就有星空、會旋轉、會 fade。是「想要科幻感但又不想花太多時間」的最佳解。

▸ 預設|5000 星, 慢轉

Claude Code Prompt

💬 Claude Code Prompt

參考：3D008 stars field
技術：@react-three/drei Stars

具體行為:
- <Stars radius={50} depth={50} count={2500} factor={4} fade speed={1} />
- 用 group 包起來，useFrame 慢慢轉

限制：
- count 2000 ~ 4000；過多會卡
- factor 是「大小變異程度」，4 ~ 6 自然
- fade 讓邊緣淡出，比硬切好看

完整程式碼

StarsField.tsx

'use client'

import { Stars } from '@react-three/drei'
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import type { Group } from 'three'

function StarsGroup() {
const ref = useRef<Group>(null)
useFrame((_, d) => { if (ref.current) ref.current.rotation.y += d * 0.05 })
return (
  <group ref={ref}>
    <Stars radius={50} depth={50} count={2500} factor={4} fade speed={1} />
  </group>
)
}

export function StarsField() {
return (
  <Canvas camera={{ position: [0,0,1], fov: 60 }} dpr={[1,2]}>
    <StarsGroup />
  </Canvas>
)
}

何時用

✅ 科幻 / 太空主題
✅ AI / 抽象產品背景
✅ Hero 區的「廉價但有效」科技感

何時別用

❌ 內容站（廉價感）
❌ 已有複雜 3D 場景的頁
❌ 跟 Particle Field 同頁（重複）

我踩過的坑

沒 fade 邊緣很硬：fade prop 是 drei 的禮物，記得開。
count 太多手機掛：4000 是上限，往下調。
camera position 太遠看不到：z = 1 ~ 3 範圍。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋