Commit 98daac85a7429b56c5082a0958ed37b41be241e1

Authored by fengwotao
1 parent fef8ee5f

feat(src/packages): 优化三维模型拖动时,webgl上下文丢失问题

@@ -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>