---
title: "憧れの3D表現（WebGL）に挑んでいたあの頃 ― Three.jsとBlenderで遊んでみた話"
date: 2025-11-24
categories: column
author: 平林
canonical: https://www.liberogic.jp/topics/20251125-webgl/
---
# 憧れの3D表現（WebGL）に挑んでいたあの頃 ― Three.jsとBlenderで遊んでみた話
昔、いろんなWebサイトを眺めては、ファーストビューでグルッと動くオブジェクトや、奥行き感のあるアニメーションに「すごー！」と心を奪われていました。当時は「自分でもこんなの作ってみたい！」と思い立って、Three.jsやBlenderに手を出してみた時期がありました。当時の“動くWeb”への憧れを思い出しながら、WebGLまわりの基本を軽く振り返ってみたいと思います。
昔、いろんな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側のを取得
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#myCanvas"),
antialias: true,
});
//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")
//htmlのへ流し込み
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をレンダリングするとブラウザに描画されます。
[動画を再生（video）](https://assets.liberogic.jp/video/video_threejs.mp4)
動画の文字起こし(トランスクリプト)を表示
**[00:00]** （直方体のジオメトリが3Dレンダリングされてブラウザに表示されている）
### **Blenderで3Dモデリングを作成してみる**
Blenderは**3Dモデリング、アニメーション、レンダリング、ゲーム開発、動画編集まで、3D制作の全工程を無料でカバーするオープンソースの統合型ソフトウェア**です。Blender単体ではWebGLサイトは作れません。
BlenderもThree.jsの概念と同じでメッシュオブジェクトで形状を作成し、マテリアルで色や物質の質感をつけます。そしてライトで光の当て方、影の出し方を調整し、カメラの位置や方向を調整しレンダリングを行います。
*面や線、点を調整しながらメッシュオブジェクトを整形していきます。*
*マテリアル・ノードでカラーやテクスチャーをつけていきます。*
グラデーションにしたり、金属っぽくしたり、発光させたり、ノードを組み合わせることで本物のような質感を作っていくことができます。
参考：[https://www.youtube.com/watch?v=DsNZzUZPhw4](https://www.youtube.com/watch?v=DsNZzUZPhw4)
### **Blenderで作成した3DモデリングをThree.jsでブラウザに表示してみる**
Blenderで作成した3Dを.glbファイルに書き出し、Three.jsに組み込みます。
`OrbitControls`、`GLTFLoader`、`DRACOLoader`の各機能をThree.jsライブラリからインポートします。
`OrbitControls`は、カメラをマウスで制御するためのユーティリティであり、`GLTFLoader`と`DRACOLoader`は、それぞれGLTF形式の3Dモデルと、その圧縮バージョンであるDRACO形式の3Dモデルを読み込むためのユーティリティです。
ブラウザにモデリングしたりんごを表示させました！
ただ、Blenderで作成したモデルをThree.jsでブラウザに表示した際、**レンダリング環境の違いとマテリアルの互換性**により色味やテクスチャーが異なって見えてしまいます。思った通りの見た目にするには少し調整が必要です。
[動画を再生（video）](https://assets.liberogic.jp/video/video_blender.mp4)
動画の文字起こし(トランスクリプト)を表示
**[00:00]** （Blenderで作成したりんごのモデリングをThree.jsでブラウザ表示した様子）
日々の案件はCMS連携や業務アプリのフロントエンド設計 / 構築ばかりで、私自身の業務としては、あまり3D表現に触れることは少なくなりました。
でも、こうして遊んでみると、「やっぱり面白いな」と改めて感じます。
あの頃の**動くWeb**への憧れがあったからこそ、モダンな技術にも自然と惹かれていったのかもしれません。
さぁ、今日もNextだNuxtだ！
現場に戻って、また別のかたちで**動くWeb**を作っていきます。 🚀