@pixiv/three-vrm

@pixiv/three-vrm

@pixiv/three-vrm on npm

Use VRM on three.js

three-vrm

GitHub Repository

Examples

Documentations

API Reference

v1

three-vrm v1 has been released!

three-vrm v1 supports VRM1.0, which is a new version of VRM format (the previous version of VRM is also supported, don't worry!). It also adopts the GLTFLoader plugin system which is a relatively new feature of GLTFLoader.

There are a lot of breaking changes! See the migration guide for more info.

How to Use

from HTML

You will need:

Code like this:

<!-- About import maps, see the Three.js official docs: -->
<!-- https://threejs.org/docs/#manual/en/introduction/Installation -->
<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@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
"@pixiv/three-vrm": "three-vrm.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { VRMLoaderPlugin } from '@pixiv/three-vrm';

const scene = new THREE.Scene();

const loader = new GLTFLoader();

// Install GLTFLoader plugin
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});

loader.load(
// URL of the VRM you want to load
'/models/VRM1_Constraint_Twist_Sample.vrm',

// called when the resource is loaded
(gltf) => {
// retrieve a VRM instance from gltf
const vrm = gltf.userData.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 { VRMLoaderPlugin } from '@pixiv/three-vrm';

const scene = new THREE.Scene();

const loader = new GLTFLoader();

// Install GLTFLoader plugin
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});

loader.load(
// URL of the VRM you want to load
'/models/VRM1_Constraint_Twist_Sample.vrm',

// called when the resource is loaded
(gltf) => {
// retrieve a VRM instance from gltf
const vrm = gltf.userData.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

Generated using TypeDoc