@vyr/three-browser 0.0.1

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vyr/three-browser",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/runtime": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "@vyr/design": "0.0.1",
+    "@vyr/builtin": "0.0.1",
+    "@vyr/three": "0.0.1",
+    "vue": "3.5.22"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "browser",
+    "order": 1000
+  }
+}

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export * from './validate'
+export * from './provider'

package/src/common/provider.ts

@@ -0,0 +1,14 @@
+import { provide, inject, Ref } from "vue";
+import { Descriptor } from "@vyr/engine";
+
+const providerKey = Symbol()
+
+const providerDescriptor = (descriptor: Ref<Descriptor | null>) => {
+    provide(providerKey, descriptor)
+}
+
+const useDescriptor = <T extends Descriptor = Descriptor>() => {
+    return inject(providerKey) as Ref<T>
+}
+
+export { providerDescriptor, useDescriptor }

package/src/common/validate.ts

@@ -0,0 +1,10 @@
+import { Descriptor } from "@vyr/engine"
+
+const instanceofArray = (Class: typeof Descriptor, instances: Descriptor[]) => {
+    for (const instance of instances) {
+        if (instance instanceof Class) return true
+    }
+    return false
+}
+
+export { instanceofArray }

package/src/fragment/GeoMapFragment.vue

@@ -0,0 +1,129 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.material.type')">
+            <vyr-col>
+                <vyr-select :model-value="typeof descriptor.material === 'string' ? 1 : 2" :data="Mesh.typeOptions"
+                    @update:modelValue="changeMode"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <template v-if="typeof descriptor.material === 'string'">
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.material" :clearable="true" dragkey="material" :draggable="draggable"
+                        trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </template>
+    <template v-else>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material.index')">
+                <vyr-col>
+                    <vyr-select v-model="currentIndex" :data="materialOptions" :addable="true" :removable="true"
+                        @add="addMaterial" @remove="removeMaterial"></vyr-select>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.material[currentIndex].url" :clearable="true"
+                        :dragkey="`material[${currentIndex}].url`" :draggable="draggable" trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.GeoMap.borderMaterial')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.borderMaterial" :clearable="true" dragkey="borderMaterial"
+                    :draggable="draggable" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.GeoMap.shadowMaterial')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.shadowMaterial" :clearable="true" dragkey="shadowMaterial"
+                    :draggable="draggable" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.GeoMap.geojsonRegion')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.geojsonRegion" :clearable="true" dragkey="geojsonRegion"
+                    :draggable="draggable" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.GeoMap.geojsonBorder')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.geojsonBorder" :clearable="true" dragkey="geojsonBorder"
+                    :draggable="draggable" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.GeoMap.label')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.label" :clearable="true" dragkey="label" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <slot></slot>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { GeoMapDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+import { Mesh } from '../option';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+
+const descriptor = useDescriptor<GeoMapDescriptor>()
+const materialOptions = computed(() => {
+    const options: { label: string; value: number }[] = []
+    if (typeof descriptor.value.material === 'string') return options
+
+    for (let i = 0; i < descriptor.value.material.length; i++) {
+        options.push({ label: i + '', value: i })
+    }
+
+    return options
+})
+const currentIndex = ref(0)
+
+const changeMode = (type: number) => {
+    if (type === 1) {
+        if (typeof descriptor.value.material === 'string') return
+        descriptor.value.material = descriptor.value.material.length > 0 ? descriptor.value.material[0].url : ''
+    } else {
+        if (typeof descriptor.value.material !== 'string') return
+        descriptor.value.material = descriptor.value.material ? [{ url: descriptor.value.material }] : []
+    }
+}
+
+const addMaterial = () => {
+    if (typeof descriptor.value.material === 'string') return
+    descriptor.value.material.push({ url: '' })
+}
+
+const removeMaterial = (i: number) => {
+    if (Array.isArray(descriptor.value.material)) {
+        descriptor.value.material.splice(i, 1)
+        if (currentIndex.value === i) currentIndex.value = 0
+    }
+}
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/InstancedMeshFragment.vue

@@ -0,0 +1,29 @@
+<template>
+    <mesh-fragment>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.InstancedMesh.setting')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.setting" :clearable="true" dragkey="setting" :draggable="draggable"
+                        trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </mesh-fragment>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { InstancedMeshDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+import MeshFragment from './MeshFragment.vue';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+
+const descriptor = useDescriptor<InstancedMeshDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/MeshFragment.vue

@@ -0,0 +1,98 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.material.type')">
+            <vyr-col>
+                <vyr-select :model-value="typeof descriptor.material === 'string' ? 1 : 2" :data="Mesh.typeOptions"
+                    @update:modelValue="changeMode"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <template v-if="typeof descriptor.material === 'string'">
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.material" :clearable="true" dragkey="material" :draggable="draggable"
+                        trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </template>
+    <template v-else>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material.index')">
+                <vyr-col>
+                    <vyr-select v-model="currentIndex" :data="materialOptions" :addable="true" :removable="true"
+                        @add="addMaterial" @remove="removeMaterial"></vyr-select>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Node.material')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.material[currentIndex].url" :clearable="true"
+                        :dragkey="`material[${currentIndex}].url`" :draggable="draggable" trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.geometry')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.geometry" :clearable="true" dragkey="geometry" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <slot></slot>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { MeshDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+import { Mesh } from '../option';
+
+defineProps<{ }>()
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+
+const descriptor = useDescriptor<MeshDescriptor>()
+const materialOptions = computed(() => {
+    const options: { label: string; value: number }[] = []
+    if (typeof descriptor.value.material === 'string') return options
+
+    for (let i = 0; i < descriptor.value.material.length; i++) {
+        options.push({ label: i + '', value: i })
+    }
+
+    return options
+})
+const currentIndex = ref(0)
+
+const changeMode = (type: number) => {
+    if (type === 1) {
+        if (typeof descriptor.value.material === 'string') return
+        descriptor.value.material = descriptor.value.material.length > 0 ? descriptor.value.material[0].url : ''
+    } else {
+        if (typeof descriptor.value.material !== 'string') return
+        descriptor.value.material = descriptor.value.material ? [{ url: descriptor.value.material }] : []
+    }
+}
+
+const addMaterial = () => {
+    if (typeof descriptor.value.material === 'string') return
+    descriptor.value.material.push({ url: '' })
+}
+
+const removeMaterial = (i: number) => {
+    if (Array.isArray(descriptor.value.material)) {
+        descriptor.value.material.splice(i, 1)
+        if (currentIndex.value === i) currentIndex.value = 0
+    }
+}
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/ModelFragment.vue

@@ -0,0 +1,28 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Model.url')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.url" :clearable="true" dragkey="url" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { ModelDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+
+const descriptor = useDescriptor<ModelDescriptor>()
+
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/NodeFragment.vue

@@ -0,0 +1,93 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.layer')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.layer" :clearable="false" :step="1" :min="0" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.renderOrder')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.renderOrder" :clearable="false" :step="1" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.position')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.position.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.position.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.position.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.rotation')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.rotation.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.rotation.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.rotation.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.scale')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.scale.x" :clearable="false" :allow-null="false"
+                    :default-value="1"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.scale.y" :clearable="false" :allow-null="false"
+                    :default-value="1"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.scale.z" :clearable="false" :allow-null="false"
+                    :default-value="1"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.castShadow')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.castShadow" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.receiveShadow')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.receiveShadow" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { NodeDescriptor } from '@vyr/engine';
+import { VyrSelect, VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { option } from '@vyr/builtin'
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+
+const descriptor = useDescriptor<NodeDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/ParticleFragment.vue

@@ -0,0 +1,147 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.count')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.count" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.duration')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.duration" :allow-null="false" :min="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.track')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.track" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="track"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.size')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.minSize" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.maxSize" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.minTrackOffset')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackOffset.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackOffset.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackOffset.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.maxTrackOffset')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackOffset.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackOffset.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackOffset.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.minTrackRotation')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackRotation.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackRotation.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackRotation.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.maxTrackRotation')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackRotation.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackRotation.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackRotation.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.minTrackScale')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackScale.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackScale.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.minTrackScale.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Particle.maxTrackScale')">
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackScale.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackScale.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="8">
+                <vyr-input-number v-model="descriptor.maxTrackScale.z" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrInputNumber } from '@vyr/design';
+import { ParticleDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+const descriptor = useDescriptor<ParticleDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/PointsFragment.vue

@@ -0,0 +1,34 @@
+<template>
+    <slot name="header"></slot>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.material')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.material" :clearable="true" dragkey="material" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.geometry')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.geometry" :clearable="true" dragkey="geometry" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { PointsDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+const descriptor = useDescriptor<PointsDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/SpriteFragment.vue

@@ -0,0 +1,38 @@
+<template>
+    <slot name="header"></slot>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.material')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.material" :clearable="true" dragkey="material" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Sprite.center')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.center.x" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.center.y" :clearable="false" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrInputNumber } from '@vyr/design';
+import { SpriteDescriptor } from '@vyr/three';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+const descriptor = useDescriptor<SpriteDescriptor>()
+</script>
+
+<style lang="less" scoped></style>