初心者でも簡単！ホームページで3Dモデルを表示する方法

2025 11/29

2025/11/29

はじめに

目的

この文書は、ホームページ上で3Dモデルを表示する方法をわかりやすくまとめた入門ガイドです。初めて3Dを扱う方にも読めるよう、基本概念と実装の流れを丁寧に説明します。

対象読者

ウェブサイトに3Dコンテンツを追加したい方
Three.jsなどをこれから学ぶ開発者
デザイナーや制作担当で実装の全体像を知りたい方

本書で扱う内容（概要）

3Dモデル表示に必要な基本知識（ファイル形式・軽量化・ブラウザ対応）
利用できるツールとライブラリの紹介（Sketchfab、Google Model Viewer、A-Frame、Three.js）
Three.jsを中心とした実装手順とコード例

前提と準備

基本的なHTML/CSSの知識があると読みやすいです。サンプルはブラウザ上で動かすことを想定しており、特別なサーバ設定は不要な例を優先します。

注意点

ブラウザやデバイスによって表示性能が異なります。表示するモデルは適切に軽量化し、ユーザー体験を優先して設計してください。

ホームページで3Dモデルを表示する方法 – 初心者向け完全ガイド

概要

ホームページに3Dモデルを置くには、まずファイルを公開する場所（ホスティング）が要ります。その上で、手軽な方法と自由度の高い方法のどちらかを選びます。

準備するもの

3Dファイル（推奨: glTF/glbは軽く読み込みが速い）
テクスチャやマテリアル（必要なら）
サーバーやホスティングサービス（GitHub Pagesやレンタルサーバー）

方法1：専用プラットフォームを使う（手軽）

Sketchfabなどにアップロードして、埋め込み用のiframeコードを取得します。設定や共有が簡単で、初心者向けです。短時間で公開できます。

方法2：Web技術／ライブラリを使う（柔軟）

model-viewer: HTMLのタグだけで扱えます。導入が簡単で、タッチ操作やライトも対応。
A-Frame: VR対応を見据えたフレームワーク。シーンやカメラを直感的に作れます。
Three.js: 最も自由度が高く、細かな制御や独自表現が可能です。学習は必要ですが長期的に有利です。

実装のポイント

ファイルサイズを軽くする（テクスチャ圧縮、ポリゴン削減）
モデルの公開先とパスを正しく設定する
レスポンシブ対応でスマホでも見やすくする

これらを押さえれば、初心者でも段階的に3D表示を始められます。次章では専用プラットフォーム（Sketchfab）の具体的な手順を説明します。

専用プラットフォーム – Sketchfab

概要

Sketchfabは、3DモデルをアップロードするだけでWeb上にインタラクティブなビューワーを自動生成する専用プラットフォームです。YouTubeの動画を埋め込む感覚で、他のサイトにモデルを表示できます。初心者でも手軽に始められる点が魅力です。

主な特徴

ブラウザ上で回転・拡大・視点変更が可能
マテリアルやライト設定を簡単に調整できるビューワー
モデルごとに説明やタグを付けられる

対応ファイル形式

一般的なフォーマットに対応しています。代表例はGLB、OBJ、FBXなどです。複数のテクスチャやマテリアルを含むファイルも扱えます。

使い方（初心者向け）

アカウントを作成します。
モデルファイルをアップロードします（ドラッグ＆ドロップ可能）。
ビューワー上でマテリアルやライティングを調整します。
公開設定を選んで保存します。

実際はアップロード後に自動でプレビューが生成され、設定画面で見た目を確認できます。

埋め込み方法

共有メニューから埋め込みコード（iframe）を取得します。そのままHTMLに貼り付けるだけで表示できます。サイズや表示オプションをURLパラメータで調整できます。

無料プランと制限

無料プランで基本機能を試せますが、商用利用や高解像度テクスチャ、プライベートモデルの数には制限があります。用途に応じて有料プランを検討してください。

活用のコツ

まずは小さなモデルで試して操作に慣れましょう。
テクスチャは適切な解像度にして読み込み時間を抑えると快適です。
説明文やタグを充実させると閲覧者に伝わりやすくなります。

この章ではSketchfabの基本を押さえ、手軽に3DモデルをWebで公開する流れを理解できるようにしました。次章ではHTMLだけで3Dモデルを表示する別の方法を紹介します。

Google Model Viewer – HTMLだけで実装

概要

Googleが提供するは、HTMLだけで3Dモデルを簡単に表示できるカスタム要素です。GLB/gltf形式をそのまま読み込み、スマートフォンのAR表示にも対応します。画像を置く感覚で使える手軽さが魅力です。カスタマイズは限定的ですが、シンプルな用途には最適です。

基本の使い方

まずライブラリを読み込み、タグにモデルを指定します。例:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="model.glb" alt="サンプル" camera-controls auto-rotate ar style="width:600px; height:400px;"></model-viewer>

この例では回転・ズームを有効にし、ARを許可しています。

よく使う属性（簡単説明）

src: モデルファイルのURL
alt: 代替テキスト（アクセシビリティ）
camera-controls: マウスや指で操作可能にする
auto-rotate: 自動回転を有効にする
ar: ARモードを有効にする（対応端末で使用）
poster: 読み込み前の表示画像

注意点

モデルは最適化（ポリゴン数・テクスチャ）すると読み込みが速くなります。
CORS設定やファイル形式に注意してください。
高度な表現や独自の挙動が必要ならThree.js等を検討してください。

A-Frame – VR/WebXR対応フレームワーク

A-Frameとは

A-FrameはHTMLに近い記述で3DやVRを作るフレームワークです。内部でThree.jsを使っており、JavaScriptが苦手な方でも直感的にシーンを組めます。WebXR対応でブラウザからVR体験を提供できます。

特徴

HTMLライクなタグで記述できるため学習コストが低いです。
VR・WebXRに対応し、ヘッドセットでの表示やコントローラー入力を扱えます。
コンポーネント方式で機能を追加しやすいです。

基本の使い方（簡単な例）

下のようにHTMLに書くだけで3Dシーンが表示できます。

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
  <a-box position="0 1 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

コンポーネントとエンティティ

エンティティ（a-entityなど）にコンポーネントを付けて機能を追加します。独自コンポーネントを作れば動きやインタラクションを簡単に定義できます。

VR/WebXR対応のポイント

a-sceneにvr-mode-uiやwebxrの設定があり、ボタン一つでVRモードに入れます。
コントローラーや視線操作を扱うコンポーネントが用意されています。

注意点と使いどころ

ブラウザ互換や性能に注意が必要です。手早くVR体験や空間的なUIを作るのに向いています。細かなレンダリング制御が必要ならThree.jsとの併用を検討してください。

Three.js – 完全カスタマイズ可能なJavaScriptライブラリ

概要

Three.jsはWebGLの複雑さを隠し、ブラウザ上で高品質な3D表現を可能にするJavaScriptライブラリです。ズームや回転、アニメーションを自由に作れ、GLB/glTFの読み込みにも対応します。初心者から高度な表現まで幅広く使えます。

主な要素と役割

シーン(scene): 3D空間の入れ物です。
カメラ(camera): 観察点を決めます（例: PerspectiveCamera）。
レンダラー(renderer): 画面に描画します（例: WebGLRenderer）。
メッシュ(mesh)とマテリアル(material): 形と見た目を作ります。
ライト(light): 明るさや影を作ります。
ローダー(loader): GLTFLoaderでGLBを読み込みます。

簡単な流れ（イメージ）

シーンとカメラ、レンダラーを作成
メッシュやライトを追加
GLBをローダーで読み込む
アニメーションループでrenderer.render(scene, camera)を呼ぶ

カスタマイズ例

OrbitControlsで視点操作を有効にする
アニメーションミキサーでモデルを再生する
ポストプロセスでエフェクトを追加する

注意点

モバイルでは描画負荷に注意してください。テクスチャサイズやポリゴン数を調整すると改善します。
外部モデル読み込み時はCORS設定が必要なことがあります。

Three.jsは自由度が高く、目的に応じて段階的に学べるため、おすすめの選択肢です。

Three.jsの基本的な実装ステップ

Three.jsで3Dグラフィックスを表示する基本は7つの手順です。ここでは各手順の目的と、実際に使う最小限のコード例をやさしく説明します。

1. Three.jsの読み込み

公式CDNかnpmで読み込みます。
例: <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script> または import * as THREE from 'three';

2. シーンの作成

オブジェクトを置く「箱」です。
例: const scene = new THREE.Scene();

3. カメラの作成

画面の視点を決めます。代表はPerspectiveCamera。
例: const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000); camera.position.z = 5;

4. レンダラーの作成

描画するためのエンジンです。CanvasをDOMに追加します。
例: const renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(width,height); document.body.appendChild(renderer.domElement);

5. オブジェクトの作成

ジオメトリとマテリアルでメッシュを作り、シーンに追加します。
例: const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const cube = new THREE.Mesh(geometry, material); scene.add(cube);

6. アニメーション設定

毎フレームの更新処理を用意します。
例: function animate(){ requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene,camera); } animate();

7. レンダリングと調整

animate内でrenderer.render(scene, camera)を呼び描画します。ウィンドウリサイズ時はカメラのアスペクト比とレンダラーサイズを更新してください。

ポイント: 照明やコントロール（OrbitControls）、外部モデル（GLTFLoader）を順に追加すると拡張しやすいです。まずは上の7手順を動かして基礎を確認しましょう。

Three.jsの実装例

概要

Three.jsでの基本的な実装例を示します。シーン作成、カメラ設定、レンダラーの配置、GLTFLoaderでのモデル読み込み、アニメーションループでの回転を含みます。

必要な準備

three.module.js と GLTFLoader を読み込む
モデル（model.gltf）を用意

基本コード例

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 3);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const light = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
scene.add(light);

let model = null;
const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => { model = gltf.scene; scene.add(model); });

function animate(){
  requestAnimationFrame(animate);
  if(model) model.rotation.y += 0.01; // 回転アニメーション
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => { camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

補足と注意点

モデルの中心やスケールは読み込み後に調整してください。
回転速度は0.01を目安に変更できます。
マウス操作を付けたい場合はOrbitControlsを追加すると便利です。

より実践的な実装 – 8ステップの詳細

ステップ1: Three.jsの導入

Three.js本体、OrbitControls、GLTFLoaderを用意します。npmなら
– npm install three
– または
といった読み込みで始めます。OrbitControlsで回転操作、GLTFLoaderでモデル読み込みを行います。

ステップ2: レンダラーの作成

Canvasを用意し、rendererを作ります。例: renderer.setSize(window.innerWidth, window.innerHeight)でサイズ設定します。pixelRatioは高解像度画面対策に設定します。

ステップ3: シーンの作成

シーンを作り、背景色を設定します。scene.background = new THREE.Color(0xdddddd) のようにして落ち着いた背景が得られます。

ステップ4: ライトの設定

環境光(AmbientLight)で全体を明るくし、平行光(DirectionalLight)や半球光(HemisphereLight)で陰影を作ります。ライトは位置や強さを調整してモデルの見え方を整えます。

ステップ5: カメラ設定

PerspectiveCameraを使い、fov・アスペクト比・near/farを指定します。カメラ位置はモデルを正面から捉えるように配置し、camera.lookAt(model.position)で中心を見るようにします。

ステップ6: モデル読み込みと調整

GLTFLoaderでモデルを読み込み、position/scale/rotationで大きさと向きを調整します。マテリアルが暗ければ環境マップや色を調整してください。

ステップ7: アニメーションとレンダーループ

requestAnimationFrameで描画ループを回し、AnimationMixerでアニメーション再生します。window.resizeイベントでrendererとcameraのサイズを更新して表示崩れを防ぎます。

ステップ8: パフォーマンスとデプロイ

テクスチャ圧縮やDraco圧縮、glTFバイナリ化で読み込みを速めます。必要に応じて遅延読み込みやLODを導入します。完成後はCDNや静的ホスティングにデプロイして動作確認を行ってください。

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

user