cesium 3dtile的处理以及加载

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

1. 文件处理

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

2. 代理：

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

打开nginx/conf/nginx.conf并修改

 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"&gt;
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

onMounted(() =&gt; {
  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&gt;

<template&gt;
  <div id="cesiumContainer"&gt;</div&gt;
</template&gt;

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

由于测试的3dtiles位置错误，我也没有调整，上面的update3dtilesMaxtrix方法是调整3dtiles位置的方法。
以上就是加载cesium加载3dtiles的流程。
如有错误处，请指正~~

代码007普通

打赏 收藏 海报 链接