今回は、React Three FiberとGLBモデルを使って、
Webページ上に「幻想的な花の3D背景」と「スクロール連動アニメーション」を取り入れた
`Story` ページの作り方を紹介します。
この記事では、以下のような表現を実装していきます。
背景に3種類の花GLBモデルをランダムに配置
花がゆらゆらと回転しながら舞う演出
セクションがスクロールに応じてふわっと出現
GSAPによるアニメーションとThree.jsの融合
ポートフォリオや作品紹介サイトに使える、視覚的に美しい演出です。
使用ライブラリ
React 18 / Next.js 13
react-threefiber（Three.jsのReactラッパー）
react-threedrei（補助ツール）
GSAP（アニメーション制御）
💠 Step1: 花モデルをランダム配置する背景コンポーネント
FlowersBackground.tsx
const flowerModels = [
'/models/flower1.glb',
'/models/flower2.glb',
'/models/flower3.glb',
]
const Flower = ({ url, position }) => {
const { scene } = useGLTF(url)
const ref = useRef()
useFrame(({ clock }) => {
if (ref.current) {
ref.current.rotation.y = Math.sin(clock.getElapsedTime()) * 0.2
}
})
return <primitive ref={ref} object={scene} position={position} scale={[0.1, 0.1, 0.1]} />
}
export default function FlowersBackground() {
const flowers = Array.from({ length: 10 }, () => ({
url: flowerModels[Math.floor(Math.random() * flowerModels.length)],
position: [
(Math.random() - 0.5) * 20,
(Math.random() - 0.5) * 10,
(Math.random() - 0.5) * 20,
],
}))
return (
<group>
{flowers.map((flower, i) => (
<Flower key={i} {...flower} />
))}
</group>
)
}
📌 ポイント：
毎回ランダムな位置にGLBモデルを配置
useFrame でゆらゆらと回転アニメーション
💫 Step2: Storyセクションのスクロール表示（GSAP使用）
const StorySection = () => {
const ref = useRef(null)
useEffect(() => {
gsap.fromTo(ref.current, { opacity: 0, y: 50 }, {
opacity: 1,
y: 0,
duration: 1,
scrollTrigger: {
trigger: ref.current,
start: "top 80%",
toggleActions: "play none none none",
}
})
}, [])
return (
<section ref={ref} className="story-section">
<h2>私たちの物語</h2>
<p>自然と調和する、手作りのアクセサリー。</p>
</section>
)
}
📌 ポイント：
scrollTrigger によってセクションがスクロール時にふわっと表示される。
複数セクションにも簡単に応用可能。
🌈 最終的な Story.tsx の構成
export default function Story() {
return (
<div className="story-container">
<Canvas>
<ambientLight intensity={1.5} />
<FlowersBackground />
</Canvas>
<main>
<StorySection />
<StorySection />
<StorySection />
</main>
</div>
)
}
🧩 スタイリング例（CSS）
.story-container {
position: relative;
width: 100%;
height: auto;
background: radial-gradient(circle at center, #f0f8ff, #e0f0ff);
overflow: hidden;
}
.story-section {
max-width: 800px;
margin: 100px auto;
padding: 40px;
background: rgba(255,255,255,0.85);
border-radius: 12px;
box-shadow: 0 0 30px rgba(0,0,0,0.05);
transition: all 0.6s ease;
}
🔚 まとめ
md
コピーする
編集する
今回は、React Three Fiber を使って、幻想的な花モデルをランダムに配置し、
スクロールアニメーションと組み合わせたビジュアルリッチな Story ページを作りました。
GLBモデル + GSAP の組み合わせで、Reactサイトに奥行きある演出が加えられる点が魅力です。
次は、GLSLシェーダーと組み合わせてより幻想的な背景やエフェクトに拡張してみましょう。
✅ この記事の活用先
ポートフォリオサイトに個性を出したい方
ReactとThree.jsの組み合わせを実践したい方
ノーコードではできない細やかな演出を入れたい方
