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

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

「ホームページをかっこよく見せたい」「シンプルに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>

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

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

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

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

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

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

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 });

デモ4：カメラ操作

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

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を呼び出すのが安全

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


　関連記事

  • PHP7.4.33からPHP8.3への移行ポイント：互換性・新機能・対応策まとめ
  • PHPアップデート後にWordPressが真っ白に？致命的エラーから復旧する方法
  • HULFT連携：Javaからユーティリティコマンドを呼び出す実装例
  • ログ出力が一気に効率化！log4j2を使うべき場面とは
  • JavaScriptなしで実現！HTML5 Canvasアニメーションで魅せるWeb装飾

    • 0 0 票
    Article Rating
    申し込む
    注目する
    guest
    0 コメント一覧
    最も古い
    最新 高評価
    インラインフィードバック
    すべてのコメントを見る

    Ads by Google
    0 0 票
    Article Rating
    申し込む
    注目する
    guest
    0 コメント一覧
    最も古い
    最新 高評価
    インラインフィードバック
    すべてのコメントを見る
    0
    あなたの考えが大好きです、コメントしてください。x