npm - @vyr/three-browser - Versions diffs - 0.0.1 - Mend

@vyr/three-browser 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/package.json +25 -0
package/src/common/index.ts +2 -0
package/src/common/provider.ts +14 -0
package/src/common/validate.ts +10 -0
package/src/fragment/GeoMapFragment.vue +129 -0
package/src/fragment/InstancedMeshFragment.vue +29 -0
package/src/fragment/MeshFragment.vue +98 -0
package/src/fragment/ModelFragment.vue +28 -0
package/src/fragment/NodeFragment.vue +93 -0
package/src/fragment/ParticleFragment.vue +147 -0
package/src/fragment/PointsFragment.vue +34 -0
package/src/fragment/SpriteFragment.vue +38 -0
package/src/fragment/TextFragment.vue +98 -0
package/src/fragment/animation/AnimationActionFragment.vue +110 -0
package/src/fragment/geometry/BoxGeometryFragment.vue +44 -0
package/src/fragment/geometry/BufferGeometryFragment.vue +26 -0
package/src/fragment/geometry/CircleGeometryFragment.vue +35 -0
package/src/fragment/geometry/CylinderGeometryFragment.vue +60 -0
package/src/fragment/geometry/ExtrudeGeometryFragment.vue +111 -0
package/src/fragment/geometry/PlaneGeometryFragment.vue +35 -0
package/src/fragment/geometry/RingGeometryFragment.vue +45 -0
package/src/fragment/geometry/SphereGeometryFragment.vue +51 -0
package/src/fragment/geometry/SurfaceGeometryFragment.vue +18 -0
package/src/fragment/geometry/TubeGeometryFragment.vue +65 -0
package/src/fragment/light/AmbientLightFragment.vue +27 -0
package/src/fragment/light/DirectionalLightFragment.vue +86 -0
package/src/fragment/light/HemisphereLightFragment.vue +34 -0
package/src/fragment/light/PointLightFragment.vue +68 -0
package/src/fragment/light/RectAreaLightFragment.vue +48 -0
package/src/fragment/light/SpotLightFragment.vue +96 -0
package/src/fragment/material/MaterialFragment.vue +53 -0
package/src/fragment/material/MeshBasicMaterialFragment.vue +126 -0
package/src/fragment/material/MeshPhongMaterialFragment.vue +263 -0
package/src/fragment/material/MeshStandardMaterialFragment.vue +256 -0
package/src/fragment/material/PointsMaterialFragment.vue +81 -0
package/src/fragment/material/ShaderMaterialFragment.vue +61 -0
package/src/fragment/material/ShadowMaterialFragment.vue +49 -0
package/src/fragment/material/SpriteMaterialFragment.vue +79 -0
package/src/fragment/texture/TextureFragment.vue +131 -0
package/src/index.ts +4 -0
package/src/locale/Language.ts +10 -0
package/src/locale/LanguageProvider.ts +655 -0
package/src/locale/index.ts +2 -0
package/src/option/Animation.ts +17 -0
package/src/option/Geometry.ts +22 -0
package/src/option/Material.ts +42 -0
package/src/option/Mesh.ts +10 -0
package/src/option/Shadow.ts +18 -0
package/src/option/Texture.ts +55 -0
package/src/option/index.ts +6 -0
package/src/service/footer/action/geometry/index.ts +73 -0
package/src/service/footer/action/index.ts +9 -0
package/src/service/footer/action/material/index.ts +70 -0
package/src/service/footer/action/texture/index.ts +63 -0
package/src/service/global/index.ts +1 -0
package/src/service/global/scripts/index.ts +12 -0
package/src/service/index.ts +79 -0
package/src/service/inspector/GeoMapViewer.vue +32 -0
package/src/service/inspector/HTMLConvertViewer.vue +31 -0
package/src/service/inspector/InstanceMeshViewer.vue +33 -0
package/src/service/inspector/MeshViewer.vue +33 -0
package/src/service/inspector/ModelViewer.vue +34 -0
package/src/service/inspector/NodeViewer.vue +30 -0
package/src/service/inspector/ParticleViewer.vue +37 -0
package/src/service/inspector/PerspectiveCameraViewer.vue +62 -0
package/src/service/inspector/PointsViewer.vue +33 -0
package/src/service/inspector/ServiceViewer.vue +92 -0
package/src/service/inspector/SpriteViewer.vue +34 -0
package/src/service/inspector/TextViewer.vue +34 -0
package/src/service/inspector/animation/AnimationActionViewer.vue +31 -0
package/src/service/inspector/geometry/BoxGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/BufferGeometryViewer.vue +33 -0
package/src/service/inspector/geometry/CircleGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/CylinderGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/ExtrudeGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/PlaneGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/RingGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/SphereGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/SurfaceGeometryViewer.vue +32 -0
package/src/service/inspector/geometry/TubeGeometryViewer.vue +32 -0
package/src/service/inspector/index.ts +50 -0
package/src/service/inspector/light/AmbientLightViewer.vue +33 -0
package/src/service/inspector/light/DirectionalLightViewer.vue +33 -0
package/src/service/inspector/light/HemisphereLightViewer.vue +33 -0
package/src/service/inspector/light/PointLightViewer.vue +33 -0
package/src/service/inspector/light/RectAreaLightViewer.vue +33 -0
package/src/service/inspector/light/SpotLightViewer.vue +33 -0
package/src/service/inspector/material/MeshBasicMaterialViewer.vue +34 -0
package/src/service/inspector/material/MeshPhongMaterialViewer.vue +34 -0
package/src/service/inspector/material/MeshStandardMaterialViewer.vue +34 -0
package/src/service/inspector/material/PointsMaterialViewer.vue +33 -0
package/src/service/inspector/material/ShaderMaterialViewer.vue +34 -0
package/src/service/inspector/material/ShadowMaterialViewer.vue +34 -0
package/src/service/inspector/material/SpriteMaterialViewer.vue +34 -0
package/src/service/inspector/texture/TextureViewer.vue +32 -0
package/src/service/sidebar/asset/action/AddAnimationAction.ts +66 -0
package/src/service/sidebar/asset/action/AddLightAction.ts +66 -0
package/src/service/sidebar/asset/action/index.ts +7 -0
package/src/service/sidebar/scene/action/AddAnimationAction.ts +64 -0
package/src/service/sidebar/scene/action/AddLightAction.ts +66 -0
package/src/service/sidebar/scene/action/index.ts +7 -0
package/src/shims-vue.d.ts +10 -0

package/src/fragment/geometry/TubeGeometryFragment.vue ADDED Viewed

@@ -0,0 +1,65 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.TubeGeometry.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.Geometry.radius')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.radius" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.offset')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.x" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.y" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.TubeGeometry.tubular')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.tubularSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.TubeGeometry.radial')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.radialSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.TubeGeometry.closed')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.closed" :data="Geometry.tubeOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { TubeGeometryDescriptor } 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 draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/AmbientLightFragment.vue ADDED Viewed

@@ -0,0 +1,27 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { AmbientLightDescriptor } from '@vyr/three';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+const descriptor = useDescriptor<AmbientLightDescriptor>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/DirectionalLightFragment.vue ADDED Viewed

@@ -0,0 +1,86 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.target')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.target" :clearable="true" dragkey="target" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.basic')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.bias" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.normalBias" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.mapSize')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.x" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.y" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.camera')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.near" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.far" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.cameraRange')">
+            <vyr-col :span="6">
+                <vyr-input-number v-model="descriptor.camera.left" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="6">
+                <vyr-input-number v-model="descriptor.camera.right" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="6">
+                <vyr-input-number v-model="descriptor.camera.top" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="6">
+                <vyr-input-number v-model="descriptor.camera.bottom" :allow-null="false"></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 { VyrRow, VyrCol, VyrLabel, VyrInput, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { DirectionalLightDescriptor } 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>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/HemisphereLightFragment.vue ADDED Viewed

@@ -0,0 +1,34 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.groundColor')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.groundColor" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { HemisphereLightDescriptor } from '@vyr/three';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+const descriptor = useDescriptor<HemisphereLightDescriptor>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/PointLightFragment.vue ADDED Viewed

@@ -0,0 +1,68 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.decay')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.decay" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.distance')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.distance" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.power')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.power" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.mapSize')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.x" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.y" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.camera')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.near" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.far" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { PointLightDescriptor } from '@vyr/three';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+const descriptor = useDescriptor<PointLightDescriptor>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/RectAreaLightFragment.vue ADDED Viewed

@@ -0,0 +1,48 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.width')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.width" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.height')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.height" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.power')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.power" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { VyrRow, VyrCol, VyrLabel, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { RectAreaLightDescriptor } from '@vyr/three';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+const descriptor = useDescriptor<RectAreaLightDescriptor>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/light/SpotLightFragment.vue ADDED Viewed

@@ -0,0 +1,96 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.color')">
+            <vyr-col>
+                <vyr-color-picker v-model="descriptor.color" :allow-null="false" width="all"></vyr-color-picker>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.intensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.intensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.target')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.target" :clearable="true" dragkey="target" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.angle')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.angle" :min="0" :max="Math.PI / 2"
+                    :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.distance')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.distance" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.decay')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.decay" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.penumbra')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.penumbra" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.power')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.power" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.mapSize')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.x" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.mapSize.y" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Light.camera')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.near" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.camera.far" :allow-null="false"></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, VyrColorPicker, VyrInputNumber } from '@vyr/design';
+import { SpotLightDescriptor } 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>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/material/MaterialFragment.vue ADDED Viewed

@@ -0,0 +1,53 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.side')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.side" :data="Material.sideOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.blending')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.blending" :data="Material.blendingOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.depthTest')">
+            <vyr-col>
+                <vyr-checked v-model="descriptor.depthTest"></vyr-checked>
+                <vyr-select v-model="descriptor.depthFunc" :data="Material.depthFuncOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.depthrWrite')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.depthrWrite" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.vertexColors')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.vertexColors" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <slot></slot>
+</template>
+<script lang="ts" setup>
+import { MeshBasicMaterialDescriptor } 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>()
+</script>
+<style lang="less" scoped></style>

package/src/fragment/material/MeshBasicMaterialFragment.vue ADDED Viewed

@@ -0,0 +1,126 @@
+<template>
+    <vyr-row>
+        <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-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.map')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.map" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="map"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.refractionRatio')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.refractionRatio" :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.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-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.alphaMap')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.alphaMap" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="alphaMap"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.alphaTest')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.alphaTest" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.envMap')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.envMap" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="envMap"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.combine')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.combine" :data="Material.combineOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.reflectivity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.reflectivity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.lightMap')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.lightMap" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="lightMap"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.lightMapIntensity')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.lightMapIntensity" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.specularMap')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.specularMap" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="specularMap"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.fog')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.fog" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.wireframe')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.wireframe" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { MeshBasicMaterialDescriptor } from '@vyr/three';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrChecked, VyrColorPicker, VyrInputNumber, VyrSelect } from '@vyr/design';
+import { option } from '@vyr/builtin'
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+import { Material } from '../../option';
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+const descriptor = useDescriptor<MeshBasicMaterialDescriptor>()
+</script>
+<style lang="less" scoped></style>