Webデザイン - 覚え書き.com

「ホームページをかっこよく見せたい」「シンプルに3D演出を加えてみたい」──そんなときに役立つのが Three.js です。
JavaScriptだけで3Dオブジェクトを動かせる便利なライブラリで、近年のWebサイトでも多く使われています。

この記事では 最新版 Three.js (r180) を使って、実際に「回転する立方体」を表示するサンプルを紹介します。

1. Three.jsとは？

Three.js は WebGL をラップしたライブラリで、難しい低レベルコードを書かなくても以下のような処理が可能です。

3Dオブジェクトの作成（立方体・球体・モデルの読み込み）
カメラの制御
ライトの設置
マテリアルやシェーダーの設定
アニメーション処理

2. サンプルコード（最新版 Three.js r180 対応）

以下は 最小構成のサンプル です。
HTMLファイルを作成して保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Three.js r180 Sample</title>
  <style>
    body { margin:0; }
    canvas { display:block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(),
      new THREE.MeshBasicMaterial({ color: 0x00aaff })
    );
    scene.add(cube);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    addEventListener("resize", () => {
      renderer.setSize(innerWidth, innerHeight);
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Three.js r180 Sample</title>

<style>

body { margin:0; }

canvas { display:block; }

</style>

</head>

<body>

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);

camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(

new THREE.BoxGeometry(),

new THREE.MeshBasicMaterial({ color: 0x00aaff })

);

scene.add(cube);

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

addEventListener("resize", () => {

renderer.setSize(innerWidth, innerHeight);

camera.aspect = innerWidth / innerHeight;

camera.updateProjectionMatrix();

});

</script>

</body>

</html>

3. デモ（実際に動くサンプル）

このブログ記事では、外部ファイルとして用意したサンプルhtmlを iframe で埋め込んで表示してます。

デモ1：基本の回転する立方体

👇 実際に回転する立方体が表示されます。

デモ2：ライトを使った立方体

光源を加えることで、立方体に陰影がつき、立体感が増します。

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

const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(5, 5, 5).normalize();

scene.add(light);

デモ3：マテリアル変更

単色ではなく、ワイヤーフレームや透過マテリアルを適用できます。

const material = new THREE.MeshNormalMaterial({ wireframe: true });

1	const material = new THREE.MeshNormalMaterial({ wireframe: true });

デモ4：カメラ操作

OrbitControlsを使うと、マウスで回転・拡大縮小できるインタラクティブなデモが可能です。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

1 2	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement);

4. ローカルで動かすには？

上記のコードをコピーして test.html などの名前で保存 → ブラウザで開いても、真っ白になる場合があります。
これは ES Modules を使う Three.js の最新版では、file:/// での読み込みがセキュリティ上ブロックされるためです。

✅ 解決方法

ローカルで動かすには 簡易Webサーバ を立ち上げる必要があります。

例:

Python がある場合
python -m http.server 8000
Node.js がある場合
npx http-server -p 8000

その後、ブラウザで
http://localhost:8000/test.html
を開くと正しく表示されます。

5. まとめ

Three.jsを使えば簡単に3D演出を加えられる
最新版 (r180) は ES Modules形式 → file:/// では動作しない
実際の環境では Webサーバ経由で実行する必要がある
WordPress記事に埋め込む場合は iframe で外部HTMLを呼び出すのが安全

これをベースに、さらにライト・カメラ操作・外部モデル読み込みを試していけば、よりリッチな演出を作れます！

覚え書き.com

「Webデザイン」タグアーカイブ

Three.jsで簡単3D演出！初心者でもホームページをかっこよくする方法

1. Three.jsとは？

2. サンプルコード（最新版 Three.js r180 対応）

3. デモ（実際に動くサンプル）

デモ1：基本の回転する立方体

デモ2：ライトを使った立方体

デモ3：マテリアル変更

デモ4：カメラ操作

4. ローカルで動かすには？

✅ 解決方法

5. まとめ

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

1. Three.jsとは？

2. サンプルコード（最新版 Three.js r180 対応）

3. デモ（実際に動くサンプル）

デモ1：基本の回転する立方体

デモ2：ライトを使った立方体

デモ3：マテリアル変更

デモ4：カメラ操作

4. ローカルで動かすには？

✅ 解決方法

5. まとめ

関連記事

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

　関連記事