Para capturar la ciudad, vue3+vite+ts carga 3dTiles.
Vite es una herramienta de construcción frontal. Usamos vite para construir la infraestructura del proyecto.
Iniciar { #Getting Started} | Sitio web chino de Vite
Si necesita instalar otras plantillas, puede leer la documentación.
Desde que me hice cargo del desarrollo 3D por primera vez, no sabía qué soluciones eran más adecuadas, por lo que encontré muchos problemas en la etapa inicial. El siguiente es un proceso general para encontrar una solución.
Al desarrollar web3d, lo primero que me viene a la mente es usar Three.js. Al consultar el artículo "tresjs carga datos 3dtiles", los datos se cargan correctamente, pero la interfaz del modelo no se puede mostrar. . Se estima que ocurrió el mismo problema en este comentario de este artículo.
Para mí, que no tengo experiencia en desarrollo 3D, solo puedo buscar documentos relevantes e intentar resolverlo. Después de pasar varias horas, todavía no puedo entenderlo, pero también sé que los marcos 3D como Cesium son más adecuados para cargar 3dTiles. Al desarrollar un proyecto, no puedes colgarte de un árbol en un tiempo limitado. Cambiar la dirección a tiempo puede ahorrar más tiempo. Finalmente comparamos los dos archivos y decidimos decididamente por tres.
Información relacionada:
Threejs carga datos de 3dtiles.
Threejs carga datos 3dtiles_Always blog-CSDN blog_treejs fotografía oblicua
Tres cargadores-mosaicos tridimensionales
GitHub -NASA-AMMOS /3DTilesRendererJS: Renderizar mosaicos 3D en Javascript usando three.js
3DTilesRendererJS
GitHub-nytimes/tres-loader-3D Tiles: este es un módulo de carga Three.js, para procesar OGC 3D Tiles creado con Cesium. Actualmente admite dos formatos principales, Batch 3D Model (b3dm), basado en nubes de puntos glTF.
Cesium admite naturalmente el formato 3dTiles. Cargar 3dTiles es muy sencillo, pero requiere una configuración adicional.
Hay muchos tutoriales de configuración para Vue usando cesio en Internet, pero la mayoría de ellos están configurados usando webpack y la mayoría son versiones de vue2. El contenido de varios materiales es desigual, lo que genera costos de tiempo adicionales. para este proyecto. , muy hostil para los novatos.
Intenté configurarlo, pero descubrí que siempre no era válido y no podía entender el significado de estas configuraciones. Al final, dejé de usar cesio directamente y seguí buscando una solución vue+cesio más conveniente.
Documento chino Cesium.js
Archivo Camera-Cesium
Después de buscar un poco, finalmente elegí vue-cesium, que admite vue3 y mecanografiado. Lo llamo la versión 3D de element-ui. Es muy conveniente abrir la caja, eliminando todo tipo de procesos de configuración problemáticos y que consumen mucho tiempo, y es muy amigable para los principiantes.
Documentación:
VueCesium - Componentes de Vue 2.x y Vue 3.x para CesiumJS.
Instalación:
Uso:
Una vez completada la instalación, puede elegir importar completamente o importar bajo demanda, porque yo solo usé algunos de ellos. componente, así que elegí importar a pedido. Utilice este componente VcPrimitiveTileset para importar archivos 3dTiles.
Para la implementación de otros servicios específicos, consulte la documentación. Si ha utilizado element-ui, definitivamente utilizará vue-cesium.
Problemas descubiertos durante el uso:
1. La descripción del componente VcOverlayHtml en el documento es incorrecta.
Introduce el archivo de estilo correctamente: import 'vue-cecils/dist/index .CSS'
Si el documento se muestra correctamente al abrirlo, significa que el documento ha sido editado correctamente. actualizado.
2. Cree el paquete para informar errores.
Al empaquetar, habrá errores ts en el código fuente de vue-cesium, y casi todos los cesium no los encuentra. Debe ignorar la verificación de node_modules en tsconfig.json. Puede configurarlo para ignorar solo este paquete de vue-cesium, pero lo ignoré.
Nota: Si el directorio raíz de su proyecto no tiene tsconfig.json configurado, primero debe agregar este archivo. Consulte: TSConfig. JSON TypeScript Sitio web chino TypeScript: un superconjunto de JavaScript.
En archivos que hacen referencia a componentes de vue-cesium, ts también encontrará errores que Cesiu no ha encontrado. Puede configurar ts para que simplemente ignore este archivo.
Si también recibes el error anterior cuando usas la misma versión de vue-cesium que yo, no entres en pánico.
Vemos que el componente de configuración global VcConfigProvider usa CDN para vue-cesium para importar una versión de cesium en lugar de una importación modular.
Como no he visto la implementación del código fuente de vue-cesium, supongo que esta es la razón. Como no afectó la implementación de ninguna función, utilicé directamente // @ts-nocheck para ignorar la verificación ts de todo el archivo.
Cada paquete utilizado por el proyecto y su número de versión: