config.vue
3.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
<collapse-item name="三维配置" :expanded="true">
<setting-item-box :alone="true">
<template #name>
<n-text>提示</n-text>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<span class="help-span">{{ threeFileHelpMessgae }}</span>
</n-tooltip>
</template>
<FileUpload
:max="1"
:threeSupportFileFormat="threeSupportFileFormat"
:singleFileType="singleFileTypeNotMtl"
@fileStaticUri="handleFileStaticUri"
/>
</setting-item-box>
<setting-item-box name="mtl材质文件上传">
<FileUpload :max="10" :threeSupportFileFormat="supportFileMtl" @fileStaticUri="handleFileMtlStaticUri" />
</setting-item-box>
<setting-item-box name="材质贴图上传">
<FileUpload
:max="10"
:threeSupportFileFormat="supportFileTextureImage"
@fileStaticUri="handleFileTextureImageStaticUri"
/>
</setting-item-box>
<setting-item-box name="属性配置">
<setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
<n-color-picker size="small" :show-alpha="false" v-model:value="optionData.backgroundColor"></n-color-picker>
</setting-item>
<SettingItem name="场景透明度">
<n-input-number :min="0" :max="1" v-model:value="optionData.backgroundAlpha" />
</SettingItem>
<SettingItem name="启用阻尼">
<n-switch v-model:value="optionData.enableDamping" size="small" />
</SettingItem>
<SettingItem v-if="optionData.enableDamping" name="阻尼值">
<n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
</SettingItem>
<SettingItem name="启用动画">
<n-switch v-model:value="optionData.autoPlay" size="small" />
</SettingItem>
<SettingItem name="输出编码">
<n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select>
</SettingItem>
<SettingItem name="是否清空场景">
<n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" />
</SettingItem>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { NInputNumber, NSelect } from 'naive-ui'
import FileUpload from './components/FileUpload.vue'
import { icon } from '@/plugins'
import type { UploadFileInfo } from 'naive-ui'
const { HelpOutlineIcon } = icon.ionicons5
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const singleFileTypeNotMtl = ref('')
const threeFileHelpMessgae = ref('如果格式为obj，则上传顺序是，先上传材质贴图（png或jpg）、mtl材质文件，最后是obj')
const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']
const supportFileMtl = ['mtl']
const supportFileTextureImage = ['jpg', 'png']
const handleChange = (e: boolean) => {
if (e) props.optionData.dataset = ''
}
const encodinghList = [
{ label: 'linear', value: 'linear' },
{ label: 'sRGB ', value: 'sRGB ' }
]
const handleFileStaticUri = (value: UploadFileInfo[]) => {
props.optionData.dataset = value[0]?.url as string
}
const handleFileMtlStaticUri = (value: UploadFileInfo[]) => {
props.optionData.mtlPath = value.map(item => item?.url) as any
}
const handleFileTextureImageStaticUri = (value: UploadFileInfo[]) => {
props.optionData.textureImage = value.map(item => item?.url) as any
}
</script>
<style lang="scss" scoped>
.help-span {
display: flex;
flex-wrap: wrap;
width: 8vw;
color: white;
}
</style>