@vyr/three-browser 0.0.1

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

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.TubeGeometry')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <tube-geometry-fragment></tube-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 TubeGeometryFragment from '../../../fragment/geometry/TubeGeometryFragment.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/index.ts

@@ -0,0 +1,50 @@
+import { NodeDescriptor } from '@vyr/engine';
+import { AmbientLightDescriptor, AnimationActionDescriptor, BoxGeometryDescriptor, BufferGeometryDescriptor, CircleGeometryDescriptor, CylinderGeometryDescriptor, DirectionalLightDescriptor, ExtrudeGeometryDescriptor, GeoMapDescriptor, HemisphereLightDescriptor, HTMLConvertDescriptor, InstancedMeshDescriptor, MeshBasicMaterialDescriptor, MeshDescriptor, MeshPhongMaterialDescriptor, MeshStandardMaterialDescriptor, ModelDescriptor, ParticleDescriptor, PerspectiveCameraDescriptor, PlaneGeometryDescriptor, PointLightDescriptor, PointsDescriptor, PointsMaterialDescriptor, RectAreaLightDescriptor, RingGeometryDescriptor, SceneServiceDescriptor, ShaderMaterialDescriptor, ShadowMaterialDescriptor, SphereGeometryDescriptor, SpotLightDescriptor, SpriteDescriptor, SpriteMaterialDescriptor, SurfaceGeometryDescriptor, TextDescriptor, TextureDescriptor, TubeGeometryDescriptor } from '@vyr/three';
+
+export default [
+    { type: MeshBasicMaterialDescriptor.type, import: () => import('./material/MeshBasicMaterialViewer.vue') },
+    { type: MeshPhongMaterialDescriptor.type, import: () => import('./material/MeshPhongMaterialViewer.vue') },
+    { type: MeshStandardMaterialDescriptor.type, import: () => import('./material/MeshStandardMaterialViewer.vue') },
+    { type: PointsMaterialDescriptor.type, import: () => import('./material/PointsMaterialViewer.vue') },
+    { type: SpriteMaterialDescriptor.type, import: () => import('./material/SpriteMaterialViewer.vue') },
+    { type: ShadowMaterialDescriptor.type, import: () => import('./material/ShadowMaterialViewer.vue') },
+    { type: ShaderMaterialDescriptor.type, import: () => import('./material/ShaderMaterialViewer.vue') },
+
+    { type: BoxGeometryDescriptor.type, import: () => import('./geometry/BoxGeometryViewer.vue') },
+    { type: CircleGeometryDescriptor.type, import: () => import('./geometry/CircleGeometryViewer.vue') },
+    { type: CylinderGeometryDescriptor.type, import: () => import('./geometry/CylinderGeometryViewer.vue') },
+    { type: PlaneGeometryDescriptor.type, import: () => import('./geometry/PlaneGeometryViewer.vue') },
+    { type: RingGeometryDescriptor.type, import: () => import('./geometry/RingGeometryViewer.vue') },
+    { type: SphereGeometryDescriptor.type, import: () => import('./geometry/SphereGeometryViewer.vue') },
+    { type: ExtrudeGeometryDescriptor.type, import: () => import('./geometry/ExtrudeGeometryViewer.vue') },
+    { type: SurfaceGeometryDescriptor.type, import: () => import('./geometry/SurfaceGeometryViewer.vue') },
+    { type: TubeGeometryDescriptor.type, import: () => import('./geometry/TubeGeometryViewer.vue') },
+    { type: BufferGeometryDescriptor.type, import: () => import('./geometry/BufferGeometryViewer.vue') },
+
+    { type: TextureDescriptor.type, import: () => import('./texture/TextureViewer.vue') },
+
+    { type: AnimationActionDescriptor.type, import: () => import('./animation/AnimationActionViewer.vue') },
+
+    { type: PerspectiveCameraDescriptor.type, import: () => import('./PerspectiveCameraViewer.vue') },
+
+    { type: SceneServiceDescriptor.type, import: () => import('./ServiceViewer.vue') },
+    // { type: ComposerServiceDescriptor.type, import: () => import('./ServiceViewer.vue') },
+    { type: NodeDescriptor.type, import: () => import('./NodeViewer.vue') },
+    { type: MeshDescriptor.type, import: () => import('./MeshViewer.vue') },
+    { type: TextDescriptor.type, import: () => import('./TextViewer.vue') },
+    { type: PointsDescriptor.type, import: () => import('./PointsViewer.vue') },
+    { type: ParticleDescriptor.type, import: () => import('./ParticleViewer.vue') },
+    { type: SpriteDescriptor.type, import: () => import('./SpriteViewer.vue') },
+    { type: ModelDescriptor.type, import: () => import('./ModelViewer.vue') },
+    { type: GeoMapDescriptor.type, import: () => import('./GeoMapViewer.vue') },
+    { type: HTMLConvertDescriptor.type, import: () => import('./HTMLConvertViewer.vue') },
+    { type: InstancedMeshDescriptor.type, import: () => import('./InstanceMeshViewer.vue') },
+
+    { type: AmbientLightDescriptor.type, import: () => import('./light/AmbientLightViewer.vue') },
+    { type: DirectionalLightDescriptor.type, import: () => import('./light/DirectionalLightViewer.vue') },
+    { type: HemisphereLightDescriptor.type, import: () => import('./light/HemisphereLightViewer.vue') },
+    { type: PointLightDescriptor.type, import: () => import('./light/PointLightViewer.vue') },
+    { type: RectAreaLightDescriptor.type, import: () => import('./light/RectAreaLightViewer.vue') },
+    { type: SpotLightDescriptor.type, import: () => import('./light/SpotLightViewer.vue') },
+
+]

package/src/service/inspector/light/AmbientLightViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.AmbientLight')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <ambient-light-fragment></ambient-light-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { AmbientLightDescriptor } 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 AmbientLightFragment from '../../../fragment/light/AmbientLightFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<AmbientLightDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<AmbientLightDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/light/DirectionalLightViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.DirectionalLight')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <directional-light-fragment></directional-light-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { DirectionalLightDescriptor } 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 DirectionalLightFragment from '../../../fragment/light/DirectionalLightFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<DirectionalLightDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<DirectionalLightDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/light/HemisphereLightViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.HemisphereLight')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <hemisphere-light-fragment></hemisphere-light-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { HemisphereLightDescriptor } 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 HemisphereLightFragment from '../../../fragment/light/HemisphereLightFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<HemisphereLightDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<HemisphereLightDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/light/PointLightViewer.vue

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

package/src/service/inspector/light/RectAreaLightViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.RectAreaLight')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <rect-area-light-fragment></rect-area-light-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { RectAreaLightDescriptor } 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 RectAreaLightFragment from '../../../fragment/light/RectAreaLightFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<RectAreaLightDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<RectAreaLightDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/light/SpotLightViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.SpotLight')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <spot-light-fragment></spot-light-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { SpotLightDescriptor } 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 SpotLightFragment from '../../../fragment/light/SpotLightFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<SpotLightDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<SpotLightDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/MeshBasicMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.MeshBasicMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <mesh-basic-material-fragment></mesh-basic-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { MeshBasicMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import MeshBasicMaterialFragment from '../../../fragment/material/MeshBasicMaterialFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<MeshBasicMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<MeshBasicMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/MeshPhongMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.MeshPhongMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <mesh-phong-material-fragment></mesh-phong-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { MeshPhongMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import MeshPhongMaterialFragment from '../../../fragment/material/MeshPhongMaterialFragment.vue'
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<MeshPhongMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<MeshPhongMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/MeshStandardMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.MeshStandardMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <mesh-standard-material-fragment></mesh-standard-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { MeshStandardMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import MeshStandardMaterialFragment from '../../../fragment/material/MeshStandardMaterialFragment.vue'
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<MeshStandardMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<MeshStandardMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/PointsMaterialViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.PointsMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <points-material-fragment></points-material-fragment>
+    </vyr-card>
+</template>
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { PointsMaterialDescriptor } 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 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<PointsMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<PointsMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/ShaderMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.ShaderMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <shader-material-fragment></shader-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { ShaderMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import ShaderMaterialFragment from '../../../fragment/material/ShaderMaterialFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<ShaderMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<ShaderMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/ShadowMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.ShadowMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <shadow-material-fragment></shadow-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { ShadowMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import ShadowMaterialFragment from '../../../fragment/material/ShadowMaterialFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<ShadowMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<ShadowMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/material/SpriteMaterialViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.SpriteMaterial')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <material-fragment></material-fragment>
+        <sprite-material-fragment></sprite-material-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { SpriteMaterialDescriptor } 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 MaterialFragment from '../../../fragment/material/MaterialFragment.vue';
+import SpriteMaterialFragment from '../../../fragment/material/SpriteMaterialFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<SpriteMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<SpriteMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/texture/TextureViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Texture')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <texture-fragment></texture-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { MeshBasicMaterialDescriptor } 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 TextureFragment from '../../../fragment/texture/TextureFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<MeshBasicMaterialDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<MeshBasicMaterialDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/sidebar/asset/action/AddAnimationAction.ts

@@ -0,0 +1,66 @@
+import { AnimationUnitDescriptor, Descriptor } from "@vyr/engine";
+import { Action, DataService, runtime } from "@vyr/runtime";
+import { sidebar } from '@vyr/builtin'
+import { AnimationActionDescriptor, ModelDescriptor } from "@vyr/three";
+import { language } from '../../../../locale'
+
+class AddAnimationAction extends Action {
+    static id = 'sidebar.asset.AddAnimation'
+    static generate = (label: string, Class: typeof Descriptor) => {
+        class ClassAction extends Action {
+            static id = Class.type
+            label = label
+            update() {
+                this.show = false
+                this.disabled = true
+                const dataService = runtime.get<DataService>('data')
+                const navigator = dataService.sidebar.get<sidebar.asset.AssetNavigator>(sidebar.asset.AssetNavigator.key)
+                if (navigator.status.mouseItem === null) return
+                this.show = true
+                if (Class.type === AnimationActionDescriptor.type) {
+                    if ((navigator.status.mouseItem instanceof ModelDescriptor) === false) return
+                }
+                this.disabled = false
+            }
+            validator() {
+                return false
+            }
+            execute() {
+                const dataService = runtime.get<DataService>('data')
+                const navigator = dataService.sidebar.get<sidebar.asset.AssetNavigator>(sidebar.asset.AssetNavigator.key)
+                navigator.status.modifyMode = 'add'
+                navigator.status.modifyContent = new Class({})
+                navigator.status.modifyValue = navigator.status.mouseItem
+            }
+        }
+        return new ClassAction()
+    }
+    label = language.get('sidebar.asset.action.addAnimation.label')
+    order = 2
+    children = [
+        AddAnimationAction.generate(language.get('descriptor.type.AnimationUnit'), AnimationUnitDescriptor),
+        AddAnimationAction.generate(language.get('descriptor.type.AnimationAction'), AnimationActionDescriptor),
+    ]
+    active() {
+        const dataService = runtime.get<DataService>('data')
+
+        return dataService.sidebar.active === sidebar.asset.AssetNavigator.key
+    }
+    update() {
+        this.show = false
+        this.disabled = true
+        const dataService = runtime.get<DataService>('data')
+        const navigator = dataService.sidebar.get<sidebar.asset.AssetNavigator>(sidebar.asset.AssetNavigator.key)
+        if (navigator.status.mouseItem === null) return
+        if (navigator.status.mouseItem === navigator.root) return
+
+        this.show = true
+        this.disabled = false
+    }
+    validator() {
+        return false
+    }
+    execute() { }
+}
+
+export { AddAnimationAction }