优化 和 修复 bug

.fes.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-28 15:19:04
+ * @LastEditTime: 2024-05-31 11:45:58
  */
 // import { resolve } from 'path';
 import { join } from 'path'

.fes.predev.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-20 21:33:11
+ * @LastEditTime: 2024-05-31 11:45:17
  */
 import { defineBuildConfig } from '@fesjs/fes'
 import addExtraScriptPlugin from './src/common/addExtraScriptPlugin'

package.json

@@ -40,6 +40,7 @@
     "@fesjs/plugin-request": "^4.0.0-beta.6",
     "@fesjs/plugin-sass": "^3.0.0",
     "@here/quantized-mesh-decoder": "^1.2.8",
+    "@iconify/json": "^2.2.215",
     "@mapbox/tilebelt": "^1.0.2",
     "@pmndrs/vanilla": "^1.16.0",
     "@tresjs/cientos": "3.8.0",
@@ -64,6 +65,7 @@
     "gl-matrix": "^3.4.3",
     "gsap": "3.12.5",
     "heatmap.js-fix": "^1.0.0",
+    "iconify-icon": "^2.1.0",
     "jszip": "^3.10.1",
     "lamina": "^1.1.23",
     "lygia": "^1.1.3",

src/app.jsx

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-30 18:11:48
+ * @LastEditTime: 2024-05-31 11:46:51
  */
 import { defineRuntimeConfig, useModel } from '@fesjs/fes'
 import { FMenu } from '@fesjs/fes-design'
@@ -17,6 +17,15 @@ import UserCenter from '@/components/forPreview/userCenter.vue'
 import 'uno.css'
 import 'animate.css/animate.min.css'
 
+// 注册图标 iconify goview
+import { addCollection } from 'iconify-icon'
+import uimIcons from '@iconify/json/json/uim.json'
+import lineMdIcons from '@iconify/json/json/line-md.json'
+import wiIcons from '@iconify/json/json/wi.json'
+addCollection(uimIcons)
+addCollection(lineMdIcons)
+addCollection(wiIcons)
+
 export default defineRuntimeConfig({
     beforeRender: {
         loading: <PageLoading />,

src/plugins/goView/components/viewChart.vue

@@ -4,18 +4,35 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-27 11:22:46
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-30 19:03:47
+ * @LastEditTime: 2024-05-31 12:20:37
 -->
 <template>
     <div v-show="showAllComRef" :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" style="pointer-events: none" @mousedown="dragCanvas">
-        <div ref="previewRef" class="go-preview-scale">
-            <div :style="previewRefStyle" v-if="showAllComRef && show">
-                <!-- 渲染层 -->
-                <preview-render-list></preview-render-list>
-                <!-- 遮罩层 -->
-                <div class="go-preview-mask"></div>
+        <template v-if="showEntity">
+            <!-- 实体区域 -->
+            <div ref="entityRef" class="go-preview-entity">
+                <!-- 缩放层 -->
+                <div ref="previewRef" class="go-preview-scale">
+                    <!-- 展示层 -->
+                    <div :style="previewRefStyle" v-if="showAllComRef && show">
+                        <!-- 渲染层 -->
+                        <preview-render-list></preview-render-list>
+                        <!-- 遮罩层 -->
+                        <div class="go-preview-mask" :style="goPreviewMaskStyle"></div>
+                    </div>
+                </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <div ref="previewRef" class="go-preview-scale">
+                <div :style="previewRefStyle" v-if="showAllComRef && show">
+                    <!-- 渲染层 -->
+                    <preview-render-list></preview-render-list>
+                    <!-- 遮罩层 -->
+                    <div class="go-preview-mask" :style="goPreviewMaskStyle"></div>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -27,16 +44,20 @@ import { useScale } from '../lib/hooks/useScale.hook'
 import { useStore } from '../lib/hooks/useStore.hook'
 import { useComInstall } from '../lib/hooks/useComInstall.hook'
 import { getFilterStyle } from '../lib/utils/global'
-
+import { PreviewScaleEnum } from 'PLS/goView/lib/enums/styleEnum'
 import { PreviewRenderList } from '../components/PreviewRenderList'
 
 const props = withDefaults(
     defineProps<{
-        dataJson: any
-        showAllCom?: boolean
+        dataJson: any // 图表数据 goview配置文件
+        showAllCom?: boolean // 是否 显示所有组件 可接入全局等待loading结果
+        delay?: number // 延迟显示时间 单位毫秒 用于在three中读取完模型后 载入的延迟配置
+        maskWidth: number // 遮罩层宽度 默认500px
     }>(),
     {
         showAllCom: true,
+        delay: 0,
+        maskWidth: 500,
     },
 )
 
@@ -53,10 +74,14 @@ const previewRefStyle = computed(() => {
         ...getFilterStyle(chartEditStore.editCanvasConfig),
     }
 })
+const showEntity = computed(() => {
+    const type = chartEditStore.editCanvasConfig.previewScaleType
+    return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+})
 
 useStore(chartEditStore)
 
-const { previewRef } = useScale(chartEditStore)
+const { entityRef, previewRef } = useScale(chartEditStore)
 const { show } = useComInstall(chartEditStore)
 
 const showAllComRef = ref(false)
@@ -66,14 +91,17 @@ watch(
         if (newValue) {
             setTimeout(() => {
                 if (props.showAllCom) {
-                    console.log('1.6秒不变化再谈')
                     showAllComRef.value = true
                 }
-            }, 1600)
+            }, props.delay)
         }
     },
     { immediate: true },
 )
+
+const goPreviewMaskStyle = computed(() => ({
+    width: `${props.maskWidth}px`,
+}))
 </script>
 
 <style lang="scss" scoped>
@@ -108,12 +136,10 @@ watch(
     .go-preview-entity {
         overflow: hidden;
     }
-}
-
-.go-preview-mask {
-    width: 500px;
-    height: 100%;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
+    .go-preview-mask {
+        height: 100%;
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0));
+    }
 }
 </style>
 <style lang="less">

src/plugins/goView/lib/hooks/useScale.hook.ts

@@ -96,7 +96,7 @@ export const useScale = (localStorageInfo: any) => {
 
         break
       case PreviewScaleEnum.SCROLL_X:
-        ;(() => {
+        ; (() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
             width.value as number,
             height.value as number,

src/plugins/industry4/components/alternator/alternatorGoView.json

@@ -133,7 +133,7 @@
       "dataset": null,
       "renderer": "svg"
     },
-    "previewScaleType": "full"
+    "previewScaleType": "scrollX"
   },
   "componentList": [
     {

src/plugins/industry4/components/alternator/childComponent/firstLevel-da662feb67b1.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-28 15:17:41
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-29 18:59:26
+ * @LastEditTime: 2024-05-31 13:15:18
 -->
 <template>
     <!-- name:103 uuid:f3ddf9ae-40de-4416-aa55-de0df5267f60 type:Mesh -->
@@ -75,11 +75,13 @@
 const props = withDefaults(
     defineProps<{
         object: any
+        reflectorRotateX: any
     }>(),
-    {},
+    {
+        reflectorRotateX: null,
+    },
 )
-
-import { useRenderLoop } from '@tresjs/core'
+import { watch } from 'vue'
 import * as THREE from 'three'
 import { Reflector, ReflectorMaterial } from 'PLS/floor/lib/alienJS/all.three.js'
 
@@ -114,7 +116,8 @@ geometry.rotateX(Math.PI / 2)
 const meshOB = new THREE.Mesh(geometry, material)
 
 // meshOB.rotateX(-Math.PI / 2)
-meshOB.rotateX(Math.PI / 2)
+meshOB.rotateX(props.reflectorRotateX.value)
+// console.log(props.reflectorRotateX.value)
 
 meshOB.add(reflector)
 meshOB.onBeforeRender = (rendererSelf, sceneSelf, cameraSelf) => {
@@ -125,6 +128,10 @@ meshOB.onBeforeRender = (rendererSelf, sceneSelf, cameraSelf) => {
 props.object[26].remove(ob)
 props.object[26].add(meshOB)
 
-const { onLoop } = useRenderLoop()
-onLoop(({ delta, elapsed }) => {})
+watch(
+    () => props.reflectorRotateX.value,
+    (newVal) => {
+        meshOB.rotation.x = newVal
+    },
+)
 </script>

src/plugins/industry4/components/alternator/scene.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-28 09:23:39
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-30 18:30:11
+ * @LastEditTime: 2024-05-31 13:10:20
 -->
 <template>
     <!-- name:AmbientLight uuid:4a88f8db-06d0-47b4-ad5f-aad9885c3b29 type:AmbientLight -->
@@ -16,14 +16,14 @@
     <!-- name:fdj .glb uuid:192ca4fd-3655-414f-a95d-da662feb67b1 type:Group :rotation="[-Math.PI, 0, 0]"  :position="[-2.2829428261014804, 0.10302746578115585, 0.8980185643838392]"-->
     <TresGroup :position="[2.2829428261014804, -0.08, -0.8980185643838392]">
         <primitive :object="sceneObject.children[2]">
-            <firstLevelda662feb67b1 :object="sceneObject.children[2].children" />
+            <firstLevelda662feb67b1 :object="sceneObject.children[2].children" :reflectorRotateX="reflectorRotateX" />
         </primitive>
     </TresGroup>
     <!-- name:DirectionalLight uuid:76d3cd67-1b53-40f5-b5b6-59a9be50ec03 type:DirectionalLight -->
     <primitive :object="sceneObject.children[3]" />
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, reactive, watch } from 'vue'
 // import { useAnimations } from '@tresjs/cientos'
 import * as THREE from 'three'
 import { loadJsonFile, loadRemoteZip } from 'PLS/tresEditor'
@@ -32,11 +32,17 @@ import player from './eventScript'
 import firstLevel86e5869a71b5 from './childComponent/firstLevel-86e5869a71b5.vue'
 import firstLevelda662feb67b1 from './childComponent/firstLevel-da662feb67b1.vue'
 import { adjustGroupCenter } from 'PLS/digitalCity'
+import { Pane } from 'tweakpane'
+import gsap from 'gsap'
 
-// import { useProgress } from '@tresjs/cientos'
-// const { hasFinishLoading, progress } = await useProgress()
-// hasFinishLoading.value = true
-// progress.value = 100
+const paneControl = new Pane({
+    title: '操作',
+    expanded: true,
+})
+const configState = reactive({
+    showFront: false,
+})
+paneControl.addBinding(configState, 'showFront', { label: '显示正面' })
 
 const { scene: tresScene, renderer, camera, sizes } = useTresContext()
 player.init(tresScene, renderer, camera, sizes)
@@ -77,6 +83,7 @@ sceneObject.children[2].position.set(0, -0.13, 0)
 adjustGroupCenter(sceneObject.children[2])
 
 sceneObject.children[2].rotation.x = Math.PI
+const sc2 = sceneObject.children[2]
 
 // const animations = loader.parseAnimations(scene.animations)
 // const { actions } = useAnimations([animations['500410ba-1a32-40b9-a8db-5db7c9d0be6b'], animations['ee5fa32b-1e08-414f-bbfb-c3fa6d1e6883']], sceneObject)
@@ -84,6 +91,29 @@ sceneObject.children[2].rotation.x = Math.PI
 // currentAction.loop = THREE.LoopOnce
 // currentAction.clampWhenFinished = true
 // currentAction.play()
+const reflectorRotateX = reactive({
+    value: Math.PI / 2,
+})
+watch(
+    () => configState.showFront,
+    (newVal) => {
+        gsap.killTweensOf(sc2.rotation)
+        const target = newVal ? 0 : Math.PI
+        gsap.to(sc2.rotation, {
+            duration: 0.66,
+            ease: 'power1.out',
+            x: target,
+        })
+        gsap.killTweensOf(reflectorRotateX)
+        debugger
+        const targetReflectorRotateX = newVal ? -Math.PI / 2 : Math.PI / 2
+        gsap.to(reflectorRotateX, {
+            duration: 0.66,
+            ease: 'power1.out',
+            value: targetReflectorRotateX,
+        })
+    },
+)
 
 onMounted(() => {
     tresScene.value.background = sceneObject.background

src/plugins/industry4/pages/alternator.vue

@@ -20,7 +20,7 @@
 
         <leffect />
     </TresCanvas>
-    <viewChart :dataJson="dataJson" :showAllCom="loadingRef?.hasFinishLoading" />
+    <viewChart :dataJson="dataJson" :showAllCom="loadingRef?.hasFinishLoading" :delay="1600" :maskWidth="560" />
 </template>
 <script setup lang="ts">
 import * as THREE from 'three'