https://github.com/avaer/three-vrm

https://github.com/avaer/three-vrm

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/avaer/three-vrm
• Owner: avaer
• Created: 2023-06-01T02:25:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-01T02:30:11.000Z (over 1 year ago)
• Last Synced: 2024-10-08T19:22:18.687Z (3 months ago)
• Language: JavaScript
• Size: 16.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `@pixiv/three-vrm`

Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)

![three-vrm](https://github.com/pixiv/three-vrm/raw/dev/three-vrm.png)

[GitHub Repository](https://github.com/pixiv/three-vrm/)

[Examples](https://pixiv.github.io/three-vrm/packages/three-vrm/examples)

[Documentation](https://pixiv.github.io/three-vrm/packages/three-vrm/docs)

## How to Use

### from HTML

You will need:

- [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)

- [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)

- [A build of @pixiv/three-vrm](https://unpkg.com/browse/@pixiv/three-vrm/lib/)

	- `.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:

```html

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 )

);

```

### via npm

Install [`three`](https://www.npmjs.com/package/three) and [`@pixiv/three-vrm`](https://www.npmjs.com/package/@pixiv/three-vrm) :

```sh

npm install three @pixiv/three-vrm

```

Code like this:

```javascript

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](CONTRIBUTING.md)

## LICENSE

[MIT](LICENSE)