BLOG MENU

Share on

Three.jsの使い方！3DモデルをWeb上で表示させる8ステップ

Three.jsの使い方！3DモデルをWeb上で表示させる8ステップ

最近のデザインには3Dがよく取り入れられています。そんな3Dですが、Blenderなどでよりよいモデルを作成することはできても、Webサイト上で表現するためにはもう一段階、フロントエンド側での技術が必要です。

今回はThree.jsを使用して、glb形式の3DモデルをWebサイト上に実装する方法を解説します。3DモデルをWebサイトに使いたいとお考えの方はぜひ最後までお読みください。

Three.jsとは？

Three.jsとは、Webブラウザ上で3Dグラフィックスを作成・表示できるオープンソースのJavaScriptライブラリです。
WebGLの複雑な操作をシンプルに扱えるため、専門的な知識がなくても、インタラクティブな3Dシーンやアニメーション、視覚効果を実装できる点が特徴です。ライティング、テクスチャ、カメラ、3Dモデルにも対応しており、データの可視化やゲーム、仮想体験など幅広いWeb開発で活用されています。

【2026年3月更新】Three.jsを活用しているサイト選

ここからは、Three.jsが使用されているサイトの事例を8つ紹介していきます。

株式会社クーシー

”Coosy"

参考

https://coosy.co.jp/work/

私たちクーシーの開発事績ページです。すっきりとしたデザインと動きのある表現で制作実績を紹介しています。
実績はカーブ状に並べ、操作に応じてスムーズに動く立体的な構成をThree.js技術で実現。従来の並び方と異なり、3D配置、視点移動、滑らかなアニメーションにより、デジタル展示空間を歩くような、モダンで引き込まれるデザインに仕上げています。

Bruno Simon's creative portfolio

”BrunoSimon's

参考

https://bruno-simon.com/

フランスのクリエイティブ・ディベロッパー、Bruno Simon氏のポートフォリオサイト。画面上の小さな車を操作して3Dの世界を自由に走り回れる「遊べる」Webサイトになっています。
Three.jsを使って物理的な動きやリアルタイムでの描画を実現しており、文字を倒したり、障害物を飛び越えたりと、ブラウザの中に広がるミニチュアの世界を冒険するような体験ができます。
UIをほとんど見せず、実績情報も空間の中に溶け込ませた、高い技術力と遊び心が詰まった新しいデザインです。

The SUKIMA project

”Clay

参考

https://claygarden.jp/

クレイアートと装飾デザインの「Clay Garden」によるリサーチサイトです。
Three.jsを使って、粘土の質感が伝わる浮いているようなオブジェクトが、深みのある空間を作っています。スクロールすると、まるで小さな世界を探検しているような気分になり、カメラの動きによってアートの細かい部分や作り方が自然につながります。静かでいながらも、生きているような力を感じるアートを、深く体験できます。
Three.jsを活用し、粘土の質感が伝わるオブジェクトが宙に浮く、奥行きのある空間を作り出しています。スクロールを進めることで、まるで小さな世界を探検しているかのような感覚を味わうことができ、カメラの視点移動によってアートの細部や制作プロセスがシームレスに繋がっていきます。静けさがありながらも、生命力を感じるアートの世界観を、深く体験できる構成に仕上がっています。

Kleines Atrium

”Kleines

参考

https://kleinesatrium.de/

こちらは、ドイツを拠点に建築設計を行う「Kleines Atrium」のWebサイトになります。
余白を活かしたミニマルな画面構成に、スムーズなカメラワークと視点の切り替えが組み合わされています。スクロールに連動したズームイン・アウトにより、まるで実際にいるかのような没入感を体験できます。Three.jsを用いた3D表現が、シンプルなデザインの中に確かな奥行きと立体感をもたらし、建築事務所ならではの洗練された世界観が表現される構成になっています。

Mr. Panda's Psychologically Safe Portfolio

”Mr.

参考

https://www.mr-pandas-psychologically-safe-portfolio.com/

手描き風の温かい雰囲気が魅力的な、クリエイティブ・ディレクターのポートフォリオサイトです。
画面全体が柔らかいイラストで統一され、可愛いパンダのキャラクターが出迎えてくれます。Three.jsを使った立体的な動きとスムーズなアニメーションが合わさって、ページをスクロールするたびに、まるで絵本の世界を進んでいるような感覚を味わえます。可愛らしさと楽しさにあふれた、触って楽しめるデザインです。

Madbox

Madbox

参考

https://madbox.io/

モバイルゲーム開発をメインに行っていて、フランスとスペインに拠点を持つゲーム開発スタジオ「Madbox」のWebサイトです。
まるでゲームのような世界観のKVになっていて、見た瞬間から遊び心がくすぐられます。アニメーションもすごく凝っていて、絶えずキャラクター達や気球が動いていて目を惹かれます。

アプリファクトリーはるni株式会社

アプリファクトリーはるni株式会社

参考

https://haru-ni.net/

鹿児島県鹿児島市に拠点を構える、ゲーム開発会社「アプリファクトリーはるni株式会社」のWebサイトです。
画面全体にレゴのような町の風景が広がっており、建物内に散らばっているリンクをクリックすると、ズームして近くで見ることができます。
まるでテーマパークのような雰囲気とレゴ風のかわいい見た目です。

株式会社シフトブレイン

株式会社シフトブレイン

参考

https://shiftbrain.com/20th/

東京都世田谷区にあるブランディングスタジオ「株式会社シフトブレイン」のWebサイトです。
KVはドラッグ＆ドロップで視点を動かせるようになっています。周りに設置されているオブジェクトの色合いも、動画の内容に沿って色が変わったり光が強くなったりして、独特の世界観に引き込まれるデザインです。

3DモデルをWeb上で表示させる流れ

3Dモデルは、以下の8ステップでWeb上に表示させます。

  1. Three.jsの導入
  2. レンダラーを作成
  3. シーンを作成
  4. 光源を作成
  5. カメラを作成
  6. カメラコントローラーを作成
  7. 3Dモデルの読み込み
  8. リアルタイムレンダリングの記述

順番に見ていきましょう。

1. Three.jsの導入

必要なファイルをCDNで読み込み

HTMLのheadタグの中で、three.min.jsを使うために必要なファイルをCDNで読み込みます。
読み込むファイルは複数あり、今回は下記のとおりです。

three.js 本体のファイル、必須です。
OrbitControls.js Three.jsでカメラの動きを制御するTHREE.OrbitControlsクラスを使用するために必要。
GLTFLoader.js 3Dモデル読み込みのために必要。
ファイル形式によって読み込むjsが変わる。
今回は「.glb」ファイルを読み込むため「GLTFLoader.js」を使用。

実際に読み込むコードはこちらです。

<script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.142.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="js/script.js"></script>

また、3Dモデルを表示させるための記述もbodyタグ内に記述します。

<body>
  <canvas id="myCanvas"></canvas>
</body>

2. レンダラーを作成

レンダラーを作成

3Dモデルをレンダリングするためのレンダラーを作成します。
引数にはHTMLコード上に記載したcanvas要素のクラスを指定。
また、setSize()メソッドを使用して横幅、縦幅を指定します。

window.addEventListener("DOMContentLoaded", init);
function init() {
    // レンダラーを作成
    const canvasElement = document.querySelector('#myCanvas');
    const renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: canvasElement,
    });

    // サイズ指定
  var box = document.getElementById("box");
  var canvasContainerWidth = box.clientWidth;
  const width = canvasContainerWidth;
  const height = canvasContainerWidth * 0.8;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);


  window.onresize = function () {
    var canvasContainerWidth = box.clientWidth;
    const width = canvasContainerWidth;
    const height = canvasContainerWidth * 0.8;
    renderer.setSize(width, height);


    if (camera) {
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }
  }

3. シーンを作成

シーンを作成

オブジェクトや光源の置き場となるシーンを作成します。

   // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x87B8C0 );//背景色を指定

4. 光源を作成

光源を作成

シーンの中には光がなく、真っ暗な状態になっているため光源を作成します。
光源は以下の5種類です。

環境光源

シーン全体に均一な光を当てるのが「環境光源」です。光の強さは一定で、それによって影などは発生しません。

平行光源

設定した一方向から光が当たるのが「平行光源」です。どれだけ移動しても光の方向は変わらない、太陽光のようなイメージになります。

半球光源

上から照らす光の色と下から照らす光の色を設定出来るのが「半球光源」です。

点光源

一点の光から全方向に放射される光を設置するのが「点光源」です。光る電球を設置するイメージになります。

スポットライト光源

一点の光から一方向に放出される光を設置するのが「スポットライト光源」です。懐中電灯みたいなイメージになります。

今回は「環境光源」と「平行光源」を使用します。「平行光源」については真正面の少し上から照らす値としました。

   // 環境光源を作成
    const ambientLight = new THREE.AmbientLight(0xffffff);
    ambientLight.intensity = 2;
    scene.add(ambientLight);

    // 平行光源を作成
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.intensity = 2;
    directionalLight.position.set(0, 3, 6); //x,y,zの位置を指定
    scene.add(directionalLight);

5. カメラを作成

カメラを作成

カメラを作成しましょう。
3.で作成したシーンの中に設置された要素（オブジェクトや光源）をレンダラーを介してどの視点から見るか、どれくらいの距離感で見るのか設定できます。

コード上では下記4つの値を「THREE.PerspectiveCamera」に指定します。

  • 画角
  • アスペクト比
  • 描画開始距離
  • 描画終了距離

実際のコードはこちらです。

   // カメラを作成
   const camera = new THREE.PerspectiveCamera(38, width / height, 1, 10000);
   camera.position.set(0, 200, 400);
   camera.lookAt(0, 100, 0);

6. カメラコントローラーを作成

カメラコントローラーを作成

カメラを作るだけでは静止画しか描けません。
そこで作成するのが「カメラコントローラー」です。カメラコントローラーによって、マウス操作で表示する画角を自由に操作したり、ズームしたりできるようになります。

1. で読み込んだ「OrbitControls.js」はここで使用します。

   // カメラコントローラーを作成
    const controls = new THREE.OrbitControls(camera, canvasElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 2.0;
    controls.enableZoom = false;

7. 3Dモデルの読み込み

いよいよ3Dモデルの読み込みです！
ここでは 1. で読み込んだローダーに準ずるファイル形式のモデルを指定します。今回読み込むのは「glb」形式のファイルです。

// 3Dモデルの読み込み
const loader = new THREE.GLTFLoader();
let model = null;
loader.load(
    '/calligraphy_school.glb',
    function (glb) {
        model = glb.scene;
        model.name = "calligraphy_school";
        model.scale.setScalar(100);
        model.position.set(0, -40, 0);
        scene.add(glb.scene);
    },
    function (error) {
        console.log(error);
    }
);

8. リアルタイムレンダリングの記述

ここまでで3Dモデルは読み込めましたが、「リアルタイムレンダリング」をしないとWeb上では表示されません。

下記コードの記述が何度も走り続けて、モデルをレンダリングし続けることでWeb上で表示できるようになります。

    // リアルタイムレンダリング
    tick();
    function tick() {
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
}//function init()の閉じカッコ

実際の表示とソースコード

ご紹介した8つのコードをすべて記述することで、初めて3DモデルがWeb上で表示されるようになります。
実際の表示は以下の通りです。


3D Interactive - Drag to Rotate

出典：Calligraphy School/ 製作者：annzep（CC BY 4.0）

window.addEventListener("DOMContentLoaded", init);
function init() {
    // レンダラーを作成
    const canvasElement = document.querySelector('#myCanvas');
    const renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: canvasElement,
    });

    // サイズ指定
    var box = document.getElementById("box");
    var canvasContainerWidth = box.clientWidth;
    const width = canvasContainerWidth;
    const height = canvasContainerWidth * 0.8;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    window.onresize = function () {
        var canvasContainerWidth = box.clientWidth;
        const width = canvasContainerWidth;
        const height = canvasContainerWidth * 0.8;
        renderer.setSize(width, height);

        if (camera) {
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        }
    }

    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x87B8C0);

    // 環境光源を作成
    const ambientLight = new THREE.AmbientLight(0xffffff);
    ambientLight.intensity = 2;
    scene.add(ambientLight);

    // 平行光源を作成
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.intensity = 2;
    directionalLight.position.set(0, 3, 6); //x,y,zの位置を指定
    scene.add(directionalLight);

    // カメラを作成
    const camera = new THREE.PerspectiveCamera(38, width / height, 1, 10000);
    camera.position.set(0, 200, 400);
    camera.lookAt(0, 100, 0);

    // カメラコントローラーを作成
    const controls = new THREE.OrbitControls(camera, canvasElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 2.0;
    controls.enableZoom = false;

    // インジケーターを非表示にするイベント
    controls.addEventListener('start', function () {
        const indicator = document.getElementById('indicator');
        if (indicator) {
            indicator.style.opacity = '0';
            setTimeout(() => { if (indicator.parentNode) indicator.parentNode.removeChild(indicator); }, 500);
        }
    });

    // 3Dモデルの読み込み
    const loader = new THREE.GLTFLoader();
    let model = null;
    loader.load(
        '/calligraphy_school.glb',
        function (glb) {
            model = glb.scene;
            model.name = "calligraphy_school";
            model.scale.setScalar(100);
            model.position.set(0, -40, 0);
            scene.add(glb.scene);
        },
        function (error) {
            console.log(error);
        }
    );

    // リアルタイムレンダリング
    tick();
    function tick() {
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
}

まとめ

今回はThree.jsを用いた3Dモデルの表示方法をご紹介いたしました。

Three.jsを覚えることで、Webサイトに3Dを取り入れられるようになります。Webデザインのトレンドとして注目され続けている技術で、あなたが作るWebサイトをより魅力的なものにしましょう。

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

執筆者：平賀愁也　デザイン：小林沙綾

Share on

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

CATEGORY LIST

ホーム