cesium学习记录Primitive——BoxGeometry立方体图形

fengnian18

于 2023-12-05 19:22:35 发布

阅读量302

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/fengnian18/article/details/134815242

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
	  <script src="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style >
    body{
      margin: 0;
    }
    #cesiumContainer{
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="module">
  // Your access token can be found at: https://ion.cesium.com/tokens.
  // This is the default access token from your ion account

  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YzM5NWM0OS0xZjNjLTQxOWItYTQ4ZC0xODFhZTJlNTM1NTEiLCJpZCI6MTc4OTMwLCJpYXQiOjE3MDAxOTQxODR9.SAW21kpek-PHZh_fBdOpwJJSJFpGvh4F04RJqonS-CY';

  var viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider1 : new Cesium.UrlTemplateImageryProvider({
      url: 'http://127.0.0.1:8887/quanqiu/{z}/{x}/{y}/tile.png',
      credit: '我的地图',
      maximumLevel: 12
    })
  });

  const box = new Cesium.BoxGeometry({
    vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
    maximum : new Cesium.Cartesian3(20, 20, 20),
    minimum : new Cesium.Cartesian3(0, 0, 0)
  });
  const geometry = Cesium.BoxGeometry.createGeometry(box);

  // // 定义立方体的位置
  var position = Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 50);
  //

  var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 50)
  );


  // 创建立方体的外观
  var boxInstance = new Cesium.GeometryInstance({
    geometry: geometry,
    // modelMatrix: Cesium.Matrix4.fromTranslation(position)
    modelMatrix: modelMatrix
  });

  // 将立方体添加到场景中
  var boxPrimitive = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [boxInstance] ,
    appearance : new Cesium.MaterialAppearance({
      material : new Cesium.Material({
        fabric : {
          type : 'Color',
          uniforms : {
            color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
          }
        }
      }),
      faceForward : true
    })

  }));

  viewer.camera.setView({
    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
    // fromDegrees()方法，将经纬度和高程转换为世界坐标
    destination: Cesium.Cartesian3.fromDegrees(126.146869737466616, 43.929544523535149, 500),
    orientation: {
      // 指向
      heading: 195,
      // 视角
      pitch: -39,
      roll: 0.0
    }
  });
</script>
</div>
</body>
</html>