@vyr/three-browser 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyr/three-browser",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "",
   "main": "./src/index.ts",
   "author": "",

package/src/common/provider.ts

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

package/src/common/validate.ts

@@ -1,10 +1,8 @@
 import { Descriptor } from "@vyr/engine"
 
-const instanceofArray = (Class: typeof Descriptor, instances: Descriptor[]) => {
+export 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

@@ -82,7 +82,7 @@
 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 { GeoMap } from '@vyr/three';
 import { language } from '../locale'
 import { useDescriptor } from '../common';
 import { Mesh } from '../option';
@@ -90,7 +90,7 @@ import { Mesh } from '../option';
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))
 
-const descriptor = useDescriptor<GeoMapDescriptor>()
+const descriptor = useDescriptor<GeoMap>()
 const materialOptions = computed(() => {
     const options: { label: string; value: number }[] = []
     if (typeof descriptor.value.material === 'string') return options

package/src/fragment/InstancedMeshFragment.vue

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

package/src/fragment/MeshFragment.vue

@@ -2,7 +2,7 @@
     <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"
+                <vyr-select :model-value="typeof descriptor.material === 'string' ? 1 : 2" :data="MeshOption.typeOptions"
                     @update:modelValue="changeMode"></vyr-select>
             </vyr-col>
         </vyr-label>
@@ -50,16 +50,16 @@
 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 { Mesh } from '@vyr/three';
 import { language } from '../locale'
 import { useDescriptor } from '../common';
-import { Mesh } from '../option';
+import { Mesh as MeshOption } from '../option';
 
 defineProps<{ }>()
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))
 
-const descriptor = useDescriptor<MeshDescriptor>()
+const descriptor = useDescriptor<Mesh>()
 const materialOptions = computed(() => {
     const options: { label: string; value: number }[] = []
     if (typeof descriptor.value.material === 'string') return options

package/src/fragment/ModelFragment.vue

@@ -14,14 +14,14 @@
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
 import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
-import { ModelDescriptor } from '@vyr/three';
+import { Model } 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>()
+const descriptor = useDescriptor<Model>()
 
 </script>
 

package/src/fragment/NodeFragment.vue

@@ -81,13 +81,13 @@
 
 
 <script lang="ts" setup>
-import { NodeDescriptor } from '@vyr/engine';
+import { Node } 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>()
+const descriptor = useDescriptor<Node>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/ParticleFragment.vue

@@ -135,13 +135,13 @@
 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 { Particle } 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>()
+const descriptor = useDescriptor<Particle>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/PointsFragment.vue

@@ -22,13 +22,13 @@
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
 import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
-import { PointsDescriptor } from '@vyr/three';
+import { Points } 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>()
+const descriptor = useDescriptor<Points>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/SpriteFragment.vue

@@ -26,13 +26,13 @@
 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 { Sprite } 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>()
+const descriptor = useDescriptor<Sprite>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/{TextFragment.vue → Text3DFragment.vue}

@@ -8,7 +8,7 @@
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.font')">
+        <vyr-label :label="language.get('inspector.Text3D.font')">
             <vyr-col>
                 <vyr-input v-model="descriptor.font" :clearable="true" :draggable="draggable" trigger="blur"
                     dragkey="font"></vyr-input>
@@ -16,35 +16,35 @@
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.size')">
+        <vyr-label :label="language.get('inspector.Text3D.size')">
             <vyr-col>
                 <vyr-input-number v-model="descriptor.size" :allow-null="false"></vyr-input-number>
             </vyr-col>
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.maxWidth')">
+        <vyr-label :label="language.get('inspector.Text3D.maxWidth')">
             <vyr-col>
                 <vyr-input-number v-model="descriptor.maxWidth" :allow-null="false"></vyr-input-number>
             </vyr-col>
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.lineHeight')">
+        <vyr-label :label="language.get('inspector.Text3D.lineHeight')">
             <vyr-col>
                 <vyr-input-number v-model="descriptor.lineHeight" :allow-null="false"></vyr-input-number>
             </vyr-col>
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.letterSpacing')">
+        <vyr-label :label="language.get('inspector.Text3D.letterSpacing')">
             <vyr-col>
                 <vyr-input-number v-model="descriptor.letterSpacing" :allow-null="false"></vyr-input-number>
             </vyr-col>
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Text.text')">
+        <vyr-label :label="language.get('inspector.Text3D.text')">
             <vyr-col>
                 <vyr-input v-model="descriptor.text" trigger="blur"></vyr-input>
             </vyr-col>
@@ -83,13 +83,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
-import { TextDescriptor } from '@vyr/three';
+import { Text3D } from '@vyr/three';
 import { VyrInput, VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
 import { language } from '../locale'
 import { useDescriptor } from '../common';
 import { Geometry } from '../option';
 
-const descriptor = useDescriptor<TextDescriptor>()
+const descriptor = useDescriptor<Text3D>()
 
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))

package/src/fragment/animation/AnimationActionFragment.vue

@@ -84,7 +84,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { DataService, runtime } from '@vyr/runtime';
-import { AnimationActionDescriptor } from '@vyr/three';
+import { AnimationAction } from '@vyr/three';
 import { option } from '@vyr/builtin'
 import { VyrRow, VyrCol, VyrLabel, VyrInputNumber, VyrSelect } from '@vyr/design';
 import { language } from '../../locale'
@@ -92,11 +92,11 @@ import { useDescriptor } from '../../common';
 import { Animation } from '../../option'
 
 const props = defineProps<{ raw: string }>()
-const descriptor = useDescriptor<AnimationActionDescriptor>()
+const descriptor = useDescriptor<AnimationAction>()
 const dataService = runtime.get<DataService>('data')
 
 const animationOptions = computed(() => {
-    const raw = AnimationActionDescriptor.get<AnimationActionDescriptor>(props.raw)
+    const raw = AnimationAction.get<AnimationAction>(props.raw)
     if (raw === null) return []
     const { parent } = raw.traceAncestor(false)
     if (parent === null) return []

package/src/fragment/geometry/BoxGeometryFragment.vue

@@ -33,12 +33,12 @@
 
 
 <script lang="ts" setup>
-import { BoxGeometryDescriptor } from '@vyr/three';
+import { BoxGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<BoxGeometryDescriptor>()
+const descriptor = useDescriptor<BoxGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/BufferGeometryFragment.vue

@@ -12,12 +12,12 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { DraggableService, runtime } from '@vyr/runtime';
-import { BufferGeometryDescriptor } from '@vyr/three';
+import { BufferGeometry } from '@vyr/three';
 import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<BufferGeometryDescriptor>()
+const descriptor = useDescriptor<BufferGeometry>()
 
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))

package/src/fragment/geometry/CircleGeometryFragment.vue

@@ -24,12 +24,12 @@
 
 
 <script lang="ts" setup>
-import { CircleGeometryDescriptor } from '@vyr/three';
+import { CircleGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<CircleGeometryDescriptor>()
+const descriptor = useDescriptor<CircleGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/CylinderGeometryFragment.vue

@@ -48,13 +48,13 @@
 
 
 <script lang="ts" setup>
-import { CylinderGeometryDescriptor } from '@vyr/three';
+import { CylinderGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 import { Geometry } from '../../option';
 
-const descriptor = useDescriptor<CylinderGeometryDescriptor>()
+const descriptor = useDescriptor<CylinderGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/ExtrudeGeometryFragment.vue

@@ -95,14 +95,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
-import { ExtrudeGeometryDescriptor } from '@vyr/three';
+import { ExtrudeGeometry } from '@vyr/three';
 import { option } from '@vyr/builtin'
 import { VyrInput, VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 import { Geometry } from '../../option';
 
-const descriptor = useDescriptor<ExtrudeGeometryDescriptor>()
+const descriptor = useDescriptor<ExtrudeGeometry>()
 
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))

package/src/fragment/geometry/PlaneGeometryFragment.vue

@@ -24,12 +24,12 @@
 
 
 <script lang="ts" setup>
-import { PlaneGeometryDescriptor } from '@vyr/three';
+import { PlaneGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<PlaneGeometryDescriptor>()
+const descriptor = useDescriptor<PlaneGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/RingGeometryFragment.vue

@@ -34,12 +34,12 @@
 
 
 <script lang="ts" setup>
-import { RingGeometryDescriptor } from '@vyr/three';
+import { RingGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<RingGeometryDescriptor>()
+const descriptor = useDescriptor<RingGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/SphereGeometryFragment.vue

@@ -40,12 +40,12 @@
 
 
 <script lang="ts" setup>
-import { SphereGeometryDescriptor } from '@vyr/three';
+import { SphereGeometry } from '@vyr/three';
 import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<SphereGeometryDescriptor>()
+const descriptor = useDescriptor<SphereGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/SurfaceGeometryFragment.vue

@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import { SurfaceGeometryDescriptor } from '@vyr/three';
+import { SurfaceGeometry } from '@vyr/three';
 import { VyrInputNumber } from '@vyr/design';
 import { useDescriptor } from '../../common';
 import ExtrudeGeometryFragment from './ExtrudeGeometryFragment.vue';
 
-const descriptor = useDescriptor<SurfaceGeometryDescriptor>()
+const descriptor = useDescriptor<SurfaceGeometry>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/geometry/TubeGeometryFragment.vue

@@ -50,13 +50,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
-import { TubeGeometryDescriptor } from '@vyr/three';
+import { TubeGeometry } from '@vyr/three';
 import { VyrInput, VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 import { Geometry } from '../../option';
 
-const descriptor = useDescriptor<TubeGeometryDescriptor>()
+const descriptor = useDescriptor<TubeGeometry>()
 
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))

package/src/fragment/light/AmbientLightFragment.vue

@@ -17,11 +17,11 @@
 
 <script lang="ts" setup>
 import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { AmbientLightDescriptor } from '@vyr/three';
+import { AmbientLight } from '@vyr/three';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<AmbientLightDescriptor>()
+const descriptor = useDescriptor<AmbientLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/light/DirectionalLightFragment.vue

@@ -73,14 +73,14 @@
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
 import { VyrRow, VyrCol, VyrLabel, VyrInput, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { DirectionalLightDescriptor } from '@vyr/three';
+import { DirectionalLight } 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<DirectionalLightDescriptor>()
+const descriptor = useDescriptor<DirectionalLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/light/HemisphereLightFragment.vue

@@ -24,11 +24,11 @@
 
 <script lang="ts" setup>
 import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { HemisphereLightDescriptor } from '@vyr/three';
+import { HemisphereLight } from '@vyr/three';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<HemisphereLightDescriptor>()
+const descriptor = useDescriptor<HemisphereLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/light/PointLightFragment.vue

@@ -58,11 +58,11 @@
 
 <script lang="ts" setup>
 import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { PointLightDescriptor } from '@vyr/three';
+import { PointLight } from '@vyr/three';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<PointLightDescriptor>()
+const descriptor = useDescriptor<PointLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/light/RectAreaLightFragment.vue

@@ -38,11 +38,11 @@
 
 <script lang="ts" setup>
 import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { RectAreaLightDescriptor } from '@vyr/three';
+import { RectAreaLight } from '@vyr/three';
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 
-const descriptor = useDescriptor<RectAreaLightDescriptor>()
+const descriptor = useDescriptor<RectAreaLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/light/SpotLightFragment.vue

@@ -83,14 +83,14 @@
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
 import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
-import { SpotLightDescriptor } from '@vyr/three';
+import { SpotLight } 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<SpotLightDescriptor>()
+const descriptor = useDescriptor<SpotLight>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/material/MaterialFragment.vue

@@ -22,9 +22,9 @@
         </vyr-label>
     </vyr-row>
     <vyr-row>
-        <vyr-label :label="language.get('inspector.Material.depthrWrite')">
+        <vyr-label :label="language.get('inspector.Material.depthWrite')">
             <vyr-col>
-                <vyr-select v-model="descriptor.depthrWrite" :data="option.stateOptions"></vyr-select>
+                <vyr-select v-model="descriptor.depthWrite" :data="option.stateOptions"></vyr-select>
             </vyr-col>
         </vyr-label>
     </vyr-row>
@@ -40,14 +40,14 @@
 
 
 <script lang="ts" setup>
-import { MeshBasicMaterialDescriptor } from '@vyr/three';
+import { MeshBasicMaterial } from '@vyr/three';
 import { VyrRow, VyrCol, VyrLabel, VyrChecked, VyrSelect } from '@vyr/design';
 import { option, } from '@vyr/builtin'
 import { language } from '../../locale'
 import { useDescriptor } from '../../common';
 import { Material } from '../../option';
 
-const descriptor = useDescriptor<MeshBasicMaterialDescriptor>()
+const descriptor = useDescriptor<MeshBasicMaterial>()
 </script>
 
 <style lang="less" scoped></style>

package/src/fragment/material/MeshBasicMaterialFragment.vue

@@ -3,7 +3,7 @@
         <vyr-label :label="language.get('inspector.Material.color')">
             <vyr-col>
                 <vyr-checked v-model="descriptor.colorWrite"></vyr-checked>
-                <vyr-color-picker v-model="descriptor.color.value" width="all"></vyr-color-picker>
+                <vyr-color-picker v-model="descriptor.color" width="all"></vyr-color-picker>
             </vyr-col>
         </vyr-label>
     </vyr-row>
@@ -27,7 +27,7 @@
         <vyr-label :label="language.get('inspector.Material.transparent')">
             <vyr-col>
                 <vyr-checked v-model="descriptor.transparent"></vyr-checked>
-                <vyr-input-number v-model="descriptor.color.opacity" :allow-null="false"></vyr-input-number>
+                <vyr-input-number v-model="descriptor.opacity" :allow-null="false"></vyr-input-number>
             </vyr-col>
         </vyr-label>
     </vyr-row>
@@ -110,7 +110,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { DraggableService, runtime } from '@vyr/runtime';
-import { MeshBasicMaterialDescriptor } from '@vyr/three';
+import { MeshBasicMaterial } from '@vyr/three';
 import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrChecked, VyrColorPicker, VyrInputNumber, VyrSelect } from '@vyr/design';
 import { option } from '@vyr/builtin'
 import { language } from '../../locale'
@@ -119,7 +119,7 @@ import { Material } from '../../option';
 
 const draggableService = runtime.get<DraggableService>('draggable')
 const draggable = computed(() => draggableService.get(draggableService.key.inspector))
-const descriptor = useDescriptor<MeshBasicMaterialDescriptor>()
+const descriptor = useDescriptor<MeshBasicMaterial>()
 
 </script>