憧れの3D表現（WebGL）に挑んでいたあの頃 ― Three.jsとBlenderで遊んでみた話

column

2025年11月25日

昔、いろんなWebサイトを眺めては、ファーストビューでグルッと動くオブジェクトや、奥行き感のあるアニメーションに「すごー！」と心を奪われていました。当時は「自分でもこんなの作ってみたい！」と思い立って、Three.jsやBlenderに手を出してみた時期がありました。

そんな憧れで入社したリベロジックですが、結果から言うと…… 最近は業務系アプリやヘッドレスCMS構築など、もう少し堅実な実装ばかりの日々ですね（笑）別にディスってないですよ〜！

はや4年目に突入したいま、当時の“動くWeb”への憧れを思い出しながら、WebGLまわりの基本を軽く振り返ってみたいと思います。

WebGLとは

WebGLとは、3DグラフィックスをWebサイト上で表示する技術で、ChromeやFirefox、Safariなど、主要なブラウザすべてで動作が可能です。

大昔はFlash Playerといったプラグインが主流でしたが、スマートフォンでは動かしにくいという問題がありました。

その点、WebGLはネイティブ対応しているため、次に訪れたモバイル時代の3D表現を切り開いた技術とも言えます。

実際にやってみた

Three.jsでブラウザに3Dを表示してみる

Three.jsはJavaScriptを用いて手軽に3Dコンテンツを作成できる、商標利用可能なライブラリです。

まずWebGLの概念として、Renderer、Scene、Cameraが必要となります。

RendererはThree.js のメインオブジェクトです。と SceneをCameraに渡すと、カメラの錐台Renderer内にある 3D Sceneの部分が2D 画像としてキャンバスにレンダリング (描画) されます。

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

そして3D立方体部分はメッシュという表示オブジェクトを使用して作成します。メッシュを作るには、ジオメトリ（形状）とマテリアル（素材）を用意する必要があります。

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

最後にアニメーションをつけます。

周りのパーティクル実装について今回は割愛します！

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

設定したcameraとgeometry、material、lightを入れたsceneをレンダリングするとブラウザに描画されます。