ヘッドウォータース
🦔

初心者がBlenderとThree.jsで3Dロゴ表示するまでにやったこと

doi toshiki
に公開
Blender
HTML
Three.js
3D
tech

はじめに

「Blenderで作成した3DモデルをWeb上に表示したい」
その思いから始まった実践記録です

最終的には Three.js + GLTFLoader を使って、Blenderから出力した .glb ファイルを読み込み、Webブラウザ上でマウス操作可能な3Dロゴを表示できるようになりました

目標

  • Blenderで3Dロゴを作成
  • .glb形式でエクスポート
  • Three.js + HTMLで表示

使用技術・環境

  • Blender 4.x（3Dモデル作成）
  • Three.js（WebGL）
  • GLTFLoader / OrbitControls（Three.js公式アドオン）
  • HTML / CSS / ESModules
  • VSCode + Live Server

ステップ1：Blenderでロゴ作成

手順

  1. Shift + A → 「テキスト」を追加

  2. Tabキーで編集モード → 任意の文字列に変更（例："Logo"）

  3. 「テキストプロパティ」 → 「ジオメトリ」 → 押し出し に厚みを設定（例：0.2）

  4. 右クリック → 「変換」→「メッシュ」へ変換

  5. テキストを選択 → Tabキーで「編集モード」に入る

  6. Aキーで全選択 → Pキー → 「ルーズパーツ」で文字ごとに分離

    👉 これで「L」「o」「g」「o」それぞれが独立したMeshになります

  7. Tabキーでオブジェクトモードに戻る

  8. 各文字オブジェクトを個別に選択し、「マテリアルプロパティ」から色を設定

マテリアルの設定方法

  • 右側の「赤い丸アイコン（マテリアル）」をクリック
  • 「新規」ボタンでマテリアルを作成
  • 「ベースカラー」をクリックして色を変更
  • 他のオブジェクトにも同様に別のマテリアルを設定

ステップ2：glb形式にエクスポート

エクスポート手順

  1. 対象オブジェクトを選択
  2. ファイル > エクスポート > glTF 2.0 (.glb/.gltf)
  3. 以下を設定：
    • フォーマット：glTF Binary (.glb)
    • 「選択オブジェクトのみ」
    • 「+Y前方」
  4. hws-logo.glb として保存

ステップ3：Three.jsでWeb表示

フォルダ構成

LOGO-SPIN/
├── index.html # Webページ本体
├── hws-logo.glb # Blenderから出力した3Dモデル
└── js/
├── three.module.js # Three.js本体
├── GLTFLoader.js # GLB読み込みモジュール
└── OrbitControls.js # マウス操作用モジュール

HTMLファイルを作成（index.html）

  • <script type="module"> を使ってESMモジュールとしてThree.jsを利用
  • ローカルの各JSファイルを相対パスで読み込み
  • Three.jsでScene/Camera/Renderer/Lightを構築し、GLTFLoaderでロゴモデルを読み込み
  • OrbitControlsでマウスによる回転やズーム操作を実装

トラブルと解決策

🔴 問題1：CDN読み込みでモジュールエラー

  • GLTFLoader.js や OrbitControls.js が import { ... } from 'three' と書かれており、ブラウザが相対パスでないため読み込めずエラー
  • 解決：ローカルにすべてのJSを配置し、相対パスで読み込むことでエラー解消

🔴 問題2：three.core.jsが404エラー

  • three.module.js が内部で three/core.js を参照していたが存在せず
  • 解決：ESM互換の three.module.js を正しく取得したバージョンを使用し直す

🔴 問題3：モデル表示されない

  • GLTFLoader.load()でファイルパスが間違っていた or 読み込み後のscale/position未調整
  • 解決：modelのscale・rotation・positionを明示的に設定し、中心に配置

🔴 問題4：ロゴの中心がズレる

  • ロゴがシーンの原点から外れている
  • 解決：Box3で中心を取得 → model.position.sub(center) で補正

🔴 問題5：カメラが遠すぎて見えない

  • Three.jsのカメラ距離が合っておらず、モデルが豆粒のようにしか見えない
  • 解決：モデルのサイズに応じてカメラ距離を自動計算して調整

学び・気づき

  • Blender側で色を設定したマテリアルは、GLB形式でエクスポートすればThree.jsでもそのまま反映される
  • モジュール形式で読み込む場合、相対パス or importmapの明示が必須
  • モデル中心を取る処理や、カメラ距離の自動調整処理は関数化しておくと再利用しやすい
  • CDNではなくローカルで動かすと依存関係の解決が簡単になる

まとめ

  • Blenderでロゴを作成してGLBに変換し、Three.jsで読み込み表示する流れを通して、3DコンテンツのWeb実装の基礎を習得
  • 多くのエラーはパス・中心座標・カメラ距離に起因しており、それぞれのポイントを押さえておけばスムーズに実装可能
  • 今後はインタラクション（ホバー時の色変化・クリック時のアニメーションなど）に発展可能

次回

  • 文字を1文字ずつ分離させ、パズルのようなことができるようにしてみる
  • つくる3Dモデルのレベルを上げてみる（車、景色など）
ヘッドウォータース
ヘッドウォータース

株式会社ヘッドウォータースのテックブログです。 AIエージェント、生成AI、LLM、Azureのサービスや資格、IoT、XR系などData&AIとApp modernizeに関して幅広く投稿します！

Discussion