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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.dependabot Narrow range of dependabot updates Sep 30, 2019
bin merge fresh `dev` into `prepare-gh-pages` Sep 3, 2019
examples add envmap example Sep 25, 2019
playground tidy up playground (#127) Sep 15, 2019
src Merge pull request #168 from pixiv/fix-unlit-envmap Oct 7, 2019
.eslintrc.json eslint: install `@typescript-eslint/member-naming` rule Sep 10, 2019
.gitignore fix gitignore Sep 10, 2019
.node-version line Jul 26, 2019
CONTRIBUTING.md uh Sep 13, 2019
LICENSE LICENSE Sep 12, 2019
README.md docs(readme): fix the example 'via npm' Sep 14, 2019
package.json Bump lint-staged from 9.2.5 to 9.4.1 Oct 7, 2019
three-vrm.png Add image to readme Sep 12, 2019
tsconfig.json Add a banner to builds Sep 13, 2019
webpack.config.ts Add a banner to builds Sep 13, 2019
yarn.lock Bump lint-staged from 9.2.5 to 9.4.1 Oct 7, 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.