Commit 98daac85a7429b56c5082a0958ed37b41be241e1
1 parent
fef8ee5f
feat(src/packages): 优化三维模型拖动时,webgl上下文丢失问题
Showing
2 changed files
with
4 additions
and
22 deletions
| @@ -185,15 +185,9 @@ | @@ -185,15 +185,9 @@ | ||
| 185 | <SettingItem v-if="optionData.enableDamping" name="阻尼值"> | 185 | <SettingItem v-if="optionData.enableDamping" name="阻尼值"> |
| 186 | <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number> | 186 | <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number> |
| 187 | </SettingItem> | 187 | </SettingItem> |
| 188 | - <SettingItem name="启用动画"> | ||
| 189 | - <n-switch v-model:value="optionData.autoPlay" size="small" /> | ||
| 190 | - </SettingItem> | ||
| 191 | - <SettingItem name="输出编码"> | 188 | + <SettingItem name="输出编码,可取值为 liner 或 sRGB。linear 是 LinearEncoding 线性编码, sRGB 即 sRGBEncoding rgb 模式编码(sRGBEncoding 能更好的还原材质颜色)"> |
| 192 | <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select> | 189 | <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select> |
| 193 | </SettingItem> | 190 | </SettingItem> |
| 194 | - <SettingItem name="是否清空场景"> | ||
| 195 | - <n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" /> | ||
| 196 | - </SettingItem> | ||
| 197 | </setting-item-box> | 191 | </setting-item-box> |
| 198 | </collapse-item> | 192 | </collapse-item> |
| 199 | </template> | 193 | </template> |
| @@ -258,10 +252,6 @@ const encodinghList = [ | @@ -258,10 +252,6 @@ const encodinghList = [ | ||
| 258 | { label: 'sRGB ', value: 'sRGB ' } | 252 | { label: 'sRGB ', value: 'sRGB ' } |
| 259 | ] | 253 | ] |
| 260 | 254 | ||
| 261 | -const handleChange = (e: boolean) => { | ||
| 262 | - if (e) props.optionData.dataset = [''] | ||
| 263 | -} | ||
| 264 | - | ||
| 265 | const handleFileStaticUri = (value: UploadFileInfo[]) => { | 255 | const handleFileStaticUri = (value: UploadFileInfo[]) => { |
| 266 | props.optionData.dataset = value.map(item => item?.url)?.filter(Boolean) as any | 256 | props.optionData.dataset = value.map(item => item?.url)?.filter(Boolean) as any |
| 267 | if (Array.isArray(props.optionData.dataset) && props.optionData.dataset.length === 0) { | 257 | if (Array.isArray(props.optionData.dataset) && props.optionData.dataset.length === 0) { |
| 1 | <template> | 1 | <template> |
| 2 | <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }"> | 2 | <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }"> |
| 3 | - <div v-if="useDetectWebGLContext()"> | 3 | + <div> |
| 4 | <vue3dLoader | 4 | <vue3dLoader |
| 5 | ref="vue3dLoaderRef" | 5 | ref="vue3dLoaderRef" |
| 6 | :webGLRendererOptions="webGLRendererOptions" | 6 | :webGLRendererOptions="webGLRendererOptions" |
| @@ -29,15 +29,13 @@ | @@ -29,15 +29,13 @@ | ||
| 29 | <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing /> | 29 | <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing /> |
| 30 | </div> | 30 | </div> |
| 31 | </div> | 31 | </div> |
| 32 | - <div v-else>您的浏览器不支持WebGL!</div> | ||
| 33 | </div> | 32 | </div> |
| 34 | </template> | 33 | </template> |
| 35 | <script setup lang="ts"> | 34 | <script setup lang="ts"> |
| 36 | -import { PropType, toRefs, ref, nextTick, computed, watch } from 'vue' | 35 | +import { PropType, toRefs, ref, nextTick, computed } from 'vue' |
| 37 | import { CreateComponentType } from '@/packages/index.d' | 36 | import { CreateComponentType } from '@/packages/index.d' |
| 38 | import { vue3dLoader } from 'vue-3d-loader' | 37 | import { vue3dLoader } from 'vue-3d-loader' |
| 39 | import { useDesignStore } from '@/store/modules/designStore/designStore' | 38 | import { useDesignStore } from '@/store/modules/designStore/designStore' |
| 40 | -import { useDetectWebGLContext } from '@/utils/external/useSupportWebGL' | ||
| 41 | 39 | ||
| 42 | const designStore = useDesignStore() | 40 | const designStore = useDesignStore() |
| 43 | 41 | ||
| @@ -54,7 +52,6 @@ const themeColor = computed(() => { | @@ -54,7 +52,6 @@ const themeColor = computed(() => { | ||
| 54 | 52 | ||
| 55 | const vue3dLoaderRef = ref(null) | 53 | const vue3dLoaderRef = ref(null) |
| 56 | 54 | ||
| 57 | -//threejs配置 | ||
| 58 | const webGLRendererOptions = { | 55 | const webGLRendererOptions = { |
| 59 | alpha: true, // 透明 | 56 | alpha: true, // 透明 |
| 60 | antialias: true, // 抗锯齿 | 57 | antialias: true, // 抗锯齿 |
| @@ -98,12 +95,7 @@ const { | @@ -98,12 +95,7 @@ const { | ||
| 98 | showFps, | 95 | showFps, |
| 99 | labels, | 96 | labels, |
| 100 | lightInput | 97 | lightInput |
| 101 | -} = toRefs(props.chartConfig.option) as any | ||
| 102 | - | ||
| 103 | -watch(dataset, (newData: string) => { | ||
| 104 | - //dateset为空则清除场景 | ||
| 105 | - if (!newData) clearScene.value = true | ||
| 106 | -}) | 98 | +} = toRefs(props.chartConfig.option) as any |
| 107 | </script> | 99 | </script> |
| 108 | 100 | ||
| 109 | <style lang="scss" scoped> | 101 | <style lang="scss" scoped> |