cesium 3dtile的处理以及加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了cesium 3dtile的处理以及加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

- 今天写一下cesium处理3dtiles和在本地加载3dtiles的教程：

cesium 添加3dtiles,3d,nginx,前端

1. 文件处理

如需3dtiles文件，请私聊我哦，或者vx Kii-MichstaBe 加我。文件转换成3dtiles的话推荐：
Cesium3DTilesConverter
或者cesiumlab
处理完成为以下格式的文件：

cesium 添加3dtiles,3d,nginx,前端

2. 代理：

下载nginx
解压到D盘根目录
把转好的3dtiles放到nginx的根目录下

cesium 添加3dtiles,3d,nginx,前端
打开nginx/conf/nginx.conf并修改

cesium 添加3dtiles,3d,nginx,前端

 listen       8081; #启动的端口   localhost:8081
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

location / {
    #root   html;
    #index  index.html index.htm;
    proxy_pass http://localhost:5173/;#转发前端项目运行的地址
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header        X-Read-IP       $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /tile3 {
    root D:\\nginx;
    autoindex on;
    #index  index.html index.htm;
}

然后保存退出在nginx的根目录使用cmd（以下为几个常用的nginx命令）：
start nginx （启动nginx）
nginx -s reload （重新读取文件）
nginx -s reopen （重启服务）
nginx -s quit （关闭服务）
然后启动nginx 并运行前端项目输入localhost:8081 能打开就代表成功

3.加载

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

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true,
      requestWaterMask: true,
    }),
  });//初始化cesium

  const tilesetModel = new Cesium.Cesium3DTileset({
    url: "/tile3/tileset.json" //tile3为nginx代理的地址
  });
  viewer.scene.primitives.add(tilesetModel); //添加到viewer

  const tileModelTool = {
    scale: 1.0,
    longitude: 0,
    latitude: 0,
    height: 0,
    rx: 0,
    ry: 180,
    rz: 0,
    alpha:1
  }

  const update3dtilesMaxtrix = function () {
    const mx = Cesium.Matrix3.fromRotationX(
      Cesium.Math.toRadians(tileModelTool.rx)
    );
    const my = Cesium.Matrix3.fromRotationY(
      Cesium.Math.toRadians(tileModelTool.ry)
    );
    const mz = Cesium.Matrix3.fromRotationZ(
      Cesium.Math.toRadians(tileModelTool.rz)
    );
    const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
    const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
    const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
    const position = Cesium.Cartesian3.fromDegrees(
      tileModelTool.longitude,
      tileModelTool.latitude,
      tileModelTool.height
    );
    const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
    Cesium.Matrix4.multiply(m, rotationX, m);
    Cesium.Matrix4.multiply(m, rotationY, m);
    Cesium.Matrix4.multiply(m, rotationZ, m);
    const scale = Cesium.Matrix4.fromUniformScale(tileModelTool.scale);
    Cesium.Matrix4.multiply(m, scale, m);
    tilesetModel.modelMatrix = m;
    // viewer.scene.globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
    //   tileModelTool.alpha,
    //   0.0,
    //   1.0
    // );
  }

  viewer.zoomTo(tilesetModel); //相机移动
  // update3dtilesMaxtrix();
})

</script>

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

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

cesium 添加3dtiles,3d,nginx,前端
由于测试的3dtiles位置错误，我也没有调整，上面的update3dtilesMaxtrix方法是调整3dtiles位置的方法。
以上就是加载cesium加载3dtiles的流程。
如有错误处，请指正~~文章来源地址https://www.toymoban.com/news/detail-612824.html