Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@motif-foundation/aframe-vrm

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@motif-foundation/aframe-vrm

VRM components for A-Frame

latest
npmnpm
Version
0.1.1
Version published
Maintainers
1
Created
Source

VRM Components for A-Frame

A-Frame で VRM のモデルを動かすコンポーネントです.

Features

  • Animation
  • BlendShape (Morph)
  • Physics (using CANNON.js)

Demo

  • Live DEMO
  • Live DEMO(Physics) (using aframe-physics-system)
  • VRM/GLB,BVH/VMDファイルをブラウザにドラッグ＆ドロップするとプレビューできます(アップロードはされません)
  • WebVRはOculus Questでテストしています

AliciaSolid

Usage

<html>
<head>
  <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@v1.0.4/dist/aframe-master.min.js"></script>
  <script src="https://binzume.github.io/aframe-vrm/dist/aframe-vrm.js"></script>
</head>
<body style="background-color: black; color:white;">
  <a-scene>
    <a-entity vrm="src:assets/AliciaSolid/AliciaSolid.vrm;blink:true" vrm-anim="" rotation="0 180 0"></a-entity>
    <a-camera position="0 1.6 2"></a-camera>
  </a-scene>
</body>
</html>

npm: @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:

nametypedefaultdesc
srcstringNoneVRM model URL
blinkbooleanfalseAuto blink
blinkIntervalnumber5Auto blink interval
lookAtselectorNonelook at target element
firstPersonbooleanfalseHide head meshes

Properties:

avatar : VRMAvatar

Events:

nameevent.detaildesc
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:

nametypedefaultdesc
colorcolorgreenbox color
enableConstraintsbooleantrueEnable bone constraints

vrm-anim

Play bvh/vmd animation.

Attributes:

nametypedefaultdesc
srcstring''BVH file url
formatstring''vmd or bvh (default: auto detect)
convertBonebooleantrueConvert bone name

srcを空にすると待機アニメーションが再生されます(テスト用)．

Building aframe-vrm

cd aframe-vrm
npm install
npm run lint
npm run build

VRMAvatar API

See: avatar.ts

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

License

MIT License

FAQs

Package last updated on 27 Jan 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Research

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.

By Kirill Boychenko  -  Sep 24, 2025