three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01

『ヤマトよ永遠に REBEL3199』第三章群青のアステロイド（レンタル版）

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

完璧すぎて可愛げがないと婚約破棄された聖女は隣国に売られる

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

わんだふるぷりきゅあ！ざ・むーびー！ドキドキ♡ゲームの世界で大冒険！(Amazon.co.jp限定Tシャツ購入権利コード付き）(7/18 正午まで）

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

『ToHeart』プレミアムエディション -Steam 【特典】TVアニメ『ToHeart』Blu-ray Disc(全13話・2枚組)同梱

商品ページ

Amazon

収益広告（手動登録）

広告掲載ポリシー

映画しまじろうしまじろうとゆうきのうた

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

記事の概要

three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01

作成日：2025-04-13

最終更新日：2025-04-13

記事の文字数：3974

VRoid Webツール情報技術

本記事のトピック

概要
1. JSモジュールの読み込み
2. VRoidモデルの読み込み
3. 表示用canvasの用意
4. シーンの表示
5. ライトの表示
6. VRoidモデルの表示
7. カメラの設定
8. カメラで撮影した内容を表示＆毎フレーム更新
サンプルコードはこちら
今回書けなかった内容

three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01

概要

three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方法を載せています。
以下のステップにしたがってコード例を載せています。

（以降のPartも含めて）本稿で用いるvrmのバージョンは「0」前提です。
座標軸が違うらしいので、1とかを使うと向きが狂うと思います。
サンプルコード内に含んでいるvrmファイルもバージョン0にしています。

WebページにVRoidを表示する大まかなステップ

JSモジュールの読み込み
VRoidモデルの読み込み
表示用canvasの用意
シーンの表示
ライトの表示
VRoidモデルの表示
カメラの設定
カメラで撮影した内容を表示＆毎フレーム更新

また、合わせて実際に動作確認できる（であろう）サンプルコードも下部に載せています。

1. JSモジュールの読み込み

以下のJSモジュール（ライブラリ）を使用しています。

・three.js（Web上で3Dを表示するための基本的なモノが入っている）
・GLTFLoader.js：gltfモデルを読み込む（VRoidもgltfを拡張している）
・OrbitControls.js（カメラを動かせるようにする）
・BufferGeometryUtils.js（GLTFLoader.jsにて使用）
・three-vrm.js（VRoidを読み込むのに使用）

これらのモジュールをあらかじめ以下のように読み込んでおく必要があります（BufferGeometryUtils.jsは不要）。

import * as THREE from './three.module.js'; import { GLTFLoader } from './GLTFLoader.js'; import { OrbitControls } from './OrbitControls.js'; import { VRMLoaderPlugin } from './three-vrm.module.min.js';

2. VRoidモデルの読み込み

VRoidモデルの読み込みは以下で簡単にできます（これは読み込みだけなので、画面上には表示されない）。

// VRoid読み込み const loader = new GLTFLoader(); loader.register((parser) => new VRMLoaderPlugin(parser)); loader.load( './model.vrm', // vrmファイルへのパスを書く (gltf) => { // ここに読み込み完了した後の処理、すなわち「3」以降のコードを書いていく }, (progress) => { // 読み込み中の処理 console.log(`進捗率：${parseInt(100.0 * (progress.loaded / progress.total))}%`); }, (error) => console.error(error) // 読み込み失敗したときの処理 );

説明もコード中にあるので、分からなければ読んでください。

3. 表示用canvasの用意

あらかじめモデル（というより3D空間）をWebページ上に表示するためのcanvasを用意しておきましょう。

// とりあえず縦横300pxとする const canvasWidth = 300; const canvasHeight = 300; // canvasの用意 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize( canvasWidth, // canvasの横幅 canvasHeight // canvasの縦幅 ); document.body.appendChild(renderer.domElement); // canvasを画面上に追加

4. シーンの表示

とにもかくにもシーン（3D空間）の設定が必要です。

// シーンの設定 const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // 背景色の設定

5. ライトの表示

明かりがないと真っ暗です。明かりの設定をします。
ライトのタイプは色々ありますが、ここでは太陽のように特定の場所から光を出して明るくするタイプにしています。

// ライトを設定してシーンに追加 const light = new THREE.DirectionalLight(0xffffff, 3.0); light.position.set(1.0, 1.0, 1.0).normalize(); scene.add(light); // シーンに追加するのを忘れない

6. VRoidモデルの表示

ここでようやくVRoid表示。読み込んだVRMをシーンに追加するのみ。

// VRMモデルを設定してシーンに追加 const vrm = gltf.userData.vrm; scene.add(vrm.scene);

7. カメラの設定

一番大切かもしれない、カメラ設定をします。

必須ではないですが、
OrbitControls（カメラをユーザ操作で動かせるようにする）を使うために「注視点の設定」と、モデルの顔付近にあらかじめカメラを移動しておくための「初期位置」設定も入れています。

// カメラの設定 const camera = new THREE.PerspectiveCamera( 35, canvasWidth / canvasHeight, 0.1, 1000 ); // カメラの初期位置関連の定義 const DEFAULT_CAMERA_CONFIG = { position: { // カメラ初期位置の補正 x: -0.15, y_heightOffset: 0.025, z_distance: 0.4, }, targetPos: { // カメラ注視点の補正 x: 0.04, y: 0, z: 0, } }; // 注視点の設定（頭を基準に調整） const vrmHeadPos = new THREE.Vector3(); vrm.humanoid.getRawBoneNode('head').getWorldPosition(vrmHeadPos); // モデルの頭を基準にする（最初からモデルの顔が出ている状態にしたいので） const controls = new OrbitControls(camera, renderer.domElement); vrmHeadPos.x += DEFAULT_CAMERA_CONFIG.targetPos.x; vrmHeadPos.y += DEFAULT_CAMERA_CONFIG.targetPos.y; vrmHeadPos.z += DEFAULT_CAMERA_CONFIG.targetPos.z; controls.target.copy(vrmHeadPos); // カメラの初期位置の設定（頭を基準に調整） const cameraPos = vrmHeadPos.clone().add( new THREE.Vector3( DEFAULT_CAMERA_CONFIG.position.x, DEFAULT_CAMERA_CONFIG.position.y_heightOffset, DEFAULT_CAMERA_CONFIG.position.z_distance ) ); camera.position.copy(cameraPos); // カメラ設定を反映 controls.update();

8. カメラで撮影した内容を表示＆毎フレーム更新

カメラで撮影した内容をあらかじめ用意しておいたcanvasに表示します。

1回表示するだけなら、「renderer.render(scene, camera);」だけで良いのですが、カメラで撮影した内容を毎フレーム更新するために、以下のように定期的に更新する形にする必要があります。

animate();

function animate() { // 定期的にanimateを呼び出し、canvas表示内容を更新 requestAnimationFrame(animate); renderer.render(scene, camera); }

サンプルコードはこちら

サンプルコードはGitHubにあります。

多分ローカル上では動かないので、どこかのサーバにアップするなりして動作確認してください。

なお、サンプル内に今回使用したJSライブラリ（モジュール）も含んでいます。これらは、three-vrmはピクシブ（Pixiv株式会社）、それ以外はthreejsのオープンソースプロジェクトによって提供されているものなので、公開する際はそのあたりの判断はご自身で行った上でお願いします（と言ってもどちらもMITライセンスなので気にしなくていいかもしれませんが）。

今回書けなかった内容

次書く機会があれば、以下を書こうと思います。