✨ Three.jsとGSAPで作る没入型VRウェブサイト構築ガイド 🚀

# 🚀【初心者必見】Three.js × GSAPで実現する！没入型VRウェブサイトの作り方完全ガイド🌐

**タグ提案**：`#Three.js` `#GSAP` `#VR` `#Web制作` `#初心者向け` `#JavaScript`

こんにちは😊
[株式会社プロドウガ](https://qiita.com/organizations/prodouga-com)の@YushiYamamotoです！
[らくらくサイト](https://rakuraku-site.prodouga.com/)の開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

最近、クライアントから「もっとインタラクティブで没入感のあるウェブサイトを作りたい！」というリクエストが増えています。そこで今回は、初心者でも簡単に取り組めるように、Three.jsとGSAPを使ったVR風のウェブサイト制作方法を徹底解説します✨

<p class="codepen" data-height="651" data-default-tab="result" data-slug-hash="XJWzQeQ" data-pen-title="VR企業向けリッチアニメーションサンプル" data-editable="true" data-user="yamamotoyushi" style="height: 651px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/XJWzQeQ">
  VR企業向けリッチアニメーションサンプル</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


## 🎯 今回作るもの


以下の要素を備えた没入型VRウェブサイトを作成します：

- 🌌 Three.jsによる3D背景エフェクト
- 🎞️ GSAPによる滑らかなアニメーション
- 📜 パララックス効果でスクロール時に奥行きを演出
- 📱 レスポンシブ対応のインタラクティブUI

完成イメージはこんな感じです：

```
+-------------------------------------+
| 🚀 没入型VR体験の未来               |
| 最先端技術で創る新しい世界✨        |
|                                     |
|     [3Dオブジェクトが浮遊🌟]        |
|                                     |
+-------------------------------------+
| 🔍 製品紹介                         |
| [VRヘッドセット] [モーションコントローラー] [開発キット] |
+-------------------------------------+
| 💡 特徴                             |
| [高解像度ディスプレイ] [低遅延レスポンス] [長時間バッテリー]|
+-------------------------------------+
```


## 🛠️ 必要なライブラリとツール

今回使用するライブラリは以下の通りです（CDN経由で読み込みます）：

- **Three.js**：3Dグラフィックス
- **GSAP**：アニメーション制御
- **jQuery**：DOM操作
- **Rellax.js**：パララックス効果
- **Waypoints**：スクロール検知
- **Slick**：カルーセル表示
- **Magnific Popup**：ライトボックス表示


## 📌 実装手順とフロー

以下の流れで実装を進めます。

```mermaid
graph TD
A[HTML構造作成] --> B[CSSスタイリング]
B --> C[Three.jsで3D背景実装]
C --> D[GSAPアニメーション追加]
D --> E[パララックス効果実装]
E --> F[レスポンシブ対応]
```

---

## 🔧 実装手順詳細

### Step1: HTML構造作成📄

まずは基本的なHTML構造を用意します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>没入型VR体験</title>
  <!-- ライブラリCSS -->
  <link rel="stylesheet" href="style.css">
  <!-- ライブラリJSはbody末尾で -->
</head>
<body>
  <canvas id="vr-bg"></canvas>
  <header class="hero">
    <h1>没入型VR体験の未来</h1>
    <p>最先端技術で創る新しい世界</p>
  </header>
  <!-- 他セクション省略 -->
  
  <!-- JSライブラリ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
```


### 🎨 CSSスタイル（抜粋）

```css
body {
  margin:0;
  overflow-x:hidden;
  background-color:#121212;
}

#bg-canvas {
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
}
```


## 🌌 Three.jsで幻想的な3D背景を作ろう！

Three.jsを使って宇宙空間に浮かぶパーティクル背景を作ります。


<details><summary>Three.js背景コード</summary>

```javascript
// Three.js 背景初期化関数
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer({canvas:document.getElementById('bg-canvas'),alpha:true});
renderer.setSize(window.innerWidth,window.innerHeight);

// パーティクル生成
const particlesGeometry=new THREE.BufferGeometry();
const particlesCount=1500;
const positions=new Float32Array(particlesCount*3);
for(let i=0;i<particlesCount*3;i++){
positions[i]=(Math.random()-0.5)*10;
}
particlesGeometry.setAttribute('position',new THREE.BufferAttribute(positions,3));
const particlesMaterial=new THREE.PointsMaterial({size:0.02,color:0xffffff});
const particles=new THREE.Points(particlesGeometry,particlesMaterial=new THREE.PointsMaterial({color:0xffffff,size:0.02}));
scene=new THREE.Scene();
scene.add(particlesMesh=new THREE.Points(particlesGeometry,particlesMaterial));

// カメラ設定
camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z=5;

// アニメーションループ
function animate(){
 requestAnimationFrame(animate);
 particlesMesh.rotation.y+=0.0005;
 renderer.render(scene,camera);
}
animate();
```

</details>

:::note info
💡 パーティクル数はデバイス性能に応じて調整しましょう。モバイルでは少なめ（500〜1000個）がおすすめ！
:::

## 🎞️ GSAPで滑らかなアニメーションを追加！

GSAPでタイトルや製品紹介などに動きをつけます。

```javascript
gsap.from('.hero h1',{y:50,opacity:0,duration:1});
gsap.from('.product-item',{scrollTrigger:{trigger:'.products',start:'top center'},y:100,opacity:0,duration:1,stagger:.2});
```

:::note info
GSAPの`stagger`オプションを使うと、複数要素が順番に表示されて動きが自然になります✨。
:::

## 📜 パララックス効果で奥行きを演出！

Rellax.jsを利用してスクロール時に奥行きを感じさせましょう。

```html
<div class="rellax" data-rellax-speed="-2">ゆっくり動く要素</div>
<div class="rellax" data-rellax-speed="3">速く動く要素</div>
```

```javascript
// Rellax初期化（速度調整可能）
new Rellax('.rellax');
```


## 📱 レスポンシブ対応も忘れずに！

CSSメディアクエリやJavaScriptで画面サイズごとの調整を行います。

:::note warn
モバイル環境では負荷軽減のため、パーティクル数やアニメーション量を減らしましょう。
:::

## 📝 完成サンプルはこちらから確認できます👇

👉 [CodePenサンプルを見る](https://codepen.io/yamamotoyushi/pen/XJWzQeQ)

---

# 最後に：業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)

🌳 [らくらくサイト](https://rakuraku-site.prodouga.com/)