three-vrm

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

TypeScript/JavaScript VRM library for three.js

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

Dependencies

• three.js

For TypeScript

yarn add three @types/three

For JavaScript

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.scene);
    // 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.scene);
      // 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

VRM model data.

.asset : object

A glTF asset property.

.scene : THREE.Scene

A Scene.

.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. .textureProperties and .vectorProperties are converted to THREE.Texture objects and THREE.Vector4 objects.

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

Development

yarn
yarn start

Open localhost:8080 with a browser.

License

MIT