Skip to content
Use VRM on Three.js
TypeScript GLSL JavaScript HTML
Branch: dev
Clone or download
FMS-Cat Merge pull request #193 from pixiv/dependabot/npm_and_yarn/lint-stage…
…d-9.4.1

Bump lint-staged from 9.2.5 to 9.4.1
Latest commit 639af59 Oct 9, 2019

README.md

@pixiv/three-vrm

Use VRM on three.js

three-vrm

GitHub Repository

Examples

Documentation

Usage

from HTML

You will need:

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

You can’t perform that action at this time.