feat 先上两个 带全球倾斜摄影的场景

src/plugins/simpleGIS/components/cesiumIon3DTile.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-25 08:59:26
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-25 16:29:20
+-->
+<template>
+    <TresGroup>
+        <primitive :object="tiles.group" />
+    </TresGroup>
+</template>
+
+<script lang="ts" setup>
+import { watchEffect } from 'vue'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { TilesRenderer } from '3d-tiles-renderer'
+import { CesiumIonAuthPlugin, GLTFExtensionsPlugin } from '3d-tiles-renderer/plugins'
+import * as THREE from 'three'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+
+const { camera, renderer, sizes } = useTresContext()
+
+const assetId = '354759'
+const accessToken =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhM2RlZDE0YS03NWNlLTQ2ZmItODFmZi0zMDQyZGMxZjdjNzQiLCJpZCI6NDYzMzQsImlhdCI6MTYxNjA1MjY2Nn0.3BRsxy7UmJgW0LemXo6cMsD7xwe7YvUDITeQ3RLxOHI'
+
+function rotationBetweenDirections(dir1, dir2) {
+    const rotation = new THREE.Quaternion()
+    const a = new THREE.Vector3().crossVectors(dir1, dir2)
+    rotation.x = a.x
+    rotation.y = a.y
+    rotation.z = a.z
+    rotation.w = 1 + dir1.clone().dot(dir2)
+    rotation.normalize()
+    return rotation
+}
+const tiles = new TilesRenderer()
+function setupTiles() {
+    tiles.fetchOptions.mode = 'cors'
+    tiles.registerPlugin(
+        new GLTFExtensionsPlugin({
+            dracoLoader: new DRACOLoader().setDecoderPath('./draco/'),
+        }),
+    )
+}
+tiles.registerPlugin(new CesiumIonAuthPlugin({ apiToken: accessToken, assetId }))
+tiles.addEventListener('load-tile-set', () => {
+    const sphere = new THREE.Sphere()
+    tiles.getBoundingSphere(sphere)
+
+    const position = sphere.center.clone()
+    const distanceToEllipsoidCenter = position.length()
+
+    const surfaceDirection = position.normalize()
+    const up = new THREE.Vector3(0, 1, 0)
+    const rotationToNorthPole = rotationBetweenDirections(surfaceDirection, up)
+
+    tiles.group.quaternion.x = rotationToNorthPole.x
+    tiles.group.quaternion.y = rotationToNorthPole.y
+    tiles.group.quaternion.z = rotationToNorthPole.z
+    tiles.group.quaternion.w = rotationToNorthPole.w
+
+    tiles.group.position.y = -distanceToEllipsoidCenter
+})
+setupTiles()
+
+watchEffect(() => {
+    if (sizes.width.value) {
+        tiles.setCamera(camera.value)
+        tiles.setResolutionFromRenderer(camera.value, renderer.value)
+    }
+})
+
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(() => {
+    if (camera.value && sizes.width.value && tiles) {
+        camera.value.updateMatrixWorld()
+        tiles.update()
+    }
+})
+</script>

src/plugins/simpleGIS/components/googleMaps.vue

@@ -0,0 +1,82 @@
+<template>
+    <TresGroup>
+        <primitive :object="tiles.group" />
+    </TresGroup>
+</template>
+
+<script setup lang="ts">
+import { watchEffect, toRaw } from 'vue'
+import * as THREE from 'three'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { WGS84_ELLIPSOID, CAMERA_FRAME, GeoUtils, CameraTransitionManager, TilesRenderer, GlobeControls } from '3d-tiles-renderer'
+import {
+    TilesFadePlugin,
+    UpdateOnChangePlugin,
+    TileCompressionPlugin,
+    UnloadTilesPlugin,
+    GLTFExtensionsPlugin,
+    BatchedTilesPlugin,
+    CesiumIonAuthPlugin,
+} from '3d-tiles-renderer/plugins'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+
+const assetId = '2275207'
+const accessToken =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhM2RlZDE0YS03NWNlLTQ2ZmItODFmZi0zMDQyZGMxZjdjNzQiLCJpZCI6NDYzMzQsImlhdCI6MTYxNjA1MjY2Nn0.3BRsxy7UmJgW0LemXo6cMsD7xwe7YvUDITeQ3RLxOHI'
+
+const { camera, renderer, sizes, scene } = useTresContext()
+
+let transition = null as any
+let tiles = null as TilesRenderer
+let globeControls = null as any
+
+function reinstantiateTiles() {
+    tiles = new TilesRenderer()
+    tiles.registerPlugin(
+        new CesiumIonAuthPlugin({
+            apiToken: accessToken,
+            assetId: assetId,
+            autoRefreshToken: true,
+        }),
+    )
+    tiles.registerPlugin(new TileCompressionPlugin())
+    tiles.registerPlugin(new UpdateOnChangePlugin())
+    tiles.registerPlugin(new UnloadTilesPlugin())
+    tiles.registerPlugin(new TilesFadePlugin())
+    tiles.registerPlugin(
+        new GLTFExtensionsPlugin({
+            dracoLoader: new DRACOLoader().setDecoderPath('./draco/'),
+        }),
+    )
+    tiles.group.rotation.x = -Math.PI / 2
+}
+
+reinstantiateTiles()
+
+tiles.setCamera(camera.value)
+tiles.setResolutionFromRenderer(camera.value, renderer.value)
+transition = new CameraTransitionManager(camera.value, null)
+transition.perspectiveCamera.position.set(4800000, 2570000, 14720000)
+transition.perspectiveCamera.lookAt(0, 0, 0)
+transition.autoSync = false
+transition.orthographicPositionalZoom = false
+globeControls = new GlobeControls(scene.value, transition.camera, renderer.value.domElement, null)
+globeControls.enableDamping = true
+globeControls.setTilesRenderer(tiles)
+
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(() => {
+    if (camera.value && sizes.width.value && tiles) {
+        globeControls.enabled = !transition.animating
+        globeControls.update()
+        transition.update()
+
+        const camerac = transition.camera
+        tiles.setResolutionFromRenderer(camerac, renderer.value)
+        tiles.setCamera(camerac)
+
+        camerac.updateMatrixWorld()
+        tiles.update()
+    }
+})
+</script>

src/plugins/simpleGIS/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-02-23 16:40:14
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-02-06 10:16:43
+ * @LastEditTime: 2025-03-25 09:46:31
  */
 
 export default {
@@ -47,6 +47,18 @@ export default {
             title: '3DTiles展示',
             referenceSource: { title: 'nasa-ammos', url: 'https://github.com/NASA-AMMOS/3DTilesRendererJS' },
         },
+        {
+            src: 'plugins/simpleGIS/preview/cesiumIon.png',
+            type: 'img',
+            name: 'cesiumIon',
+            title: 'cesiumIon倾斜摄影'
+        },
+        {
+            src: 'plugins/simpleGIS/preview/googleMapsExample.png',
+            type: 'img',
+            name: 'googleMapsExample',
+            title: 'googleMaps演示'
+        },
         { src: 'plugins/simpleGIS/preview/mapBuildings.gif', type: 'img', name: 'mapBuildings', title: '地图和3DTiles结合' },
         {
             src: 'plugins/simpleGIS/preview/threeTileEx.png',

src/plugins/simpleGIS/pages/cesiumIon.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-27 11:36:30
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-25 09:28:21
+-->
+
+<template>
+    <TresCanvas clearColor="#201919" window-size antialias>
+        <TresPerspectiveCamera :position="[1000, 1000, -100]" :fov="60" :near="1" :far="10000" />
+        <OrbitControls enableDamping />
+
+        <cesiumIon3DTile />
+        <TresAxesHelper :args="[100]" />
+    </TresCanvas>
+		<h1 class="text-center text-white w-full absolute">若没加载成功，请更换自己的Cesium-Key</h1>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import cesiumIon3DTile from '../components/cesiumIon3DTile.vue'
+</script>

src/plugins/simpleGIS/pages/googleMapsExample.vue

@@ -0,0 +1,22 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-25 09:47:00
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-25 16:52:38
+-->
+<template>
+    <TresCanvas clearColor="#201919" window-size antialias>
+        <TresPerspectiveCamera :position="[4800000, 2570000, 14720000]" :fov="60" :near="1" :far="160000000" />
+        <googleMaps />
+    </TresCanvas>
+    <h1 class="text-center text-white w-full absolute">若没加载成功，请自行梯子</h1>
+</template>
+
+<script setup lang="ts">
+import googleMaps from '../components/googleMaps.vue'
+//import { OrbitControls } from '@tresjs/cientos'
+//<OrbitControls enableDamping makeDefault />
+//<TresPerspectiveCamera :position="[4800000, 2570000, 14720000]" :fov="60" :near="1" :far="160000000" />
+</script>