商品サンプル画像
タカラトミー プロ野球トミカ2025 阪神タイガース マスコットカー
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
TAMASHII NATIONS S.H.フィギュアーツ ヱヴァンゲリヲン新劇場版 式波・アスカ・ラングレー 約135mm PVC&ABS製 塗装済み可動フィギュア
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
TAMASHII NATIONS S.H.フィギュアーツ MARVEL サイクロップス(GAMERVERSE) 約155mm PVC&ABS製 塗装済み可動フィギュア
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
タカラトミー No.109 ホンダ ヴェゼル(初回
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
タカラトミー ドリームトミカ ちいかわ 古本屋
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
記事の概要
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01
作成日:2025-04-13
最終更新日:2025-04-13
記事の文字数:3974
VRoidWebツール情報技術
本記事のトピック
  • 概要
  • 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を表示する大まかなステップ

  1. JSモジュールの読み込み
  2. VRoidモデルの読み込み
  3. 表示用canvasの用意
  4. シーンの表示
  5. ライトの表示
  6. VRoidモデルの表示
  7. カメラの設定
  8. カメラで撮影した内容を表示&毎フレーム更新

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

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ライセンスなので気にしなくていいかもしれませんが)。

今回書けなかった内容

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

  • ポーズ / 表情の変更方法
  • 口の形の変更方法
  • (ほどほどだけど)きちんとカメラ目線にする
  • 変なテクスチャが表示されてしまう問題→サンプルコードで使用しているVRoidの首や背中に黒いテクスチャが出る
  • 解像度問題の対応→スマホのような高解像度端末だと、表示が綺麗にならない
コメントログ
※コメントは最新50件が表示されます
コメント投稿




画面下部の「コンタクト」からも連絡可能です。
管理人ツイート
商品サンプル画像
TAMASHII NATIONS S.H.フィギュアーツ ヱヴァンゲリヲン新劇場版 綾波レイ 約135mm PVC&ABS製 塗装済み可動フィギュア
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
タカラトミー プロ野球トミカ2025 東京ヤクルトスワローズ マスコットカー
商品ページ
Amazon
収益広告(自動登録)
商品サンプル画像
TAMASHII NATIONS 超合金 バック・トゥ・ザ・フューチャー PART3 TIME TRAIN 約520mm ABS&ダイキャスト&PVC製 塗装済み可動フィギュア
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
商品サンプル画像
TAMASHII NATIONS METAL BUILD エヴァンゲリオンシリーズ エヴァンゲリオン初号機 30th with the spear of Gaius 約220mm ABS&PVC&ダイキャスト製 塗装済み可動フィギュア
商品ページ
Amazon
収益広告(自動登録)
※Amazonレビュー要確認
管理人作品宣伝
VRoidポーズ集-Part03
3Dモデル / 最終更新:2024-12-03
VRoidのポーズデータ(vroidpose)集です。 写真とかによくありそうなポーズ…VRoidのポーズデータ(vroidpose)集です。 写真とかによくありそうなポーズが中心に入っています。

Boothで閲覧する利用素材等の詳細情報
剣と魔法と学園モノ。3 - パーティ編成確認ツール
Webサイト / 最終更新:2025-03-10
『ととモノ。3』のパーティ編成を考える際に使えるツールです。…『ととモノ。3』のパーティ編成を考える際に使えるツールです。

HPで閲覧する利用素材等の詳細情報
作品一覧はこちら
関連ページ
JavaScriptでアナログ時計とデジタル時計を表示するコード
最終更新日:2025-05-29
概要 最近アナログ時計を使ったので、アナログ時計を表示するJavaScriptコードを載せます。 …
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-03
最終更新日:2025-04-20
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-02
最終更新日:2025-04-15
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する Part-01
最終更新日:2025-04-13
概要 three.js・three-vrm.jsを使用して、VRoidをWebページ上に表示する方…
記事を閲覧する
GIF / APNG(アニメーション付きPNG)ファイル解析ページ
最終更新日:2025-03-31
ファイル読込・操作 以下に調べたいファイルを読み込ませてください。 ファイル情報 カラーパレットを…
記事を閲覧する
gifler.js仕様メモ
最終更新日:2025-03-23
本ページの趣旨 「gifler.js」という、gifアニメーションをcanvasに簡単に表示できる…
記事を閲覧する
普通の文章をホラーっぽく変換
最終更新日:2024-12-24
テキスト:ホラー変換 ※表示までに時間が掛かることがあります。 変換結果 …
記事を閲覧する
【プログラミング】実例で分かるかもしれない再帰処理
最終更新日:2024-12-15
本ページは以下動画の台本を書き起こしたものです 解説の趣旨・方向性 皆さん、こんばんは今回はプログ…
記事を閲覧する
管理人について
最終更新日:2024-12-12
「ふじみ むい」と言います ひょんなことから肉体を得たのでその肉体を使って活動をしています。 とい…
記事を閲覧する
SNSツイート一元化対応(Twitter・Misskey・Mastodon・Bluesky)-公開
最終更新日:2024-12-06
概要 SNSツイートを一元化するためのツールを作成しています(古い記事ですが、こちらのページで紹介…
記事を閲覧する
本サイトのタグ一覧
NovelAIR18VRoidWebサイト作成Webツールととモノ。アークナイツアークナイツ-ステージ攻略日記アズールレーンアズールレーン-日記ウマ娘ギャラリーゲームデビラビローグネットスラング系プログラミングホラーポケットタウン怪談気ままな日記情報技術情報技術-WebAPI知的財産権統合戦略白夜極光本サイトについて魔王スライム様がんばる!漫画
人気記事
ポケットタウン_パズル一覧
最終更新日:2025-05-02
スコア:680.6655 pt
グレーのピースの数 (Number of gray pieces):検索グレーピースの数を入力して、…
記事を閲覧する
メイド・オブ・ザ・デッド-攻略お助け情報
最終更新日:2024-05-01
スコア:581.4405 pt
ネタバレ注意! 本ページは『メイド・オブ・ザ・デッド』の情報を記録しているものです。 攻略の参考に…
記事を閲覧する
剣と魔法と学園モノ。2G - パーティ編成確認ツール
最終更新日:2024-05-09
スコア:185.3617 pt
ツール概要 ととモノ。2Gのパーティ編成を考える際に使うツールです。 あくまでストーリークリアまで…
記事を閲覧する
ゲーム『イカれた狩場の看板娘』の紹介・レビュー
最終更新日:2025-05-01
スコア:135.8696 pt
記事概要 イカれたゲームを紹介するぜ! イカれた狩場の看板娘! 以上だ! ちなみにそんなイカれてな…
記事を閲覧する
アークナイツ-常設商品-理性換算
最終更新日:2024-04-28
スコア:132.2609 pt
概要 "常設商品でお得な商品はどれか"というのを理性に換算して一覧化したものとなります。 絶対的に…
記事を閲覧する
黒バス:キセキの世代級の人たちの技一覧
最終更新日:2024-07-21
スコア:123.4495 pt
黒バスのキセキの世代級の人たちの技一覧です 概要 黒バスのキセキの世代級の人たちの技を記載したもの…
記事を閲覧する
本サイトについて
最終更新日:2025-06-11
スコア:113.0841 pt
本サイトの概要 概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報に…
記事を閲覧する
地獄先生ぬ~べ~で好きな切ないエピソード
最終更新日:2025-05-19
スコア:105.0909 pt
概要 初代というべきか、週刊少年ジャンプで連載されていた地獄先生ぬ~べ~の切ないエピソードの中で好…
記事を閲覧する
最新記事
htmlタグ混在のテキストをhtmlタグとプレーンテキストで分けるJavaScriptコード
最終更新日:2025-06-20
概要 「よくある質問は a href="/" こ span ち /span ら /a です」 とい…
記事を閲覧する
htmlタグ混在のテキストを1行ずつ左から右へワイプ表示する - JavaScript / CSSコード
最終更新日:2025-06-16
JavaScript全文コード 使い方 以下のJavaScriptとCSSコードを読み込んで、Te…
記事を閲覧する 返礼特典
htmlタグ混在のテキストを1行ずつ左から右へワイプ表示する
最終更新日:2025-06-16
概要 ここでは以下のようにテキストを一行ずつ左から右に表示するJavaScriptコードを載せてい…
記事を閲覧する
本サイトについて
最終更新日:2025-06-11
本サイトの概要 概要 個人ブログのようなものです。とくにジャンルはありません。 本サイト内の情報に…
記事を閲覧する
商品サンプル画像
グッドスマイルカンパニー[GOOD SMILE COMPANY] PLAMATEA キューティハニーNova キューティーハニー ノンスケール 組み立て式プラモデル
商品ページ
Amazon
収益広告(自動登録)