Skip to content
VRM file loader for three.js
TypeScript GLSL JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples fix reset() of SpringBone May 21, 2019
src fix reset() of SpringBone May 21, 2019
.gitignore add initial package Aug 7, 2018
.prettierrc.json
.travis.yml add .travis.yml Aug 23, 2018
LICENSE add initial package Aug 7, 2018
README.md add package size badge to README May 12, 2019
package.json v0.0.17 Jun 16, 2019
tsconfig.json add initial package Aug 7, 2018
tslint.json add initial package Aug 7, 2018
webpack.config.js fix index.js and its example May 12, 2019
webpack.examples.config.js remove awesome-typescript-loader Mar 21, 2019
yarn.lock yarn upgrade --latest Jun 16, 2019

README.md

three-vrm

Latest NPM release Install Size License Build Status

This package is still under development. The usage may be destructively changed.

本パッケージは開発の途上にあるため、使用方法が大幅に変更される可能性があります。

VRM file loader and utilities for three.js, written in TypeScript.

VRM 形式の 3D モデルを three.js で描画するためのパッケージです。

Dependencies

yarn add three

Usage

Install the package from npm and import it.

yarn add three-vrm

This TypeScript code loads a VRM file with VRMLoader. You have to create a Camera, a Light, and a WebGLRenderer to render the Scene. See the usage of three.js.

import * as THREE from 'three';
import { VRM, VRMLoader } from 'three-vrm';

const scene = new THREE.Scene();

const vrmLoader = new VRMLoader();

vrmLoader.load(
  'model.vrm',
  (vrm: VRM) => {
    scene.add(vrm.model);
    // Render the scene.
  },
  (progress: ProgressEvent) => {
    console.log(progress.loaded / progress.total);
  },
  (error: ErrorEvent) => {
    console.error(error);
  }
);

Alternatively, if you work with HTML and a copy of three.js, you may copy only node_modules/three-vrm/lib/index.js and include it. Rename the file as necessary. This file assigns all exported classes to THREE.

<script src="js/three.js"></script>
<script src="js/three-vrm.js"></script>
<script>
  var scene = new THREE.Scene();

  var vrmLoader = new THREE.VRMLoader();

  vrmLoader.load(
    'model.vrm',
    function(vrm) {
      scene.add(vrm.model);
      // Render the scene.
    },
    function(progress) {
      console.log(progress.loaded / progress.total);
    },
    function(error) {
      console.error(error);
    }
  );
</script>

VRMLoader

A loader for VRM resources.

new VRMLoader ( manager? : THREE.LoadingManager )

Creates a new VRMLoader.

.load ( url : string, onLoad? : Function, onProgress? : Function, onError? : Function ) : void

Loads a VRM model.

VRM

Model data loaded by VRMLoader.

.asset : object

A glTF asset property.

.model : THREE.Object3D

A Object3D.

.parser : object

A GLTFParser created by GLTFLoader.

.userData : object

A dictionary object with extension data. Raw json of VRM extensions is in .userData.gltfExtensions.VRM.

.materialProperties : Array

An array of VRM material properties.

.humanoid : object

VRM bone mapping.

.meta : object

VRM model information.

.blendShapeMaster : object

VRM blendShapeMaster with an array of BlendShapeGroups to group BlendShape.

.firstPerson : object

VRM first-person settings.

.secondaryAnimation : object

VRM swaying object settings.

.getNode ( index : number ) : THREE.Object3D

Returns a reference to the Object3D in .model, corresponding to the node index.

.setBlendShapeWeight ( meshIndex : number, blendShapeIndex : number, value : number ) : void

Morphs the mesh.

.setBlendShapeGroupWeight ( index : number, value : number ) : void

Morphs all meshes in the BlendShapeGroup.

VRMPhysics

A Physics handler for VRM.

const clock = new THREE.Clock();
const physics = new VRMPhysics(vrm);

function render() {
  const delta = clock.getDelta();
  physics.update(delta);
  renderer.render(scene, camera);
}

new VRMPhysics ( vrm : VRM )

Creates a new VRMPhysics.

.update ( deltaTime : number ) : VRMPhysics

deltaTime - Time in second.

Advances Physics calculation and updates bones.

Development

yarn
yarn start

Open localhost:8080 with a browser.

License

MIT

You can’t perform that action at this time.