mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
进一步美化
This commit is contained in:
hawk86104
parent
dd2b1e79c9
commit
38df41791b
@ -47,6 +47,7 @@
|
||||
"@tweenjs/tween.js": "^23.1.1",
|
||||
"@vicons/carbon": "^0.12.0",
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "1.6.8",
|
||||
"cannon-es": "^0.20.0",
|
||||
"chalk": "^5.3.0",
|
||||
@ -85,4 +86,4 @@
|
||||
"vue3-lazyload": "^0.3.8"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-10-16 10:53:09
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-05-27 17:52:17
|
||||
* @LastEditTime: 2024-05-30 18:11:48
|
||||
*/
|
||||
import { defineRuntimeConfig, useModel } from '@fesjs/fes'
|
||||
import { FMenu } from '@fesjs/fes-design'
|
||||
@ -15,6 +15,7 @@ import UserCenter from '@/components/forPreview/userCenter.vue'
|
||||
|
||||
// add by 地虎降天龙
|
||||
import 'uno.css'
|
||||
import 'animate.css/animate.min.css'
|
||||
|
||||
export default defineRuntimeConfig({
|
||||
beforeRender: {
|
||||
|
||||
@ -4,51 +4,56 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-12 21:53:22
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-14 08:12:45
|
||||
* @LastEditTime: 2024-05-30 17:51:33
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!hasFinishLoading"
|
||||
class="absolute bg-grey-600 t-0 l-0 w-full h-full z-999999 flex justify-center items-center text-black font-mono bg-black">
|
||||
<div class="text-center text-white">
|
||||
<div class="loader1" v-if="props.styleNum === 0"></div>
|
||||
<div class="loader2" v-else-if="props.styleNum === 1"></div>
|
||||
<div class="loader3" v-else-if="props.styleNum === 2"></div>
|
||||
<div class="loader4" v-else-if="props.styleNum === 3"></div>
|
||||
<div class="loader5" v-else-if="props.styleNum === 4"></div>
|
||||
<div class="loader6" v-else-if="props.styleNum === 5"></div>
|
||||
<div class="loader7" v-else-if="props.styleNum === 6"></div>
|
||||
<div v-if="!hasFinishLoading" class="absolute bg-grey-600 t-0 l-0 w-full h-full z-999999 flex justify-center items-center text-black font-mono bg-black">
|
||||
<div class="text-center text-white">
|
||||
<div class="loader1" v-if="props.styleNum === 0"></div>
|
||||
<div class="loader2" v-else-if="props.styleNum === 1"></div>
|
||||
<div class="loader3" v-else-if="props.styleNum === 2"></div>
|
||||
<div class="loader4" v-else-if="props.styleNum === 3"></div>
|
||||
<div class="loader5" v-else-if="props.styleNum === 4"></div>
|
||||
<div class="loader6" v-else-if="props.styleNum === 5"></div>
|
||||
<div class="loader7" v-else-if="props.styleNum === 6"></div>
|
||||
|
||||
<template v-if="showProgress">{{ progress }} %</template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="showProgress">{{ progress }} %</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useProgress } from '@tresjs/cientos'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
styleNum?: number
|
||||
isDemo?: boolean
|
||||
showProgress?: boolean
|
||||
}>(), {
|
||||
styleNum: 0,
|
||||
isDemo: false,
|
||||
showProgress: true
|
||||
})
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
styleNum?: number
|
||||
isDemo?: boolean
|
||||
showProgress?: boolean
|
||||
}>(),
|
||||
{
|
||||
styleNum: 0,
|
||||
isDemo: false,
|
||||
showProgress: true,
|
||||
},
|
||||
)
|
||||
|
||||
const { hasFinishLoading, progress } = await useProgress()
|
||||
|
||||
const animloop = () => {
|
||||
if (progress.value++ > 100) {
|
||||
progress.value = 0
|
||||
}
|
||||
requestAnimationFrame(animloop)
|
||||
if (progress.value++ > 100) {
|
||||
progress.value = 0
|
||||
}
|
||||
requestAnimationFrame(animloop)
|
||||
}
|
||||
if (props.isDemo) {
|
||||
requestAnimationFrame(animloop)
|
||||
requestAnimationFrame(animloop)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
hasFinishLoading: hasFinishLoading,
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./cssLoaders.less";
|
||||
</style>
|
||||
@import './cssLoaders.less';
|
||||
</style>
|
||||
|
||||
@ -4,21 +4,23 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-05-27 11:22:46
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-05-28 18:28:00
|
||||
* @LastEditTime: 2024-05-30 19:03:47
|
||||
-->
|
||||
<template>
|
||||
<div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" style="pointer-events: none" @mousedown="dragCanvas">
|
||||
<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="show">
|
||||
<div :style="previewRefStyle" v-if="showAllComRef && show">
|
||||
<!-- 渲染层 -->
|
||||
<preview-render-list></preview-render-list>
|
||||
<!-- 遮罩层 -->
|
||||
<div class="go-preview-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { useChartEditStore } from '../stores/chartEditStore'
|
||||
import { getSessionStorageInfo, dragCanvas, getEditCanvasConfigStyle } from '../lib/utils'
|
||||
import { useScale } from '../lib/hooks/useScale.hook'
|
||||
@ -31,8 +33,11 @@ import { PreviewRenderList } from '../components/PreviewRenderList'
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
dataJson: any
|
||||
showAllCom?: boolean
|
||||
}>(),
|
||||
{},
|
||||
{
|
||||
showAllCom: true,
|
||||
},
|
||||
)
|
||||
|
||||
import naive from 'naive-ui'
|
||||
@ -50,8 +55,25 @@ const previewRefStyle = computed(() => {
|
||||
})
|
||||
|
||||
useStore(chartEditStore)
|
||||
|
||||
const { previewRef } = useScale(chartEditStore)
|
||||
const { show } = useComInstall(chartEditStore)
|
||||
|
||||
const showAllComRef = ref(false)
|
||||
watch(
|
||||
() => props.showAllCom,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
setTimeout(() => {
|
||||
if (props.showAllCom) {
|
||||
console.log('1.6秒不变化再谈')
|
||||
showAllComRef.value = true
|
||||
}
|
||||
}, 1600)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -87,6 +109,12 @@ const { show } = useComInstall(chartEditStore)
|
||||
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));
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.go-preview {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1986
src/plugins/industry4/components/alternator/alternatorGoView.json
Normal file
1986
src/plugins/industry4/components/alternator/alternatorGoView.json
Normal file
File diff suppressed because one or more lines are too long
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-05-28 09:23:39
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-05-29 18:53:13
|
||||
* @LastEditTime: 2024-05-30 18:30:11
|
||||
-->
|
||||
<template>
|
||||
<!-- name:AmbientLight uuid:4a88f8db-06d0-47b4-ad5f-aad9885c3b29 type:AmbientLight -->
|
||||
@ -33,6 +33,11 @@ import firstLevel86e5869a71b5 from './childComponent/firstLevel-86e5869a71b5.vue
|
||||
import firstLevelda662feb67b1 from './childComponent/firstLevel-da662feb67b1.vue'
|
||||
import { adjustGroupCenter } from 'PLS/digitalCity'
|
||||
|
||||
// import { useProgress } from '@tresjs/cientos'
|
||||
// const { hasFinishLoading, progress } = await useProgress()
|
||||
// hasFinishLoading.value = true
|
||||
// progress.value = 100
|
||||
|
||||
const { scene: tresScene, renderer, camera, sizes } = useTresContext()
|
||||
player.init(tresScene, renderer, camera, sizes)
|
||||
|
||||
|
||||
@ -62,8 +62,8 @@ export default {
|
||||
type: 'img',
|
||||
name: 'alternator',
|
||||
title: '发电机展示',
|
||||
// disableFPSGraph: true,
|
||||
// disableSrcBtn: true,
|
||||
disableFPSGraph: true,
|
||||
disableSrcBtn: true,
|
||||
},
|
||||
// { "src": "plugins/industry4/preview/deviceLight.png", "type": "img", "name": "deviceLightByComposerTres", "title": "发光后期useTres" },
|
||||
],
|
||||
|
||||
@ -4,11 +4,13 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-05-28 09:22:40
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-05-29 18:47:54
|
||||
* @LastEditTime: 2024-05-30 18:01:04
|
||||
-->
|
||||
|
||||
<template>
|
||||
<loading />
|
||||
<Suspense>
|
||||
<loading ref="loadingRef" />
|
||||
</Suspense>
|
||||
<TresCanvas v-bind="state">
|
||||
<OrbitControls />
|
||||
<TresPerspectiveCamera ref="cameraRef" uuid="1c22773e-eb46-4708-b3bd-2baf29ac5cb3" name="Camera" />
|
||||
@ -18,7 +20,7 @@
|
||||
|
||||
<leffect />
|
||||
</TresCanvas>
|
||||
<!-- <viewChart :dataJson="dataJson"/> -->
|
||||
<viewChart :dataJson="dataJson" :showAllCom="loadingRef?.hasFinishLoading" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as THREE from 'three'
|
||||
@ -28,8 +30,8 @@ import { OrbitControls } from '@tresjs/cientos'
|
||||
import sceneCom from '../components/alternator/scene.vue'
|
||||
import { loading2 as loading } from 'PLS/UIdemo'
|
||||
import leffect from '../components/alternator/effect.vue'
|
||||
// import viewChart from 'PLS/goView/components/viewChart.vue'
|
||||
// import dataJson from '../components/alternator/1716877101106.json'
|
||||
import viewChart from 'PLS/goView/components/viewChart.vue'
|
||||
import dataJson from '../components/alternator/alternatorGoView.json'
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#201919',
|
||||
@ -66,6 +68,7 @@ const cameraConfig = {
|
||||
const loader = new THREE.ObjectLoader()
|
||||
const cameraObject = loader.parse(cameraConfig)
|
||||
const cameraRef = ref(null)
|
||||
const loadingRef = ref(null)
|
||||
watch(
|
||||
() => cameraRef.value,
|
||||
(val) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user