JoukoSalonen / three-vrm

@pixiv/three-vrm

Use VRM on three.js

GitHub Repository

Examples

Documentation

How to Use

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();

// Install GLTFLoader plugin
loader.register( ( parser ) => {

	return new THREE_VRM.VRMLoaderPlugin( parser );

} );

loader.load(

	// URL of the VRM you want to load
	'/models/three-vrm-girl.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/three-vrm-girl.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