three.jsを使用して、MMD 3Dモデルの向き、ポーズの指定
three.jsを使用して、MMD 3Dモデルを表示してみました。three.jsを使用して、MMD 3Dモデルを表示する最小構成の要素
こちらを修正し、モデルの向きやポーズのつけ方を見ていきます。
モデルの向き
MMDLoaderでロードしたmeshのrotationで向きの指定が可能です。
こちらが参考になりました。
Three.js 物体の回転(rotation)
- // rotation.set(x, y, z) 単位はラジアン
- mesh.rotation.set(0, Math.PI/2, 0);
- // 以下のように、x,y,z要素各々に対し直接指定が可能
- mesh.rotation.x = 0;
- mesh.rotation.y = Math.PI/2;
- mesh.rotation.z = 0;
サンプルはこのようになりました。
・index.html
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- body { margin: 0; }
- </style>
- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
- <script type="importmap">
- {
- "imports": {
- "three": "https://unpkg.com/three/build/three.module.js",
- "three/addons/": "https://unpkg.com/three/examples/jsm/"
- }
- }
- </script>
- <title>MMD 3Dモデルの表示</title>
- </head>
- <body>
- <script type="module">
- import * as THREE from 'three';
- import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
- //-----------------------------------------------------------------------------------------------
- // シーン、カメラの準備
- //-----------------------------------------------------------------------------------------------
- // レンダラーを作成
- const renderer = new THREE.WebGLRenderer({ antialias: true });
- // 描画サイズの設定
- renderer.setSize(window.innerWidth, window.innerHeight);
- // 背景の色と透明度の設定
- // setClearColor ( color : Color, 透過度 : Float )
- renderer.setClearColor( 0xffffff, 1.0 );
- // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
- document.body.appendChild(renderer.domElement);
- // シーンを作成
- const scene = new THREE.Scene();
- // ライト(環境光)を作成し、シーンに追加
- // AmbientLight( color : Color, 強度 : Float )
- scene.add(new THREE.AmbientLight(0xffffff, 0.75));
- // カメラを作成
- // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
- // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
- // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
- const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
- // カメラ位置調整
- camera.position.copy(new THREE.Vector3(0, 10, 30));
- //-----------------------------------------------------------------------------------------------
- // MMD 3Dモデルのロードとシーンへの追加
- //-----------------------------------------------------------------------------------------------
- // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
- const loader = new MMDLoader();
- // .pmd / .pmx ファイルの読込
- // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
- loader.load (
- // ロードする PMD/PMX ファイル
- 'Alicia/MMD/Alicia_solid.pmx',
- // ロード成功時の処理
- function (mesh) {
- // rotation.set(x, y, z) 単位はラジアン
- mesh.rotation.set(0, Math.PI/2, 0);
- // 以下のように、x,y,z要素各々に対し直接指定が可能
- //mesh.rotation.x = 0;
- //mesh.rotation.y = Math.PI/2;
- //mesh.rotation.z = 0;
- // メッシュをシーンに追加
- scene.add(mesh);
- }
- );
- // レンダリングループ
- function animate() {
- window.requestAnimationFrame( animate );
- // OutlineEffectの適用
- // render ( scene : Object3D, camera : Camera )
- renderer.render(scene, camera);
- }
- animate();
- </script>
- </body>
- </html>
視線の向きが90度変わっています。
腕の位置の変更
ポーズ指定は、MMDLoader.loadVPDでポーズ情報が記載されたファイルを読み込み。
MMDAnimationHelperで反映すれば良いようです。
MMDAnimationHelper
ポーズ情報はこちらからお借りしました。
https://bowlroll.net/file/155155
「01キメポーズ.vpd」を「pose.vpd」にリネーム。
index.htmlと同じ階層に配置しておきます。
サンプルはこのようになりました。
・index.html
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- body { margin: 0; }
- </style>
- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
- <script type="importmap">
- {
- "imports": {
- "three": "https://unpkg.com/three/build/three.module.js",
- "three/addons/": "https://unpkg.com/three/examples/jsm/"
- }
- }
- </script>
- <title>MMD 3Dモデルの表示</title>
- </head>
- <body>
- <script type="module">
- import * as THREE from 'three';
- import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
- // MMDAnimationHelperのロードを追加
- import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
- //-----------------------------------------------------------------------------------------------
- // シーン、カメラの準備
- //-----------------------------------------------------------------------------------------------
- // レンダラーを作成
- const renderer = new THREE.WebGLRenderer({ antialias: true });
- // 描画サイズの設定
- renderer.setSize(window.innerWidth, window.innerHeight);
- // 背景の色と透明度の設定
- // setClearColor ( color : Color, 透過度 : Float )
- renderer.setClearColor( 0xffffff, 1.0 );
- // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
- document.body.appendChild(renderer.domElement);
- // シーンを作成
- const scene = new THREE.Scene();
- // ライト(環境光)を作成し、シーンに追加
- // AmbientLight( color : Color, 強度 : Float )
- scene.add(new THREE.AmbientLight(0xffffff, 0.75));
- // カメラを作成
- // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
- // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
- // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
- const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
- // カメラ位置調整
- camera.position.copy(new THREE.Vector3(0, 10, 30));
- //-----------------------------------------------------------------------------------------------
- // MMD 3Dモデルのロードとシーンへの追加
- //-----------------------------------------------------------------------------------------------
- // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
- const loader = new MMDLoader();
- const helper = new MMDAnimationHelper();
- // .pmd / .pmx ファイルの読込
- // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
- loader.load (
- // ロードする PMD/PMX ファイル
- 'Alicia/MMD/Alicia_solid.pmx',
- // ロード成功時の処理
- function (mesh) {
- // メッシュをシーンに追加
- scene.add(mesh);
- // meshがロード出来たらポーズ情報取得
- loader.loadVPD(
- 'pose.vpd', // ポーズファイル
- false, // isUnicode -> ダウンロードしたファイルがms932形式等ならfalseを指定
- function(pose) {
- // ポーズ設定
- helper.pose( mesh, pose);
- }
- );
- }
- );
- // レンダリングループ
- function animate() {
- window.requestAnimationFrame( animate );
- // OutlineEffectの適用
- // render ( scene : Object3D, camera : Camera )
- renderer.render(scene, camera);
- }
- animate();
- </script>
- </body>
- </html>
指定したポーズになりました。
Promiseを使用して、3Dデータとポーズ情報を並行してダウンロードすると
もう少しソースがすっきりするかもしれません。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- <style>
- body { margin: 0; }
- </style>
- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
- <script type="importmap">
- {
- "imports": {
- "three": "https://unpkg.com/three/build/three.module.js",
- "three/addons/": "https://unpkg.com/three/examples/jsm/"
- }
- }
- </script>
- <title>MMD 3Dモデルの表示</title>
- </head>
- <body>
- <script type="module">
- import * as THREE from 'three';
- import { MMDLoader } from 'three/addons/loaders/MMDLoader.js';
- // MMDAnimationHelperのロードを追加
- import { MMDAnimationHelper } from 'three/addons/animation/MMDAnimationHelper.js';
- //-----------------------------------------------------------------------------------------------
- // シーン、カメラの準備
- //-----------------------------------------------------------------------------------------------
- // レンダラーを作成
- const renderer = new THREE.WebGLRenderer({ antialias: true });
- // 描画サイズの設定
- renderer.setSize(window.innerWidth, window.innerHeight);
- // 背景の色と透明度の設定
- // setClearColor ( color : Color, 透過度 : Float )
- renderer.setClearColor( 0xffffff, 1.0 );
- // レンダラー出力先のHTML要素の設定 (canvasは自動生成される)
- document.body.appendChild(renderer.domElement);
- // シーンを作成
- const scene = new THREE.Scene();
- // ライト(環境光)を作成し、シーンに追加
- // AmbientLight( color : Color, 強度 : Float )
- scene.add(new THREE.AmbientLight(0xffffff, 0.75));
- // カメラを作成
- // PerspectiveCamera( 視野角 : Number, アスペクト比 : Number, near : Number, far : Number )
- // 画角を決める アスペクト比 16:9 における焦点距離(35 mm判相当)と垂直画角は以下の通り
- // 24 mm = 45.75、 35 mm = 32.27、50 mm = 22.90
- const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
- // カメラ位置調整
- camera.position.copy(new THREE.Vector3(0, 10, 30));
- //-----------------------------------------------------------------------------------------------
- // MMD 3Dモデルのロードとシーンへの追加
- //-----------------------------------------------------------------------------------------------
- // (Constructor) MMDLoader( manager : LoadingManager ) : Loader
- const loader = new MMDLoader();
- const helper = new MMDAnimationHelper();
- // .pmd / .pmx ファイルの読込
- // .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null
- Promise.all([
- // モデルのロード
- new Promise((resolve, reject) => {
- loader.load (
- 'Alicia/MMD/Alicia_solid.pmx', // ロードする PMD/PMX ファイル
- resolve, // ロード成功時の処理
- null, // 進捗
- reject // ロード失敗時の処理
- );
- }),
- // ポーズ情報のロード
- new Promise((resolve, reject) => {
- loader.loadVPD (
- 'pose.vpd', // ポーズファイル
- false, // isUnicode -> ダウンロードしたファイルがms932形式等ならfalseを指定
- resolve, // 成功時
- null, // 進捗
- reject // 失敗時
- );
- }),
- ]).then((results) => {
- const [mesh, pose] = results;
- // ポーズ設定
- helper.pose( mesh, pose);
- // メッシュをシーンに追加
- scene.add(mesh);
- });
- // レンダリングループ
- function animate() {
- window.requestAnimationFrame( animate );
- // OutlineEffectの適用
- // render ( scene : Object3D, camera : Camera )
- renderer.render(scene, camera);
- }
- animate();
- </script>
- </body>
- </html>
動作は同じになります。
動作サンプルはこちら。
https://symfo.web.fc2.com/js-sample/three/sample2.html
【参考URL】
Three.js 物体の回転(rotation)
- 関連記事
-
- html 2つのcanvasをスライダーで範囲指定し比較する
- Three.jsを使用して、MMDのモーションデータ(vmd)を再生する
- three.jsを使用して、MMD 3Dモデルの向き、ポーズの指定
- three.jsを使用して、MMD 3Dモデルを表示する最小構成の要素
- tensorflow.js + pose-detectionで人物のポーズ状態を取得
コメント