@j-kyoda/vue-three-vrm 0.6.4 → 0.8.0

package/README.md

@@ -7,33 +7,143 @@ 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 i @j-kyoda/vue-three-vrm
+npm install @j-kyoda/vue-three-vrm three @pixiv/three-vrm
 ```
 
-## Customize configuration
+---
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+## Usage
 
-## Project Setup
+```vue
+<script setup>
+import { ref } from 'vue'
 
-```sh
-npm install
-```
+import { VroidControl, ThreeFrame } from '@j-kyoda/vue-three-vrm'
 
-### Compile and Hot-Reload for Development
 
-```sh
-npm run dev
-```
+const context_ready = ref(false)
+const render_context = ref(null)
+const animation = ref(false)
 
-### Compile and Minify for Production
+// 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'
 
-```sh
-npm run build
+
+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"
+    v-on:loaded="model_loaded"
+    />
+</div>
+</template>
+
+<style scoped>
+.frame {
+  display: block;
+  width: 400px;
+  height: 400px;
+  margin: 0 auto;
+  padding: 0;
+}
+</style>
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+---
+
+## ThreeFrame
+
+### Props
+
+| ID               | Type     | Default | Description                         |
+| :--------------- | :------- | :------ | :---------------------------------- |
+| animation        | Boolean  | false   | Controls animation loop execution.  |
+| 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
 
-```sh
-npm run lint
 ```
+{
+  GLTFLoader,
+  THREE,
+  VRMExpressionPresetName,
+  VRMHumanBoneName,
+  camera,    // Instance of THREE.PerspectiveCamera
+  controls,  // Instance of OrbitControls
+  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.                           |
+
+### 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-e91ca0ac]{display:block;width:100%;height:100%}
+.box[data-v-8fb60132]{display:block;width:100%;height:100%}