[deprecated] three-vrm

This package is deprecated. Use @pixiv/three-vrm instead.

本パッケージは開発を停止しています。 @pixiv/three-vrmを使用してください。

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

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