vue3 + vite 项目中如何使用cesium 添加模型？

Question

vue3 + vite 项目中如何使用cesium 添加模型

网上搜了一些方法不行

Answer 1

安装 Cesium
npm install cesium
配置 Vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  define: {
    'process.env': {}
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
})

创建 Cesium 组件

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

// 设置 Cesium 资源路径
window.CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium'

const onMounted = () => {
  // 初始化 Cesium Viewer
  const viewer = new Cesium.Viewer('cesiumContainer')

  // 添加模型
  const modelUri = 'https://models.cesium.com/manifest.json'
  const position = Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0)
  const heading = Cesium.Math.toRadians(135)
  const pitch = 0
  const roll = 0
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

  const entity = viewer.entities.add({
    name: 'Cesium model',
    position: position,
    orientation: orientation,
    model: {
      uri: modelUri
    }
  })

  viewer.trackedEntity = entity
}

onMounted()
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 600px;
}
</style>    

在 App.vue 中使用组件

<template>
  <div id="app">
    <CesiumMap />
  </div>
</template>

<script setup>
import CesiumMap from './components/CesiumMap.vue'
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 2

安装

pnpm install cesium @cesium/engine vite-plugin-cesium -D

配置

import cesium from 'vite-plugin-cesium';

export default defineConfig(({mode}) => {
    const config = loadEnv(mode, __dirname);

    return(
        plugins: [cesium()]
    )

})

使用

<script lang="ts" setup>
import * as Cesium from 'cesium';

onMounted(() => {
    console.log('cesium', Cesium);
    const viewer = new Cesium.Viewer('cesium-container', {
        terrainProvider: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
    });

    // 移除默认的 Cesium logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';

    const position = Cesium.Cartesian3.fromDegrees(116.391, 39.907, 0);
    const heading = Cesium.Math.toRadians(0);
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    const orientation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);

    const entity = viewer.entities.add({
        name: '3D模型',
        position: position,
        orientation: orientation,
        model: {
            uri: '/models/your-model.glb', // 模型路径，放在public/models目录下
            minimumPixelSize: 128,
            maximumScale: 20000,
            silhouetteColor: Cesium.Color.WHITE,
            silhouetteSize: 2,
            color: Cesium.Color.WHITE.withAlpha(0.5),
            colorBlendMode: Cesium.ColorBlendMode.MIX,
        },
    });

    // 定位到模型
    viewer.zoomTo(entity);
});
</script>

<template>
    <div class="container" id="cesium-container"></div>
</template>

<style lang="less" scoped></style>