WebページにVRoidモデルを表示してみた

VRoidモデルって、実は滅茶苦茶簡単にWebページに表示できるって知ってました?

私も今回初めて知ったのですが、本当に簡単だったので今回はそのコードを紹介していきたいと思います。
(表示させるだけならHTML+JSで50行くらいです)


まず前段の話として、VRoidでは3DモデルをVRMという形式で表現しているのですが、このVRM形式はglTF2.0を拡張した形式になっています。

glTF、つまり、WebGLに対応しているということで、Webとの相性はかなりよいみたいです。
(webGLとか触ったことないけど)


ということで、「WEBページに簡単に埋め込めるのでは!?」と思い調べてみたところ、簡単に実装可能ということが今回分かった次第です。


以下にサンプルコードを置いておくので、WEBページのにぎやかしに是非試してみてください。

※細かい部分は全てコード上にコメントで解説しています。

サンプルコード

フォルダ構成

<フォルダ>
├─ sample.html
└─ sample_model.vrm

sample.html

<html>
<body>

<script type="module">
// three.jsをCDNからimport ※最新版だとなんかバグったので古い版を指定しています
import * as THREE from 'https://cdn.skypack.dev/three@^0.136.0';
import {GLTFLoader} from 'https://cdn.skypack.dev/three@^0.136.0/examples/jsm/loaders/GLTFLoader.js';

// シーン作成
const scene = new THREE.Scene();

// カメラ作成&位置調整
const camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1, 3);

// レンダラー作成
const renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding; // この設定が元のVRoidモデルに近い気がする
renderer.setSize(window.innerWidth, window.innerHeight);

// レンダラーをHTMLのbodyに追加
document.body.appendChild(renderer.domElement);

// 使用するVRMモデルのURL(.gltf / .glbも可)
const url = 'sample_model.vrm';

// モデルのロード
const loader = new GLTFLoader();
let model = null;
loader.load(
    url,
    // ロードが完了した際に呼ばれる処理
    function (gltf) {
        console.log('the loading is successfully completed.');
        scene.add(gltf.scene);
        model = gltf.scene;
    },

    // ロード中に呼ばれる処理
    function ( xhr ) {
        if (xhr.total != 0) {
            // HTTPヘッダのContent-Length headerが未設定の場合はxhr.total=0
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        }
    },

    // エラーが発生した場合に呼ばれる処理
    function ( error ) {
        console.log( 'An error happened' );
        console.log( error );
    }
);

// 描画処理(横方向に回転するだけの例)
function animate() {
    requestAnimationFrame(animate);

    if (model != null) { // ロードが完了するまではnull
        model.rotation.y += 0.01;
    }

    renderer.render(scene, camera);
}
animate();

</script>
</body>
</html>

sample_model.vrm

sample_model.vrmはVRoid Studioのエクスポート機能で作成しています。

VRoid Studioでエクスポートしたいモデルを開いて、右上の...からVRMエクスポートを選択
調整はよく分からないのでデフォルト設定でエクスポートしました


VRoid Studio用意するのが面倒な人は、ネット上でよく配布されているVRMモデルを使ってもロードに支障はないはずです。
(VRM形式であればgltf2.0なのでロードできないということは無いはず)

表示例

※右矢印/左矢印キーで回転速度を変えられます。(謎機能)

参考

three.jsの使い方
https://threejs.org/docs/index.html#manual/ja/introduction/Installation

three.jsのドキュメント上のCDN
https://docs.skypack.dev/

GLTFLoader
https://threejs.org/docs/?q=Content-Length%20header#examples/en/loaders/GLTFLoader

VRM
https://vrm.dev/vrm_about/

コードの参考
https://codelabo.com/posts/20200229083842



コメント

タイトルとURLをコピーしました