@pixiv/three-vrm


Use VRM on three.js

!three-vrm

GitHub Repository

Examples

Guides

API Reference

How to Use

$3

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

You can import all the dependencies via CDN like jsDelivr.

``html



`

See the Three.js document if you are not familiar with Three.js yet: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

See the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html

$3

Install three and @pixiv/three-vrm :

`sh
npm install three @pixiv/three-vrm
`

$3

Starting from v3, we provide WebGPURenderer compatibility.
To use three-vrm with WebGPURenderer, specify the WebGPU-compatible MToonNodeMaterial for the materialType option of MToonMaterialLoaderPlugin.

MToonNodeMaterial only supports Three.js r167 or later.
The NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.

`js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MToonMaterialLoaderPlugin, VRMLoaderPlugin } from '@pixiv/three-vrm';
import { MToonNodeMaterial } from '@pixiv/three-vrm/nodes';

// ... Setup renderer, camera, scene ...

// Create a GLTFLoader
const loader = new GLTFLoader();

// Register a VRMLoaderPlugin
loader.register((parser) => {

// create a WebGPU compatible MToonMaterialLoaderPlugin
const mtoonMaterialPlugin = new MToonMaterialLoaderPlugin(parser, {

// set the material type to MToonNodeMaterial
materialType: MToonNodeMaterial,

});

return new VRMLoaderPlugin(parser, {

// Specify the MToonMaterialLoaderPlugin to use in the VRMLoaderPlugin instance
mtoonMaterialPlugin,

});

});

// ... Load the VRM and perform the render loop ...
``

See the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html

Contributing

See: CONTRIBUTING.md

LICENSE

MIT