インタラクティブなアニメーションを実装 Three.js

今回は、Three.jsを使用して簡単なインタラクティブ3Dアニメーションを作成する方法を説明します。

See the Pen three.js -animation by techcode sample (@techcode-sample) on CodePen.

概要

このガイドでは、Three.jsを使って簡単な3Dシーンを作成し、マウスの動きに応じてオブジェクトが回転するインタラクティブなアニメーションを作成します。

手順

Three.jsのセットアップ
シーン、カメラ、レンダラーの作成
3Dオブジェクトの追加
アニメーションの作成
マウスイベントの追加

1. Three.jsのセットアップ

Three.jsを使うために、まずHTMLファイルを作成し、Three.jsライブラリを読み込みます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive 3D Animation</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

2. シーン、カメラ、レンダラーの作成

JavaScriptファイル（script.js）に、シーン、カメラ、レンダラーを設定するコードを書きます。

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

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 3Dオブジェクトの追加

シーンに3Dオブジェクト（今回は立方体）を追加します。

// ジオメトリの作成
const geometry = new THREE.BoxGeometry(1, 1, 1);

// マテリアルの作成
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// メッシュの作成
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4. アニメーションの作成

アニメーションループを設定し、シーンとカメラをレンダリングします。

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

  // オブジェクトの回転
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

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

5. マウスイベントの追加

マウスの動きに応じて立方体の回転速度を変更するイベントリスナーを追加します。

// マウス位置を追跡する変数
let mouseX = 0;
let mouseY = 0;

// マウスムーブイベントのリスナーを追加
document.addEventListener('mousemove', (event) => {
  // マウスの位置を取得
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});

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

  // マウス位置に応じた回転速度の設定
  cube.rotation.x += 0.01 * mouseY;
  cube.rotation.y += 0.01 * mouseX;

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

完成したコード

全てのコードを一つにまとめると、以下のようになります。

HTMLファイル:

htmlコードをコピーする<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive 3D Animation</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

JavaScriptファイル (script.js):

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

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ジオメトリの作成
const geometry = new THREE.BoxGeometry(1, 1, 1);

// マテリアルの作成
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// メッシュの作成
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// マウス位置を追跡する変数
let mouseX = 0;
let mouseY = 0;

// マウスムーブイベントのリスナーを追加
document.addEventListener('mousemove', (event) => {
  // マウスの位置を取得
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});

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

  // マウス位置に応じた回転速度の設定
  cube.rotation.x += 0.01 * mouseY;
  cube.rotation.y += 0.01 * mouseX;

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