|
@@ -1,102 +1,12 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <TresCanvas v-bind="state" window-size @loop="onLoop">
|
|
|
|
|
- <TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
|
|
|
|
|
- <OrbitControls v-bind="controlsState" />
|
|
|
|
|
- <TresAmbientLight :intensity="0.5" />
|
|
|
|
|
-
|
|
|
|
|
- <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow @pointerenter="onPointerEnter" @pointerleave="onPointerLeave">
|
|
|
|
|
- <TresSphereGeometry :args="[2, 32, 32]" />
|
|
|
|
|
- <TresMeshToonMaterial color="#006060" />
|
|
|
|
|
- </TresMesh>
|
|
|
|
|
-
|
|
|
|
|
- <TresMesh ref="sphereRef2" :position="[4, 4, 0]" cast-shadow @pointerenter="onPointerEnter" @pointerleave="onPointerLeave">
|
|
|
|
|
- <TresSphereGeometry :args="[2, 32, 32]" />
|
|
|
|
|
- <TresMeshToonMaterial color="#006060" />
|
|
|
|
|
- </TresMesh>
|
|
|
|
|
-
|
|
|
|
|
- <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
|
|
|
|
|
- <TresPlaneGeometry :args="[20, 20, 20, 20]" />
|
|
|
|
|
- <TresMeshToonMaterial />
|
|
|
|
|
- </TresMesh>
|
|
|
|
|
-
|
|
|
|
|
- <TresDirectionalLight ref="TDirectionalLight" :position="[10, 8, 4]" :intensity="1" cast-shadow />
|
|
|
|
|
- <TresDirectionalLight :position="[10, 2, 4]" :intensity="1" cast-shadow />
|
|
|
|
|
-
|
|
|
|
|
- <TresGridHelper :position-y="0.1" />
|
|
|
|
|
- </TresCanvas>
|
|
|
|
|
- <h1 class="text-center text-white w-full absolute">若需查看样例中心,请运行:npm run pre.dev</h1>
|
|
|
|
|
|
|
+ <div />
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
|
|
-import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
|
|
|
|
|
-import { reactive, ref, onMounted, shallowRef, watchEffect } from 'vue'
|
|
|
|
|
-import { OrbitControls } from '@tresjs/cientos'
|
|
|
|
|
-
|
|
|
|
|
-const state = reactive({
|
|
|
|
|
- clearColor: '#201919',
|
|
|
|
|
- shadows: true,
|
|
|
|
|
- alpha: false,
|
|
|
|
|
-
|
|
|
|
|
- shadowMapType: BasicShadowMap,
|
|
|
|
|
- outputColorSpace: SRGBColorSpace,
|
|
|
|
|
- toneMapping: NoToneMapping,
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const controlsState = reactive({
|
|
|
|
|
- enableDamping: true,
|
|
|
|
|
- dampingFactor: 0.05,
|
|
|
|
|
- enableZoom: true,
|
|
|
|
|
- autoRotate: false,
|
|
|
|
|
- autoRotateSpeed: 2,
|
|
|
|
|
- maxPolarAngle: Math.PI,
|
|
|
|
|
- minPolarAngle: 0,
|
|
|
|
|
- maxAzimuthAngle: Math.PI,
|
|
|
|
|
- minAzimuthAngle: -Math.PI,
|
|
|
|
|
- enablePan: true,
|
|
|
|
|
- keyPanSpeed: 7,
|
|
|
|
|
- maxDistance: 100,
|
|
|
|
|
- minDistance: 0,
|
|
|
|
|
- minZoom: 0,
|
|
|
|
|
- maxZoom: 100,
|
|
|
|
|
- zoomSpeed: 1,
|
|
|
|
|
- enableRotate: true,
|
|
|
|
|
- rotateSpeed: 1,
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const sphereRef = ref()
|
|
|
|
|
-const sphereRef2 = ref()
|
|
|
|
|
-const TDirectionalLight = shallowRef()
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-const onLoop = ({ elapsed }:any) => {
|
|
|
|
|
- if (!sphereRef.value) return
|
|
|
|
|
- sphereRef.value.position.y += Math.sin(elapsed) * 0.01
|
|
|
|
|
- sphereRef2.value.position.y += Math.sin(elapsed) * 0.01
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-function onPointerEnter(ev: any) {
|
|
|
|
|
- if (ev) {
|
|
|
|
|
- ev.object.material.color.set('#DFFF45')
|
|
|
|
|
- // pause()
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-function onPointerLeave(ev: any) {
|
|
|
|
|
- if (ev) {
|
|
|
|
|
- ev.eventObject.material.color.set('#006060')
|
|
|
|
|
- // resume()
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
|
|
|
-watchEffect(() => {
|
|
|
|
|
- if (TDirectionalLight.value) {
|
|
|
|
|
- TDirectionalLight.value.shadow.mapSize.set(1000, 1000)
|
|
|
|
|
- TDirectionalLight.value.shadow.camera.near = 0.5 // default
|
|
|
|
|
- // TDirectionalLight.value.shadow.camera.far = 50000; // default
|
|
|
|
|
- TDirectionalLight.value.shadow.camera.top = 20
|
|
|
|
|
- TDirectionalLight.value.shadow.camera.right = 20
|
|
|
|
|
- TDirectionalLight.value.shadow.camera.left = -20
|
|
|
|
|
- TDirectionalLight.value.shadow.camera.bottom = -20
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-onMounted(() => {})
|
|
|
|
|
|
|
+// 只输入 IP + 端口时直接进入驾驶舱;保留 dataSource、lodAudit 等查询参数。
|
|
|
|
|
+const route = useRoute()
|
|
|
|
|
+const router = useRouter()
|
|
|
|
|
+router.replace({ path: '/cockpit', query: route.query })
|
|
|
</script>
|
|
</script>
|