https://github.com/binzume/aframe-vrm
VRM components for A-Frame
https://github.com/binzume/aframe-vrm
aframe vr vrm webvr
Last synced: 23 days ago
JSON representation
VRM components for A-Frame
- Host: GitHub
- URL: https://github.com/binzume/aframe-vrm
- Owner: binzume
- License: mit
- Created: 2019-09-29T11:57:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-10T18:39:09.000Z (3 months ago)
- Last Synced: 2025-04-02T06:07:01.826Z (about 1 month ago)
- Topics: aframe, vr, vrm, webvr
- Language: TypeScript
- Homepage:
- Size: 42 MB
- Stars: 53
- Watchers: 9
- Forks: 20
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VRM Components for A-Frame
[A-Frame](https://aframe.io/) で [VRM](https://vrm.dev/) のモデルを動かすコンポーネントです.
## Features
- Animation
- BlendShape (Morph)
- Physics (using CANNON.js)
## Demo
- [Live DEMO](https://binzume.github.io/aframe-vrm/demo/)
- [Live DEMO(Physics)](https://binzume.github.io/aframe-vrm/demo/physics.html) (using [aframe-physics-system](https://github.com/n5ro/aframe-physics-system))
- VRM/GLB,BVH/VMDファイルをブラウザにドラッグ＆ドロップするとプレビューできます(アップロードはされません)
- WebVRはOculus Questでテストしています
## Usage
```html
```
npm: [@binzume/aframe-vrm](https://www.npmjs.com/package/@binzume/aframe-vrm)
## Components
- vrm: Load vrm model
- vrm-bvh: Play BVH/VMD animation
- vrm-poser: pose editor for VR
- vrm-skeleton: display skeleton
- vrm-mimic: TODO
### vrm
Attributes:
| name | type | default | desc |
| ------------- | -------- | ------- | ---- |
| src | string | None | VRM model URL |
| blink | boolean | false | Auto blink |
| blinkInterval | number | 5 | Auto blink interval |
| lookAt | selector | None | look at target element |
| firstPerson | boolean | false | Hide head meshes |
Properties:
avatar : VRMAvatar
Events:
| name | event.detail | desc |
| ------------ | ------------ | ---- |
| model-loaded | {format:'vrm', model: Object3D, avatar: VRMAvatar} | Loaded event |
| model-error | {format:'vrm', src: URL, cause: object} | Error event |
Compatible with gltf-model component: https://aframe.io/docs/1.0.0/components/gltf-model.html
### vrm-poser
Pose editor.
Attributes:
| name | type | default | desc |
| ----------------- | ------- | ------- | ----------- |
| color | color | green | box color |
| enableConstraints | boolean | true | Enable bone constraints |
### vrm-anim
Play bvh/vmd animation.
Attributes:
| name | type | default | desc |
| ----------- | -------- | ------- | ---- |
| src | string | '' | BVH file url |
| format | string | '' | `vmd` or `bvh` (default: auto detect) |
| convertBone | boolean | true | Convert bone name |
srcを空にすると待機アニメーションが再生されます(テスト用)．
## Building aframe-vrm
```sh
cd aframe-vrm
npm install
npm run lint
npm run build
```
### VRMAvatar API
See: [avatar.ts](src/vrm/avatar.ts)
```js
import {VRMLoader} from "./dist/aframe-vrm.module.js"
const scene = new THREE.Scene();
const avatar = await new VRMLoader().load("test.vrm");
scene.add(avatar.model);
```
Property:
- VRMAvatar.model : THREE.Object3D
- VRMAvatar.mixer : THREE.AnimationMixer
- VRMAvatar.lookAtTarget : THREE.Object3D
- VRMAvatar.bones : VRM bones
- VRMAvatar.blendShapes : blend shapes
- VRMAvatar.meta : VRM meta data
Methods:
- VRMAvatar.update(timeDelta)
- VRMAvatar.dispose() : Dispose VRM avatar.
- VRMAvatar.setBlendShapeWeight(name, value) : Set blend shape weight for name.
- VRMAvatar.getBlendShapeWeight(name) : Returns blend shape values.
- VRMAvatar.resetBlendShape() : Reset all blend shapes.
- VRMAvatar.resetPose() : T-Pose
- VRMAvatar.startBlink(intervalSec)
- VRMAvatar.stopBlink()
- VRMAvatar.setFirstPerson(firstPerson)
- VRMAvatar.modules.physics.attach(world : CANNON.World) : Start physics.
- VRMAvatar.modules.physics.detach() : Stop physics.
# TODO
- Use https://github.com/pixiv/three-vrm
# License
MIT License