Three.jsで魅せる！ダイナミック3D表現テクニック

はじめに

一年で最も憂鬱な季節がやってきました。花粉症歴35年のDirector&EngineerのMARUです。

「WebGL」という技術をご存じでしょうか？
WebGL を使用すると、Web 上に 3D モデルを描画できます。そして、この WebGL を扱いやすくするためのJavaScript のライブラリがThree.js です。

3D を専門にしていない人でも、意外と簡単に使えるらしい…？
今回は、そんな JavacriptライブラリThree.js を簡単にご紹介します。

WebGLとは

Wikipediaの説明では以下のようなことが書かれています。

WebGL（ウェブジーエル、Web Graphics Libraryの略称）は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである。WebGLはウェブ標準に完全に統合されているため、ウェブページのcanvas要素上でGPUアクセラレータを使用した物理シミュレーション、画像処理、画像効果などを表現できる。WebGLの要素は、外側のHTMLと組み合わせたり、ページやページの背景の他のパーツと合成して使用できる

WebGL – Wikipedia

WebGL の後継として WebGPU が登場しているため、「今さら WebGL？」と思われるかもしれません。
しかし、2025年1月時点では Safari や Firefox が未対応のため、WebGL もまだ現役です。

近年では、React や Vue を使ってウェブサイト全体を SPA（シングルページアプリケーション） として構築しつつ、WebGL を取り入れるケースも増えています。
SPA はシームレスな画面遷移が可能なため、WebGL との相性も良さそうです。

百聞は一見にしかず。 実際に動いているものを見ていただくのが早いですね。
こちらがサンプルです。

Updata One | We Make Sense of Information

Updata One is a community of organizations that provide business intelligence and knowledge intensive services.

Updata One – We Make Sense Of In…

Diver-X Inc.

Diver-Xは、人間とコンピュータの“接点”にこそ、体験と生産性を左右する大きな可能性が宿ると考えています。私たちは、人間の力を最大限に引き出す革…

Diver-X Inc.

忘れておりましたが、弊社のコーポレートサイトのトップページにも Three.js（WebGL）を使用しています。
アルファベットが 3D 空間を浮遊しながら、スクロールに連動して動くシンプルな演出になっています。

愛媛県松山市のホームページ制作・web制作・web広告｜株式会社ラフスタイル

ホームページ・web制作・ecサイト構築・web広告はラフスタイルへ。愛媛・松山を中心に全国の相談に対応。作るをゴールにせずマーケも踏まえた提案でお…

愛媛県松山市のホームページ制作・…

3D というと、つい気合が入り、大きなパーツをグリグリと動かしたくなります。ですが、見る側にとっては不快に感じることもあります。
あまり欲張らず、さりげなく 3D モーションを取り入れて、スタイリッシュに仕上げるのが良いでしょう。

Three.jsを使ってみる

Three.Jsを使用したサンプルは検索すると多数出てきますので、当社トップページで実装しているコードを一部抜粋して紹介します。下記の公式サイトでも多数のサンプルを見ることができます。

Three.js – JavaScript 3D Library

私の制作環境のpackage.jsonの内容を参考に一部抜粋します。webpackでのビルドやnpmコマンドの説明はここでは割愛します。
webpackなりViteなりTypescript使うなり、それぞれ制作環境が違うと思いますので適宜合わせてください。

  "dependencies": {
    "gsap": "^3.12.5",
    "lenis": "^1.1.17",
    "split-type": "^0.3.4",
    "three": "^0.170.0"
  }

Three.jsをインポートします。

import * as THREE from 'three';

今回、テキストを浮遊させますので以下もインポートしておきます。

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

今回は「LAUGHSTYLE!!」という文字列を浮遊させたいので、以下のように変数に代入しておきます。

this.characters = "LAUGHSTYLE!!"; //浮遊文字列

Three.jsの概念として以下の考え方があります。
現実の世界でも、舞台があり、ライトを照らし、カメラで撮影し、映像が映し出されます。
Web 上でも同じ仕組みを再現するのが Three.js です。

• シーンを作る（舞台）
• カメラ設定
• ライト設定
• メッシュやマテリアルの設定（オブジェクトの作成）
• レンダラーの作成（映像として写しだす）

また、3D オブジェクトを表現するためには、メッシュやマテリアルの設定 も欠かせません。
これらを適切に設定することで、オブジェクトの質感や動きを表現できます。

まずはシーンを作成します。

this.scene = new THREE.Scene();

カメラを作成します。

this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1800);
this.camera.position.set(0, 0, +30); // カメラ位置のX座標, Y座標, Z座標

ライトを設定します。

const light = new THREE.AmbientLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
this.scene.add(light);

レンダラーを作成します。

this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
this.container.appendChild(this.renderer.domElement);

今回はテキストを浮遊させたいので、フォントロードしておきます。
Promiseで非同期でフォントのJsonファイルをロードします。

this.fontLoader = new FontLoader();
this.textMeshes = [];
this.init();

loadFont() {
    return new Promise((resolve, reject) => {
        this.fontLoader.load(
            'https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', 
            resolve,
            undefined,
            reject
        );
    });
}

メッシュ、マテリアル等々の設定も必要です。

const textGeometry = new TextGeometry(char , {
    font: font,
    size: 1,
    height: 0.01,
});


const textMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);

他、重要な点を抜粋し、簡潔にまとめました。

//静止時にジワジワ回ります
this.scene.rotation.x += 0.001;
this.scene.rotation.y += 0.002;

// シーン全体回転させる
 this.scene.rotation.x += this.rotationSpeedX;
 this.scene.rotation.y += this.rotationSpeedY;

// 徐々に減速させる
 this.rotationSpeedX *= 0.95;
 this.rotationSpeedY *= 0.95;

あとは イベントリスナー を登録し、スクロールに応じて値を変化させることで、3D 空間上でテキストを回転させることができます。
途中割愛しており、かなりざっくりとした説明になっていますが、イメージとしてはこのような感じです。

WebGLが使用できる環境

2025年3月現在、ほとんどのブラウザでサポートされています。スマホでも動作しますので問題ありません。

まとめ

ダイナミックなモーションが取り入れられているサイトを見つけると、ついつい「このサイトは何の技術を使っているんだろう？」とソースコードを見てしまいます。そこで初めて Three.js という技術を知りました。

Three.js はあくまでライブラリなので、これをどう活かすかはセンスが問われます。
美しいデザインに動きが加わると、ユーザー体験（UX）の向上だけでなく、サイトの価値が高まると考えています。
弊社のトップページも、ハイレベルなデザインと融合させることで、ユーザー体験（UX）の向上を実現しています。

「UX を向上させたい！」という企業様、ぜひラフスタイルまでご相談ください。