@j-kyoda/vue-three-vrm 0.9.1 → 0.10.1

package/README.md

@@ -7,7 +7,7 @@ A Vue 3 component designed to render and display VRM models on your web pages.
 Package is available on NPM: https://www.npmjs.com/package/@j-kyoda/vue-three-vrm
 
 ```sh
-npm install @j-kyoda/vue-three-vrm three @pixiv/three-vrm
+npm install @j-kyoda/vue-three-vrm three @pixiv/three-vrm @pixiv/three-vrm-animation
 ```
 
 ---
@@ -31,6 +31,10 @@ const model_name = 'chico_hoodie'
 const pose_url = 'poses/chico_pose_goodjob_202506.json'
 // toDo: Please enter your VRM model URL here.
 const vrm_url = 'models/chico_hoodie.vrm'
+// toDo: Please enter your VRMA file URL here.(OPTION)
+const vrma_url = 'models/sample.vrma'
+
+let _vrm_model = null
 
 
 const context_initialized = async (context) => {
@@ -41,6 +45,9 @@ const context_initialized = async (context) => {
 const model_loaded = (name, vrm_model) => {
   const context = render_context.value
 
+  // save
+  _vrm_model = vrm_model
+
   // add model to scene
   const model = vrm_model.scene
   model.name = name
@@ -49,6 +56,14 @@ const model_loaded = (name, vrm_model) => {
 
   animation.value = true  // Starting animation.
 }
+
+const cb_animate = (context) => {
+  const { deltaTime } = context
+  if (_vrm_model != null) {
+    // animate
+    _vrm_model.updateAnimation(deltaTime)
+  }
+}
 </script>
 
 <template>
@@ -60,6 +75,7 @@ const model_loaded = (name, vrm_model) => {
     :useAxesHelper="false"
     :useDefaultLight="true"
     v-on:initialized="context_initialized"
+    v-on:animate="cb_animate"
     />
 </div>
 <div v-if="context_ready">
@@ -67,6 +83,7 @@ const model_loaded = (name, vrm_model) => {
     :model_name="model_name"
     :pose_url="pose_url"
     :vrm_url="vrm_url"
+    :vrma_url="vrma_url"
     v-on:loaded="model_loaded"
     />
 </div>
@@ -117,6 +134,7 @@ const model_loaded = (name, vrm_model) => {
   VRMUtils,
   camera,    // Instance of THREE.PerspectiveCamera
   controls,  // Instance of OrbitControls
+  deltaTime, //
   renderer,  // Instance of THREE.WebGLRenderer
   scene      // Instance of THREE.Scene
 }
@@ -138,6 +156,9 @@ const model_loaded = (name, vrm_model) => {
 | vrm_name        | String | 'vrm'        | The name of the VRM model.                              |
 | vrm_url         | String | ''           | The URL of the VRM model.                               |
 | vrm_data        | Object | null         | The object for the VRM model.                           |
+| vrma_name       | String | ''           | The name of the VRMA model.                             |
+| vrma_url        | String | null         | The URL of the VRMA model.                              |
+| vrma_data       | Object | null         | The object for the VRMA model.                          |
 
 ### Events (Emits)
 

package/README.md.orig

@@ -0,0 +1,158 @@
+# @j-kyoda/vue-three-vrm
+
+A Vue 3 component designed to render and display VRM models on your web pages.
+
+## Installation
+
+Package is available on NPM: https://www.npmjs.com/package/@j-kyoda/vue-three-vrm
+
+```sh
+npm install @j-kyoda/vue-three-vrm three @pixiv/three-vrm @pixiv/three-vrm-animation
+```
+
+---
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+import { VroidControl, ThreeFrame } from '@j-kyoda/vue-three-vrm'
+
+
+const context_ready = ref(false)
+const render_context = ref(null)
+const animation = ref(false)
+
+// toDo: Please enter your model name here.
+const model_name = 'chico_hoodie'
+// toDo: Please enter your pose URL here.
+const pose_url = 'poses/chico_pose_goodjob_202506.json'
+// toDo: Please enter your VRM model URL here.
+const vrm_url = 'models/chico_hoodie.vrm'
+// toDo: Please enter your VRMA file URL here.(OPTION)
+const vrma_url = 'models/sample.vrma'
+
+const context_initialized = async (context) => {
+  render_context.value = context  // save context
+  context_ready.value = true  // Begin model loading.
+}
+
+const model_loaded = (name, vrm_model) => {
+  const context = render_context.value
+
+  // add model to scene
+  const model = vrm_model.scene
+  model.name = name
+  vrm_model.setPosition({ x: 0, y: 0, z: 0 })
+  context.scene.add(model)
+
+  animation.value = true  // Starting animation.
+}
+</script>
+
+<template>
+<div class="frame">
+  <ThreeFrame
+    :animation="animation"
+    :useOrbitControls="true"
+    :useGridHelper="true"
+    :useAxesHelper="false"
+    :useDefaultLight="true"
+    v-on:initialized="context_initialized"
+    />
+</div>
+<div v-if="context_ready">
+  <VroidControl
+    :model_name="model_name"
+    :pose_url="pose_url"
+    :vrm_url="vrm_url"
+    :vrma_url="vrma_url"
+    v-on:loaded="model_loaded"
+    />
+</div>
+</template>
+
+<style scoped>
+.frame {
+  display: block;
+  width: 400px;
+  height: 400px;
+  margin: 0 auto;
+  padding: 0;
+}
+</style>
+```
+
+---
+
+## ThreeFrame
+
+### Props
+
+| ID               | Type     | Default | Description                            |
+| :--------------- | :------- | :------ | :------------------------------------- |
+| animation        | Boolean  | false   | Controls animation loop execution.     |
+| clearAlpha       | Number   | 1.0     | Clear Alpha value. Ranges from 0 to 1. |
+| clearColor       | String   | #7fbfff | Clear color value.                     |
+| useOrbitControls | Boolean  | false   | Enables/disables `OrbitControls`.      |
+| useGridHelper    | Boolean  | false   | Shows/hides the grid.                  |
+| useAxesHelper    | Boolean  | false   | Shows/hides the 3D axis arrows.        |
+| useDefaultLight  | Boolean  | false   | Sets up default lighting.              |
+
+### Events (Emits)
+
+| Event        | Description                                            | Payload        |
+| :----------- | :----------------------------------------------------- | :------------- |
+| initialized  | Occurs when the renderer setup is complete.            | ContextObject  |
+| animate      | Occurs before the rendering process in animation loop. | ContextObject  |
+
+## ContextObject
+
+```
+{
+  GLTFLoader,
+  THREE,
+  VRMExpressionPresetName,
+  VRMHumanBoneName,
+  VRMUtils,
+  camera,    // Instance of THREE.PerspectiveCamera
+  controls,  // Instance of OrbitControls
+  deltaTime, //
+  renderer,  // Instance of THREE.WebGLRenderer
+  scene      // Instance of THREE.Scene
+}
+```
+
+## VroidControl
+
+### Props
+
+| ID              | Type   | default      | Description                                             |
+| :-------------- | :----- | :----------- | :------------------------------------------------------ |
+| model_name      | String | ''           | The name of the VRoid model to display. **Required**.   |
+| expression_name | String | 'expression' | The name of the expression model.                       |
+| expression_url  | String | ''           | The URL of the expression model.                        |
+| expression_data | Object | null         | The object for the expression model.                    |
+| pose_name       | String | 'pose'       | The name of the pose model.                             |
+| pose_url        | String | ''           | The URL of the pose model.                              |
+| pose_data       | Object | null         | The object for the pose model.                          |
+| vrm_name        | String | 'vrm'        | The name of the VRM model.                              |
+| vrm_url         | String | ''           | The URL of the VRM model.                               |
+| vrm_data        | Object | null         | The object for the VRM model.                           |
+| vrma_name       | String | ''           | The name of the VRMA model.                             |
+| vrma_url        | String | null         | The URL of the VRMA model.                              |
+| vrma_data       | Object | null         | The object for the VRMA model.                          |
+
+### Events (Emits)
+
+| Event      | Description                                       | Payload                              |
+| :--------- | :------------------------------------------------ | :----------------------------------- |
+| loading    | Occurs while the VRoid model is loading.          | VRoid model name                     |
+| loaded     | Occurs when the VRoid model has finished loading. | VRoid model name, VRMModel instance  |
+
+
+## License
+
+This project is licensed under the MIT License. For more details, please refer to the LICENSE file located at the root of the project.

package/dist/index.css

@@ -1 +1 @@
-.box[data-v-60c3a6e5]{display:block;width:100%;height:100%}
+.box[data-v-1e83d65e]{display:block;width:100%;height:100%}