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

2022.03.12

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>