@pixiv/three-vrm
Use VRM on three.js
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:
You can import all of them via CDN. See the example below.
Code like this:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/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();
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
loader.load(
'/models/VRM1_Constraint_Twist_Sample.vrm',
(gltf) => {
const vrm = gltf.userData.vrm;
scene.add(vrm.scene);
console.log(vrm);
},
(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
(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();
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
loader.load(
'/models/VRM1_Constraint_Twist_Sample.vrm',
(gltf) => {
const vrm = gltf.userData.vrm;
scene.add(vrm.scene);
console.log(vrm);
},
(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
(error) => console.error(error),
);
Contributing
See: CONTRIBUTING.md
LICENSE
MIT