🚀【初心者必見】Three.js × GSAPで実現する！没入型VRウェブサイトの作り方完全ガイド🌐
タグ提案：#Three.js #GSAP #VR #Web制作 #初心者向け #JavaScript
こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
最近、クライアントから「もっとインタラクティブで没入感のあるウェブサイトを作りたい！」というリクエストが増えています。そこで今回は、初心者でも簡単に取り組めるように、Three.jsとGSAPを使ったVR風のウェブサイト制作方法を徹底解説します✨
See the Pen VR企業向けリッチアニメーションサンプル by Yushi Yamamoto (@yamamotoyushi) on CodePen.
🎯 今回作るもの
以下の要素を備えた没入型VRウェブサイトを作成します：
- 🌌 Three.jsによる3D背景エフェクト
- 🎞️ GSAPによる滑らかなアニメーション
- 📜 パララックス効果でスクロール時に奥行きを演出
- 📱 レスポンシブ対応のインタラクティブUI
完成イメージはこんな感じです：
+-------------------------------------+
| 🚀 没入型VR体験の未来 |
| 最先端技術で創る新しい世界✨ |
| |
| [3Dオブジェクトが浮遊🌟] |
| |
+-------------------------------------+
| 🔍 製品紹介 |
| [VRヘッドセット] [モーションコントローラー] [開発キット] |
+-------------------------------------+
| 💡 特徴 |
| [高解像度ディスプレイ] [低遅延レスポンス] [長時間バッテリー]|
+-------------------------------------+
🛠️ 必要なライブラリとツール
今回使用するライブラリは以下の通りです（CDN経由で読み込みます）：
- Three.js：3Dグラフィックス
- GSAP：アニメーション制御
- jQuery：DOM操作
- Rellax.js：パララックス効果
- Waypoints：スクロール検知
- Slick：カルーセル表示
- Magnific Popup：ライトボックス表示
📌 実装手順とフロー
以下の流れで実装を進めます。
🔧 実装手順詳細
Step1: 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スタイル（抜粋）
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を使って宇宙空間に浮かぶパーティクル背景を作ります。
Three.js背景コード
// 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();
💡 パーティクル数はデバイス性能に応じて調整しましょう。モバイルでは少なめ（500〜1000個）がおすすめ！
🎞️ GSAPで滑らかなアニメーションを追加！
GSAPでタイトルや製品紹介などに動きをつけます。
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});
GSAPのstaggerオプションを使うと、複数要素が順番に表示されて動きが自然になります✨。
📜 パララックス効果で奥行きを演出！
Rellax.jsを利用してスクロール時に奥行きを感じさせましょう。
<div class="rellax" data-rellax-speed="-2">ゆっくり動く要素</div>
<div class="rellax" data-rellax-speed="3">速く動く要素</div>
// Rellax初期化（速度調整可能）
new Rellax('.rellax');
📱 レスポンシブ対応も忘れずに！
CSSメディアクエリやJavaScriptで画面サイズごとの調整を行います。
モバイル環境では負荷軽減のため、パーティクル数やアニメーション量を減らしましょう。
📝 完成サンプルはこちらから確認できます👇
最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト