vue-plugin-live2d 0.0.26 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/package.json +9 -6
- package/src/{Live2D.vue → Live2d.vue} +8 -11
- package/src/index.ts +4 -3
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ project and does not replace the framework-independent facade used by game engin
|
|
|
17
17
|
- Ready, error, progress, profile, and hit events.
|
|
18
18
|
- Optional browser animation loop.
|
|
19
19
|
- Pointer tracking.
|
|
20
|
+
- Optional `interactive` / `tracking` props (forwarded to `<live-2d>`).
|
|
20
21
|
- Parameter inspection and mutation through the exposed component API.
|
|
21
22
|
|
|
22
23
|
## 📦 Installation
|
|
@@ -29,11 +30,11 @@ pnpm add vue-plugin-live2d @doki-land/live2d-element vue
|
|
|
29
30
|
|
|
30
31
|
```vue
|
|
31
32
|
<script setup lang="ts">
|
|
32
|
-
import {
|
|
33
|
+
import { Live2d } from "vue-plugin-live2d";
|
|
33
34
|
</script>
|
|
34
35
|
|
|
35
36
|
<template>
|
|
36
|
-
<
|
|
37
|
+
<Live2d
|
|
37
38
|
model="/models/character.model3.json"
|
|
38
39
|
:width="480"
|
|
39
40
|
:height="640"
|
|
@@ -54,9 +55,9 @@ Use a template ref for runtime-level controls:
|
|
|
54
55
|
```vue
|
|
55
56
|
<script setup lang="ts">
|
|
56
57
|
import { ref } from "vue";
|
|
57
|
-
import {
|
|
58
|
+
import { Live2d } from "vue-plugin-live2d";
|
|
58
59
|
|
|
59
|
-
const actor = ref<InstanceType<typeof
|
|
60
|
+
const actor = ref<InstanceType<typeof Live2d> | null>(null);
|
|
60
61
|
|
|
61
62
|
function lookLeft() {
|
|
62
63
|
actor.value?.setParameter("PARAM_ANGLE_X", -15);
|
|
@@ -64,7 +65,7 @@ function lookLeft() {
|
|
|
64
65
|
</script>
|
|
65
66
|
|
|
66
67
|
<template>
|
|
67
|
-
<
|
|
68
|
+
<Live2d ref="actor" model="/models/character.model3.json" />
|
|
68
69
|
<button type="button" @click="lookLeft">Look left</button>
|
|
69
70
|
</template>
|
|
70
71
|
```
|
|
@@ -103,4 +104,4 @@ than being reimplemented for Vue.
|
|
|
103
104
|
|
|
104
105
|
## 📄 License
|
|
105
106
|
|
|
106
|
-
|
|
107
|
+
Source code is dedicated to the public domain under **CC0 1.0 Universal** — see [`License.md`](../../../License.md).
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-plugin-live2d",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Vue 3 <
|
|
3
|
+
"version": "0.0.28",
|
|
4
|
+
"description": "Vue 3 <Live2d> component — thin wrapper over <live-2d> Custom Element.",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "CC0-1.0",
|
|
7
7
|
"homepage": "https://github.com/doki-land/live2d.ts",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -37,8 +37,11 @@
|
|
|
37
37
|
"vue": "^3.4.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@doki-land/live2d": "0.0.
|
|
41
|
-
"@doki-land/live2d-element": "0.0.
|
|
40
|
+
"@doki-land/live2d": "0.0.28",
|
|
41
|
+
"@doki-land/live2d-element": "0.0.28"
|
|
42
42
|
},
|
|
43
|
-
"sideEffects":
|
|
43
|
+
"sideEffects": [
|
|
44
|
+
"./src/index.ts",
|
|
45
|
+
"./src/Live2d.vue"
|
|
46
|
+
]
|
|
44
47
|
}
|
|
@@ -9,11 +9,10 @@
|
|
|
9
9
|
:model="modelAttr"
|
|
10
10
|
:width="width"
|
|
11
11
|
:height="height"
|
|
12
|
-
:renderer="rendererKind"
|
|
13
12
|
:autoplay="autoplay"
|
|
14
13
|
:autosway="autoSway"
|
|
15
|
-
interactive
|
|
16
|
-
tracking="
|
|
14
|
+
:interactive="interactive"
|
|
15
|
+
:tracking="tracking"
|
|
17
16
|
/>
|
|
18
17
|
<div
|
|
19
18
|
v-if="showProgress && loading"
|
|
@@ -61,6 +60,8 @@ const props = withDefaults(
|
|
|
61
60
|
autoSway?: boolean;
|
|
62
61
|
/** Show built-in loading overlay with progress bar. */
|
|
63
62
|
showProgress?: boolean;
|
|
63
|
+
interactive?: boolean;
|
|
64
|
+
tracking?: "pointer" | "none";
|
|
64
65
|
}>(),
|
|
65
66
|
{
|
|
66
67
|
model: null,
|
|
@@ -70,6 +71,8 @@ const props = withDefaults(
|
|
|
70
71
|
autoplay: true,
|
|
71
72
|
autoSway: true,
|
|
72
73
|
showProgress: true,
|
|
74
|
+
interactive: true,
|
|
75
|
+
tracking: "pointer",
|
|
73
76
|
},
|
|
74
77
|
);
|
|
75
78
|
|
|
@@ -89,14 +92,6 @@ const modelAttr = computed(() =>
|
|
|
89
92
|
typeof props.model === "string" ? props.model : "",
|
|
90
93
|
);
|
|
91
94
|
|
|
92
|
-
const rendererKind = computed(() => {
|
|
93
|
-
const first = props.prefer?.[0];
|
|
94
|
-
if (first === "webgpu" || first === "webgl2" || first === "canvas2d") {
|
|
95
|
-
return first;
|
|
96
|
-
}
|
|
97
|
-
return "auto";
|
|
98
|
-
});
|
|
99
|
-
|
|
100
95
|
const progressPercent = computed(() => {
|
|
101
96
|
const p = loadProgress.value?.progress ?? 0;
|
|
102
97
|
return Math.round(Math.min(1, Math.max(0, p)) * 100);
|
|
@@ -249,6 +244,8 @@ watch(
|
|
|
249
244
|
props.prefer?.join(","),
|
|
250
245
|
props.autoplay,
|
|
251
246
|
props.autoSway,
|
|
247
|
+
props.interactive,
|
|
248
|
+
props.tracking,
|
|
252
249
|
] as const,
|
|
253
250
|
() => {
|
|
254
251
|
syncRenderOptions();
|
package/src/index.ts
CHANGED