@pixiv/three-vrm

Use VRM on three.js

GitHub Repository

Examples

Documentation

Usage

from HTML

You will need:

• Three.js build
• GLTFLoader
• A build of @pixiv/three-vrm
  • .module ones are ESM, otherwise it's UMD and injects its modules into global THREE
  • .min ones are minified (for production), otherwise it's not minified and it comes with source maps

Code like this:

<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script src="three-vrm.js"></script>

<script>
const scene = new THREE.Scene();

const loader = new THREE.GLTFLoader();
loader.load(

    // URL of the VRM you want to load
    '/models/three-vrm-girl.vrm',

    // called when the resource is loaded
    ( gltf ) => {

        // generate a VRM instance from gltf
        THREE.VRM.from( gltf ).then( ( vrm ) => {

            // add the loaded vrm to the scene
            scene.add( vrm.scene );

            // deal with vrm features
            console.log( vrm );

        } );

    },

    // called while loading is progressing
    ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),

    // called when loading has errors
    ( error ) => console.error( error )

);
</script>

via npm

Install three and @pixiv/three-vrm :

npm install three @pixiv/three-vrm

Code like this:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { VRM } from '@pixiv/three-vrm';

const scene = new THREE.Scene();

const loader = new GLTFLoader();
loader.load(

    // URL of the VRM you want to load
    '/models/three-vrm-girl.vrm',

    // called when the resource is loaded
    ( gltf ) => {

        // generate a VRM instance from gltf
        VRM.from( gltf ).then( ( vrm ) => {

            // add the loaded vrm to the scene
            scene.add( vrm.scene );

            // deal with vrm features
            console.log( vrm );

        } );

    },

    // called while loading is progressing
    ( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),

    // called when loading has errors
    ( error ) => console.error( error )

);

Contributing

See: CONTRIBUTING.md

LICENSE

MIT