Loading...
080-5647-1778 無料相談
制作パートナー募集中！

Blog

【three.js】3Dアニメーション three.js〜入門〜
2025.05.27

まずは入門ということで、簡単な立方体を作成しながら学んでいきましょう。
ただ3Dなだけでなく、マウス操作で動かせるものを作成していきます。

早速ですが、完成コードとデモページをご紹介します。
マウスホイールやドラッグで動きますので遊んでみて下さい！

デモはこちら

完成コードについてはvscodeのLive Serverなどで試してみて下さい。

完成コードはこちら

three.jsの基礎知識

まずは、レンダラー　シーン　カメラ　というものを紹介します。
よくわからないかもしれませんが、やってみるとすぐわかりますのでご安心ください。

カメラでシーンをレンダリングです。

レンダラー（Renderer）

⚫︎役割

3D空間のシーン（Scene）とカメラ（Camera）を使って、実際に画面に描画（レンダリング）する機能を持つもの。

監視する、というような認識がわかりやすいかもしれません。
今回だと、html側にcanvasを設置してますが、それを監視しているイメージです。

⚫︎使い方

普通はTHREE.WebGLRendererを使います。

// レンダラー作成
const canvas = document.getElementById('myCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

シーン（Scene）

⚫︎役割

3D空間の「箱」や「舞台」みたいなもの。

ここに「オブジェクト」「光源」「カメラ」を入れていきます。

⚫︎使い方

// シーン作成
const scene = new THREE.Scene();

カメラ（Camera）

⚫︎役割

3D空間の中で「どこから見ているか」を決めるもの。

シーンを撮影するカメラのイメージです。
Three.jsでよく使うのは「PerspectiveCamera（透視投影カメラ）」です。

⚫︎使い方

// カメラ作成
const camera = new THREE.PerspectiveCamera(
  75,// 比率を設定　数値を下げると視野が広がる（大きくなる）
  window.innerWidth / window.innerHeight,
  0.1,// 最小距離
  1000// 最大距離
);
camera.position.z = 5;

簡単な立方体を追加してみよう

// 簡単な立方体ジオメトリを追加
const geometry = new THREE.BoxGeometry();// 立方体のジオメトリを作成
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// マテリアルを作成
const cube = new THREE.Mesh(geometry, material);// メッシュを作成
scene.add(cube);

// 描画ループ
function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;  // 回転
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

⚫︎少し説明

BoxGeometry() — 立方体を構成するすべての点、塗りつぶしを含んだオブジェクト
MeshBasicMaterial() — 色をつけるオブジェクト
Mesh() — ジオメトリを受け取り、それにマテリアルを適用するオブジェクト
これをシーンに挿入して自由に動かせる

CircleGeometryなど、ジオメトリは複数あります。

まずここまでで、こんな感じになりました。

コードはこちらです。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <!-- three.jsを読み込む -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js"
      }
    }
  </script>
  <!-- index.jsを読み込む -->
  <script type="module" src="index.js"></script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

index.js

import * as THREE from "three";


// レンダラー作成
const canvas = document.getElementById('myCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// シーン作成
const scene = new THREE.Scene();

// カメラ作成
const camera = new THREE.PerspectiveCamera(
  75,// 比率を設定　数値を下げると視野が広がる（大きくなる）
  window.innerWidth / window.innerHeight,
  0.1,// 最小距離
  1000// 最大距離
);
camera.position.z = 5;

// 簡単な立方体ジオメトリを追加
const geometry = new THREE.BoxGeometry();// 立方体のジオメトリを作成
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// マテリアルを作成
const cube = new THREE.Mesh(geometry, material);// メッシュを作成
scene.add(cube);

// 描画ループ
function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;  // 回転
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

お疲れ様でした！

three.jsのちょっと応用知識

さて次は、光を充てたり、マウスやタッチ操作で視点を動かせるようにしてみましょう。

マテリアル　ライト　コントロール　について紹介します。

マテリアル（Material）

⚫︎役割

物体の表面の見た目を決めるもの。

実は先ほどの立方体作成のときに使用してましたが、色などの調整をするものです。

⚫︎代表的なもの

  • MeshBasicMaterial — 光の影響を受けない単純な色やテクスチャ
  • MeshStandardMaterial — 物理ベースレンダリング（PBR）でリアルな質感
  • MeshPhongMaterial — ハイライトが強く光沢のある感じ

⚫︎使い方

const material = new THREE.MeshStandardMaterial({ 
  // color: 0x0077ff
  map: texture,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

ライト（Light）

⚫︎役割

3D空間で物体に影や明暗をつけるための光源です。

⚫︎基本的なライト種類

  • AmbientLight — 全体に均一に光を当てる（影ができない）
  • DirectionalLight — 太陽のような平行光線、影もできる
  • PointLight — 電球のように全方向に光を放つ
  • SpotLight — 懐中電灯のように光をスポットで照射

⚫︎使い方

// ライト
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 白色の方向光を作成　第二引数は光の強さ
directionalLight.position.set(5, 10, 7);// ライトの位置を設定
scene.add(directionalLight);
scene.add(new THREE.AmbientLight(0x404040));

コントロール（OrbitControls）

⚫︎役割

マウスやタッチで視点を動かせるようにする便利なツール。

⚫︎使い方

// OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

完成コード

モジュールインポートの記述、ウィンドウリサイズ対応の記述、アニメーションの記述を追加し完成です！

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <!-- three.jsを読み込む -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js"
      }
    }
  </script>
  <!-- index.jsを読み込む -->
  <script type="module" src="index.js"></script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

index.js

// Three.js本体とOrbitControlsをモジュールとして読み込み
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.152.2/examples/jsm/controls/OrbitControls.js';

// canvasを取得してレンダラー作成
const canvas = document.getElementById('myCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// シーンとカメラ作成
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 立方体メッシュ
const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshStandardMaterial({ 
  color: 0x0077ff
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// ライト
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);// 白色の方向光を作成　第二引数は光の強さ
directionalLight.position.set(5, 10, 7);// ライトの位置を設定
scene.add(directionalLight);
scene.add(new THREE.AmbientLight(0x404040));

// OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// ウィンドウリサイズ対応
window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
});

// アニメーションループ
function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  controls.update();
  renderer.render(scene, camera);
}

animate();

好きな画像の柄にしてみよう

ここまでできたら、簡単に好きな画像の柄にすることが可能です。
好きな画像を追加し、コードを少し変えてみましょう。

私は、弊社のロゴの柄にしてみました。

デモはこちら

ディレクトリ構造

.
├── img.jpg
├── index.html
└── index.js

こちらを追加します。
※マテリアルの上あたり

const loader = new THREE.TextureLoader();
const texture = loader.load( 'img.jpg' );
texture.colorSpace = THREE.SRGBColorSpace;

そして、マテリアルはこうする↓

const material = new THREE.MeshStandardMaterial({ 
  map: texture,
});

以上です。

お疲れ様でした！

まとめ

いかがでしたでしょうか。
今回はシンプルな立方体でしたが、3Dモデルを使用してみたりするとまた面白いと思います。
3Dアニメーションを習得して、一歩上のコーダーになりましょう！

記事一覧へ
カテゴリー
アーカイブ

Contact

どんなに小さな疑問や不安にも
丁寧にお答えします！
080-5647-1778 無料相談
制作パートナー募集中！