Cesium 与 Babylon.js 可视化联合两个mesh

最新推荐文章于 2024-05-24 00:08:01 发布

haibalai2009

最新推荐文章于 2024-05-24 00:08:01 发布

阅读量358

点赞数

文章标签： babylonjs cesium

本文链接：https://blog.csdn.net/haibalai2009/article/details/128700265

版权

本文介绍了如何直接从Babylonjs基础跳转到整合Cesium与Babylonjs进行3D可视化的步骤，包括初始化类库、创建和设置材质、定义纹理坐标，以及将不同形状的Mesh添加到地图上。示例中创建了一个带有屋顶和地面的立方体房屋模型，并展示了如何合并Mesh。

摘要由CSDN通过智能技术生成

我决定不从Babylonjs 基础来讲了直接整合cesium与babylonjs可视化来讲

我整合一个类库后续不断更新中

npm i @haibalai/cesium-babylonjs
初始化cesium-babylonjs 类库， viewer 是 Cesium 的 viewer对象

  import { BabylonMapManager } from "@haibalai/cesium-babylonjs";
  BabylonMapManager.init(viewer);

添加正方体

 import { BabylonMapManager } from "@haibalai/cesium-babylonjs";


  let scene = BabylonMapManager.getScene(viewer);
  const material = new BABYLON.StandardMaterial("material", scene);
  material.diffuseColor = new BABYLON.Color3(0, 1, 0);
  material.backFaceCulling = false;

  //texture
  const roofMat = new BABYLON.StandardMaterial("roofMat", scene);
  roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");
  const boxMat = new BABYLON.StandardMaterial("boxMat");
  boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png")

  const faceUV = [];
  faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
  faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
  faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
  faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side

  const box = BABYLON.MeshBuilder.CreateBox("box", {
    faceUV: faceUV, wrap: true, sideOrientation:2,
    size: 100
  }, scene);
  box.material = boxMat;
  BabylonMapManager.addToMap(box,[113.87629508972168, 22.544824222364753, 100]);

  const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {
      sideOrientation:2,
      diameter: 130, height: 120, tessellation: 3
    },
    scene);
  roof.material = roofMat;
  // roof.scaling.x = 0.75;

  // roof.position.y = 1.22;

  BabylonMapManager.addToMap(roof,[113.87629508972168, 22.544824222364753, 190]);
  roof.rotation.z = Math.PI / 2;
  const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:2048, height:2048}, scene);
  ground.material = material;

  BabylonMapManager.addToMap(ground,[113.87629508972168, 22.544824222364753, 10]);
  const house = BABYLON.Mesh.MergeMeshes([box, roof]);

Cesium 与 Babylon.js 可视化联合两个mesh －小专栏