T03▸3D003▸three

Distort Sphere

變形球體

難度 ★★★★★標籤 drei · distort · sphere2 min read

效果簡述

一顆會「呼吸 + 扭曲」的球。drei 的 MeshDistortMaterial 一行解決，本來要寫 shader 才有的效果。

▸ 預設|distort 0.4, speed 1.5

Claude Code Prompt

💬 Claude Code Prompt

參考：3D003 distort sphere
技術：@react-three/drei MeshDistortMaterial

具體行為:
- sphereGeometry 段數 64，64（distort 要平滑）
- MeshDistortMaterial distort={0.45} speed={1.5} roughness={0.2} metalness={0.4}
- useFrame 慢慢轉

限制：
- 段數低於 32 會看到面
- distort > 0.6 變鬼
- 一頁 1 個夠

完整程式碼

DistortSphere.tsx

'use client'

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

function Blob() {
const ref = useRef<any>(null)
useFrame((_, d) => { if (ref.current) ref.current.rotation.y += d * 0.25 })
return (
  <mesh ref={ref}>
    <sphereGeometry args={[1.5, 64, 64]} />
    <MeshDistortMaterial color="#c2410c" distort={0.45} speed={1.5} roughness={0.2} metalness={0.4} />
  </mesh>
)
}

export function DistortSphere() {
return (
  <Canvas camera={{ position: [0,0,4], fov: 50 }} dpr={[1,2]}>
    <ambientLight intensity={0.4} />
    <directionalLight position={[4,4,4]} intensity={1.2} />
    <Blob />
  </Canvas>
)
}

何時用

✅ Hero 主視覺
✅ 品牌站「我們的核心」抽象視覺
✅ AI 產品的「模型」視覺隱喻

何時別用

❌ 一頁多個球
❌ 必須跟內容文字爭視線的位置
❌ 行動為主受眾（耗電）

我踩過的坑

段數低看見多邊形面：64×64 才平滑，32 以下肉眼可見折邊。
沒燈光全黑：StandardMaterial 必要燈源。
distort 太大顯得廉價：0.3 ~ 0.5 高級感最強。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋