@vyr/three-browser 0.0.1

package/src/fragment/material/ShadowMaterialFragment.vue

@@ -0,0 +1,49 @@
+<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.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.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.fog')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.fog" :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 { ShadowMaterialDescriptor } from '@vyr/three';
+import { VyrRow, VyrCol, VyrLabel, VyrChecked, VyrColorPicker, VyrInputNumber, VyrSelect } from '@vyr/design';
+import { option } from '@vyr/builtin'
+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<ShadowMaterialDescriptor>()
+
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/material/SpriteMaterialFragment.vue

@@ -0,0 +1,79 @@
+<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.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.rotation')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.rotation" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Material.sizeAttenuation')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.sizeAttenuation" :data="option.stateOptions"></vyr-select>
+            </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>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { SpriteMaterialDescriptor } 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';
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+const descriptor = useDescriptor<SpriteMaterialDescriptor>()
+
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/texture/TextureFragment.vue

@@ -0,0 +1,131 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.url')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.url" :clearable="true" :draggable="draggable" dragkey="url"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.mapping')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.mapping" :data="Texture.mappingOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.ftype')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.ftype" :data="Texture.ftypeOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.format')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.format" :data="Texture.formatOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.colorSpace')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.colorSpace" :data="Texture.colorSpaceOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.wrap')">
+            <vyr-col :span="12">
+                <vyr-select v-model="descriptor.wrapS" :data="Texture.wrapOptions"></vyr-select>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-select v-model="descriptor.wrapT" :data="Texture.wrapOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.offset')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.x" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.y" :data="Texture.wrapOptions" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.repeat')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.repeat.x" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.repeat.y" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.center')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.center.x" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.center.y" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.rotation')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.rotation" :allow-null="false"
+                    :default-value="0"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.flipY')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.flipY" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.premultiplyAlpha')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.premultiplyAlpha" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Texture.generateMipmaps')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.generateMipmaps" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { TextureDescriptor } from '@vyr/three';
+import { DraggableService, runtime } from '@vyr/runtime';
+import { option } from '@vyr/builtin'
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrInputNumber, VyrSelect } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+import { Texture } from '../../option'
+
+const descriptor = useDescriptor<TextureDescriptor>()
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+</script>
+
+<style lang="less" scoped></style>

package/src/index.ts

@@ -0,0 +1,4 @@
+export * as option from './option'
+export * from './locale'
+export * from './service'
+export * from './common'

package/src/locale/Language.ts

@@ -0,0 +1,10 @@
+import { Locale } from "@vyr/locale";
+import { zhCnLanguageProvider, ZhCNLanguageProvider } from "./LanguageProvider";
+
+Locale.register(zhCnLanguageProvider)
+
+const language = Locale.getLanguage<ZhCNLanguageProvider>(zhCnLanguageProvider.name)
+
+export {
+    language
+}