Three-vrm NPM | npm.io

three-vrm

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

three.js

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);
}