:warning: [deprecated] VRM file loader for three.js
This package is deprecated. Use @pixiv/three-vrm instead. (@pixiv/three-vrm is NOT our product and it is NOT compatible with this package.)
本パッケージは開発を停止しています。 @pixiv/three-vrmを使用してください。 (本パッケージとは開発者が異なり、互換性がありません。)
VRM file loader and utilities for three.js, written in TypeScript.
VRM 形式の 3D モデルを three.js で描画するためのパッケージです。
yarn add three
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>
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.
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.
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.
yarn
yarn start
Open localhost:8080
with a browser.