Package Exports

@pixiv/three-vrm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@pixiv/three-vrm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@pixiv/three-vrm`

Use VRM on three.js

three-vrm

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