@vyr/three-browser 0.0.1

package/src/service/inspector/NodeViewer.vue

@@ -0,0 +1,30 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Node')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor, NodeDescriptor } from '@vyr/engine';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<NodeDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<NodeDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/ParticleViewer.vue

@@ -0,0 +1,37 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Particle')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <particle-fragment></particle-fragment>
+        <material-fragment></material-fragment>
+        <points-material-fragment :sizable="false"></points-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { ParticleDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import ParticleFragment from '../../fragment/ParticleFragment.vue';
+import MaterialFragment from '../../fragment/material/MaterialFragment.vue';
+import PointsMaterialFragment from '../../fragment/material/PointsMaterialFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<ParticleDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<ParticleDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/PerspectiveCameraViewer.vue

@@ -0,0 +1,62 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.PerspectiveCamera')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <template #tool>
+            <i class="vyrfont vyr-copy_from" title="同步场景相机的位置、旋转和缩放" @click="syncCamera"></i>
+            <i class="vyrfont vyr-copy_to" title="使用此相机来设置场景相机的位置、旋转和缩放" @click="setCamera"></i>
+        </template>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { onBeforeUnmount, Ref, ref, watch } from 'vue'
+import { runtime, RemoteService } from '@vyr/runtime';
+import { Job } from '@vyr/remote'
+import { Descriptor } from '@vyr/engine';
+import { PerspectiveCameraDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<PerspectiveCameraDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<PerspectiveCameraDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+
+const remoteService = runtime.get<RemoteService>('remote')
+const preview = remoteService.get('preview')
+
+const updateCamera = (task: InstanceType<typeof Job['invoke']['properties']['Response']>) => {
+    if (descriptor.value === null) return
+    descriptor.value.position.x = task.params.properties.position.x
+    descriptor.value.position.y = task.params.properties.position.y
+    descriptor.value.position.z = task.params.properties.position.z
+    descriptor.value.rotation.x = task.params.properties.rotation.x
+    descriptor.value.rotation.y = task.params.properties.rotation.y
+    descriptor.value.rotation.z = task.params.properties.rotation.z
+    descriptor.value.scale.x = task.params.properties.scale.x
+    descriptor.value.scale.y = task.params.properties.scale.y
+    descriptor.value.scale.z = task.params.properties.scale.z
+}
+const syncCamera = () => {
+    preview.bridge.send(new Job.invoke.properties.Task({ type: 'getCurrentCamera', uuid: props.raw }))
+}
+const setCamera = () => {
+    preview.bridge.send(new Job.invoke.properties.Task({ type: 'setCurrentCamera', uuid: props.raw }))
+}
+preview.bridge.listen(Job.invoke.properties.Method, updateCamera)
+onBeforeUnmount(() => preview.bridge.unlisten(Job.invoke.properties.Method, updateCamera))
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/PointsViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Points')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <points-fragment></points-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { PointsDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import PointsFragment from '../../fragment/PointsFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<PointsDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<PointsDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/ServiceViewer.vue

@@ -0,0 +1,92 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get(`descriptor.type.${descriptor.type}` as any)" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <HTML-fragment :raw="raw"></HTML-fragment>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Service.shadowMap.type')">
+                <vyr-col>
+                    <vyr-select v-model="descriptor.shadowMapType" :data="Shadow.typeOptions"></vyr-select>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Service.shadowMap.update')">
+                <vyr-col>
+                    <vyr-select v-model="descriptor.autoUpdateShadowMap" :data="Shadow.updateOptions"></vyr-select>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.Service.background')">
+                <vyr-col>
+                    <vyr-input v-model="descriptor.background" :clearable="true" dragkey="background"
+                        :draggable="draggable" trigger="blur"></vyr-input>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <!-- <template v-if="isComposer(descriptor)">
+            <vyr-row>
+                <vyr-label :label="language.get('inspector.Service.multisampling')">
+                    <vyr-col>
+                        <vyr-input-number v-model="descriptor.multisampling" :allow-null="false"
+                            :min="0"></vyr-input-number>
+                    </vyr-col>
+                </vyr-label>
+            </vyr-row>
+            <vyr-row>
+                <vyr-label :label="language.get('inspector.Service.frameBufferType')">
+                    <vyr-col>
+                        <vyr-select v-model="descriptor.frameBufferType" :data="Texture.ftypeOptions"></vyr-select>
+                    </vyr-col>
+                </vyr-label>
+            </vyr-row>
+            <vyr-row>
+                <vyr-label :label="language.get('inspector.Service.depthBuffer')">
+                    <vyr-col>
+                        <vyr-select v-model="descriptor.depthBuffer" :data="option.booleanOptions"></vyr-select>
+                    </vyr-col>
+                </vyr-label>
+            </vyr-row>
+            <vyr-row>
+                <vyr-label :label="language.get('inspector.Service.stencilBuffer')">
+                    <vyr-col>
+                        <vyr-select v-model="descriptor.stencilBuffer" :data="option.booleanOptions"></vyr-select>
+                    </vyr-col>
+                </vyr-label>
+            </vyr-row>
+        </template> -->
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { computed, Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { SceneServiceDescriptor } from '@vyr/three';
+import { VyrCard, VyrRow, VyrLabel, VyrCol, VyrSelect, VyrInput, VyrInputNumber } from '@vyr/design';
+import { BaseFragment, HTMLFragment, option, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { Shadow, Texture } from '../../option'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import { DraggableService, runtime } from '@vyr/runtime';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<SceneServiceDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<SceneServiceDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+
+// const isComposer = (descriptor: Descriptor): descriptor is ComposerServiceDescriptor => {
+//     return descriptor instanceof ComposerServiceDescriptor
+// }
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/SpriteViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Sprite')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <sprite-fragment></sprite-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { SpriteDescriptor } from '@vyr/three';
+import { VyrCard } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import SpriteFragment from '../../fragment/SpriteFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<SpriteDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<SpriteDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/TextViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Text')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <text-fragment></text-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { TextDescriptor } from '@vyr/three';
+import { VyrCard } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import TextFragment from '../../fragment/TextFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<TextDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<TextDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/animation/AnimationActionViewer.vue

@@ -0,0 +1,31 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.AnimationAction')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <animation-action-fragment :raw="raw">
+        </animation-action-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { AnimationActionDescriptor } from '@vyr/three';
+import { VyrCard } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import AnimationActionFragment from '../../../fragment/animation/AnimationActionFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<AnimationActionDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = AnimationActionDescriptor.get<AnimationActionDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/BoxGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.BoxGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <box-geometry-fragment></box-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { BoxGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import BoxGeometryFragment from '../../../fragment/geometry/BoxGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<BoxGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<BoxGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/BufferGeometryViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.BufferGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <buffer-geometry-fragment></buffer-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { BufferGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import BufferGeometryFragment from '../../../fragment/geometry/BufferGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+
+const descriptor = ref(null) as Ref<BufferGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<BufferGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/CircleGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.CircleGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <circle-geometry-fragment></circle-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { CircleGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import CircleGeometryFragment from '../../../fragment/geometry/CircleGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<CircleGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<CircleGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/CylinderGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.CylinderGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <cylinder-geometry-fragment></cylinder-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { CylinderGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import CylinderGeometryFragment from '../../../fragment/geometry/CylinderGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<CylinderGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<CylinderGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/ExtrudeGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.ExtrudeGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <extrude-geometry-fragment></extrude-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { TubeGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import ExtrudeGeometryFragment from '../../../fragment/geometry/ExtrudeGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<TubeGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<TubeGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/PlaneGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.PlaneGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <plane-geometry-fragment></plane-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { PlaneGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import PlaneGeometryFragment from '../../../fragment/geometry/PlaneGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<PlaneGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<PlaneGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/RingGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.RingGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <ring-geometry-fragment></ring-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { RingGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import RingGeometryFragment from '../../../fragment/geometry/RingGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<RingGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<RingGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/SphereGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.SphereGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <sphere-geometry-fragment></sphere-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { SphereGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import SphereGeometryFragment from '../../../fragment/geometry/SphereGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<SphereGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<SphereGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/geometry/SurfaceGeometryViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.SurfaceGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <surface-geometry-fragment></surface-geometry-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { TubeGeometryDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../../locale'
+import { providerDescriptor } from '../../../common';
+import SurfaceGeometryFragment from '../../../fragment/geometry/SurfaceGeometryFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<TubeGeometryDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<TubeGeometryDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>