three.jsを使用して、MMD 3Dモデルの向き、ポーズの指定

three.jsを使用して、MMD 3Dモデルを表示してみました。
three.jsを使用して、MMD 3Dモデルを表示する最小構成の要素

こちらを修正し、モデルの向きやポーズのつけ方を見ていきます。


モデルの向き


MMDLoaderでロードしたmeshのrotationで向きの指定が可能です。
こちらが参考になりました。
Three.js 物体の回転(rotation)


  1. // rotation.set(x, y, z) 単位はラジアン
  2. mesh.rotation.set(0, Math.PI/2, 0);
  3. // 以下のように、x,y,z要素各々に対し直接指定が可能
  4. mesh.rotation.x = 0;
  5. mesh.rotation.y = Math.PI/2;
  6. mesh.rotation.z = 0;




サンプルはこのようになりました。

・index.html


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">    
  6.     <style>
  7.         body { margin: 0; }
  8.     </style>
  9.     <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  10. <script type="importmap">
  11. {
  12.     "imports": {
  13.         "three": "https://unpkg.com/three/build/three.module.js",
  14.         "three/addons/": "https://unpkg.com/three/examples/jsm/"
  15.     }
  16. }
  17. </script>
  18.     <title>MMD 3Dモデルの表示</title>
  19. </head>
  20. <body>
  21. <script type="module">
  22.     import * as THREE from 'three';
  23.     import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
  24.     //-----------------------------------------------------------------------------------------------
  25.     // シーン、カメラの準備
  26.     //-----------------------------------------------------------------------------------------------
  27.     // レンダラーを作成
  28.     const renderer = new THREE.WebGLRenderer({ antialias: true });
  29.     // 描画サイズの設定
  30.     renderer.setSize(window.innerWidth, window.innerHeight);
  31.     // 背景の色と透明度の設定
  32.     // setClearColor ( color : Color, 透過度 : Float )
  33.     renderer.setClearColor( 0xffffff, 1.0 );
  34.     // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
  35.     document.body.appendChild(renderer.domElement);
  36.     // シーンを作成
  37.     const scene = new THREE.Scene();
  38.     // ライト(環境光)を作成し、シーンに追加
  39.     // AmbientLight( color : Color, 強度 : Float )
  40.     scene.add(new THREE.AmbientLight(0xffffff, 0.75));
  41.     
  42.     // カメラを作成
  43.     // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
  44.     // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
  45.     // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
  46.     const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
  47.     // カメラ位置調整
  48.     camera.position.copy(new THREE.Vector3(0, 10, 30));
  49.     //-----------------------------------------------------------------------------------------------
  50.     // MMD 3Dモデルのロードとシーンへの追加
  51.     //-----------------------------------------------------------------------------------------------
  52.     // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
  53.     const loader = new MMDLoader();
  54.     // .pmd / .pmx ファイルの読込
  55.     // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
  56.     loader.load (
  57.         // ロードする PMD/PMX ファイル
  58.         'Alicia/MMD/Alicia_solid.pmx',
  59.         // ロード成功時の処理
  60.         function (mesh) {
  61.             // rotation.set(x, y, z) 単位はラジアン
  62.             mesh.rotation.set(0, Math.PI/2, 0);
  63.             // 以下のように、x,y,z要素各々に対し直接指定が可能
  64.             //mesh.rotation.x = 0;
  65.             //mesh.rotation.y = Math.PI/2;
  66.             //mesh.rotation.z = 0;
  67.             // メッシュをシーンに追加
  68.             scene.add(mesh);
  69.         }
  70.     );
  71.     // レンダリングループ
  72.     function animate() {
  73.         window.requestAnimationFrame( animate );
  74.         // OutlineEffectの適用
  75.         // render ( scene : Object3D, camera : Camera )
  76.         renderer.render(scene, camera);
  77.     }
  78.     animate();
  79. </script>
  80. </body>
  81. </html>



視線の向きが90度変わっています。



腕の位置の変更


ポーズ指定は、MMDLoader.loadVPDでポーズ情報が記載されたファイルを読み込み。
MMDAnimationHelperで反映すれば良いようです。
MMDAnimationHelper

ポーズ情報はこちらからお借りしました。
https://bowlroll.net/file/155155

「01キメポーズ.vpd」を「pose.vpd」にリネーム。
index.htmlと同じ階層に配置しておきます。

サンプルはこのようになりました。

・index.html


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">    
  6.     <style>
  7.         body { margin: 0; }
  8.     </style>
  9.     <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  10. <script type="importmap">
  11. {
  12.     "imports": {
  13.         "three": "https://unpkg.com/three/build/three.module.js",
  14.         "three/addons/": "https://unpkg.com/three/examples/jsm/"
  15.     }
  16. }
  17. </script>
  18.     <title>MMD 3Dモデルの表示</title>
  19. </head>
  20. <body>
  21. <script type="module">
  22.     import * as THREE from 'three';
  23.     import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
  24.     // MMDAnimationHelperのロードを追加
  25.     import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
  26.     
  27.     //-----------------------------------------------------------------------------------------------
  28.     // シーン、カメラの準備
  29.     //-----------------------------------------------------------------------------------------------
  30.     // レンダラーを作成
  31.     const renderer = new THREE.WebGLRenderer({ antialias: true });
  32.     // 描画サイズの設定
  33.     renderer.setSize(window.innerWidth, window.innerHeight);
  34.     // 背景の色と透明度の設定
  35.     // setClearColor ( color : Color, 透過度 : Float )
  36.     renderer.setClearColor( 0xffffff, 1.0 );
  37.     // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
  38.     document.body.appendChild(renderer.domElement);
  39.     // シーンを作成
  40.     const scene = new THREE.Scene();
  41.     // ライト(環境光)を作成し、シーンに追加
  42.     // AmbientLight( color : Color, 強度 : Float )
  43.     scene.add(new THREE.AmbientLight(0xffffff, 0.75));
  44.     
  45.     // カメラを作成
  46.     // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
  47.     // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
  48.     // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
  49.     const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
  50.     // カメラ位置調整
  51.     camera.position.copy(new THREE.Vector3(0, 10, 30));
  52.     //-----------------------------------------------------------------------------------------------
  53.     // MMD 3Dモデルのロードとシーンへの追加
  54.     //-----------------------------------------------------------------------------------------------
  55.     // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
  56.     const loader = new MMDLoader();
  57.     const helper = new MMDAnimationHelper();
  58.     // .pmd / .pmx ファイルの読込
  59.     // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
  60.     loader.load (
  61.         // ロードする PMD/PMX ファイル
  62.         'Alicia/MMD/Alicia_solid.pmx',
  63.         // ロード成功時の処理
  64.         function (mesh) {
  65.             // メッシュをシーンに追加
  66.             scene.add(mesh);
  67.             // meshがロード出来たらポーズ情報取得
  68.             loader.loadVPD(
  69.                 'pose.vpd', // ポーズファイル
  70.                 false, // isUnicode -> ダウンロードしたファイルがms932形式等ならfalseを指定
  71.                 function(pose) {
  72.                     // ポーズ設定
  73.                     helper.pose( mesh, pose);
  74.                 }
  75.             );
  76.         }
  77.     );
  78.     // レンダリングループ
  79.     function animate() {
  80.         window.requestAnimationFrame( animate );
  81.         // OutlineEffectの適用
  82.         // render ( scene : Object3D, camera : Camera )
  83.         renderer.render(scene, camera);
  84.     }
  85.     animate();
  86. </script>
  87. </body>
  88. </html>



指定したポーズになりました。



Promiseを使用して、3Dデータとポーズ情報を並行してダウンロードすると
もう少しソースがすっきりするかもしれません。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">    
  6.     <style>
  7.         body { margin: 0; }
  8.     </style>
  9.     <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  10. <script type="importmap">
  11. {
  12.     "imports": {
  13.         "three": "https://unpkg.com/three/build/three.module.js",
  14.         "three/addons/": "https://unpkg.com/three/examples/jsm/"
  15.     }
  16. }
  17. </script>
  18.     <title>MMD 3Dモデルの表示</title>
  19. </head>
  20. <body>
  21. <script type="module">
  22.     import * as THREE from 'three';
  23.     import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
  24.     // MMDAnimationHelperのロードを追加
  25.     import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
  26.     
  27.     //-----------------------------------------------------------------------------------------------
  28.     // シーン、カメラの準備
  29.     //-----------------------------------------------------------------------------------------------
  30.     // レンダラーを作成
  31.     const renderer = new THREE.WebGLRenderer({ antialias: true });
  32.     // 描画サイズの設定
  33.     renderer.setSize(window.innerWidth, window.innerHeight);
  34.     // 背景の色と透明度の設定
  35.     // setClearColor ( color : Color, 透過度 : Float )
  36.     renderer.setClearColor( 0xffffff, 1.0 );
  37.     // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
  38.     document.body.appendChild(renderer.domElement);
  39.     // シーンを作成
  40.     const scene = new THREE.Scene();
  41.     // ライト(環境光)を作成し、シーンに追加
  42.     // AmbientLight( color : Color, 強度 : Float )
  43.     scene.add(new THREE.AmbientLight(0xffffff, 0.75));
  44.     
  45.     // カメラを作成
  46.     // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
  47.     // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
  48.     // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
  49.     const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
  50.     // カメラ位置調整
  51.     camera.position.copy(new THREE.Vector3(0, 10, 30));
  52.     //-----------------------------------------------------------------------------------------------
  53.     // MMD 3Dモデルのロードとシーンへの追加
  54.     //-----------------------------------------------------------------------------------------------
  55.     // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
  56.     const loader = new MMDLoader();
  57.     const helper = new MMDAnimationHelper();
  58.     // .pmd / .pmx ファイルの読込
  59.     // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
  60.     Promise.all([
  61.         // モデルのロード
  62.         new Promise((resolve, reject) => {
  63.             loader.load (
  64.                 'Alicia/MMD/Alicia_solid.pmx', // ロードする PMD/PMX ファイル
  65.                 resolve, // ロード成功時の処理
  66.                 null, // 進捗
  67.                 reject // ロード失敗時の処理
  68.             );
  69.         }),
  70.         // ポーズ情報のロード
  71.         new Promise((resolve, reject) => {
  72.             loader.loadVPD (
  73.                 'pose.vpd', // ポーズファイル
  74.                 false, // isUnicode -> ダウンロードしたファイルがms932形式等ならfalseを指定
  75.                 resolve, // 成功時
  76.                 null, // 進捗
  77.                 reject // 失敗時
  78.             );
  79.         }),
  80.     ]).then((results) => {
  81.         const [mesh, pose] = results;
  82.         // ポーズ設定
  83.         helper.pose( mesh, pose);
  84.         // メッシュをシーンに追加
  85.         scene.add(mesh);
  86.     });
  87.     
  88.     
  89.     // レンダリングループ
  90.     function animate() {
  91.         window.requestAnimationFrame( animate );
  92.         // OutlineEffectの適用
  93.         // render ( scene : Object3D, camera : Camera )
  94.         renderer.render(scene, camera);
  95.     }
  96.     animate();
  97. </script>
  98. </body>
  99. </html>



動作は同じになります。

動作サンプルはこちら。
https://symfo.web.fc2.com/js-sample/three/sample2.html


【参考URL】
Three.js 物体の回転(rotation)
関連記事

コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
https://symfo.web.fc2.com/

PR

検索フォーム

月別アーカイブ