Cesium-广告牌

生活真难

已于 2024-03-01 09:01:18 修改

阅读量1k

点赞数 16

分类专栏： Cesium 文章标签：前端 javascript 开发语言

于 2024-02-29 17:12:38 首次发布

本文链接：https://blog.csdn.net/anglestar2012/article/details/136375776

版权

本文详细介绍了如何在Cesium中构建广告牌，包括柱体和带纹理的立方体的创建，以及如何将视频和图片贴到长方体上。通过自定义Primitive对象，实现了道路标识牌和视频广告牌的抽象，涉及顶点、索引、法线、纹理坐标等概念。

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

说明：

使用自定义Primitive对象构建，自定义Primitive主要方法为update,其余的内容就是如何构建一个渲染队列进行数据的渲染。本案例中由两个渲染对象构成一个渲染队列，一个是柱体，另外一个是长方体

创作来源

1、在道路两侧的标识牌

2、在路口的视频广告

创作思路

1、需要在Cesium中实现道路标识牌或者视频广告牌

2、实体对象抽象：

a、将道路标识牌和广告牌抽象为柱体+长方体；

b、位置抽象为居中或者靠边

3、首先需要创建有颜色柱体：主要以顶点、索引以及法线构成

4、创建长方体并带有纹理：主要以顶点、法线、纹理坐标以及索引构成

5、将视频、图片贴到长方体上：使用GeometryInstance进行视频或者图像的渲染

实现步骤

1、创建柱体

a 、柱体是由一圈圆拉升高度构成柱体，同时是由很多个矩形构成的

b、首先创建半径为R的圆（圆的点数为360个点），如半径过大可将点位数增加

c、计算法线，法线方向有圆心指向圆上的点

d、获取柱体上的点位，即在点位上的z值加上height即可

e、创建索引，需要熟悉webgl的三角索引原理，1个矩形由两个三角形构成，1个三角形由三个顶点索引构成

f、创建几何对象

/**
 * 获取柱状几何对象
 * @param radius
 * @param height
 * @return {Geometry}
 */
export const getCylinderGeometry = (radius, height) => {
  let position = [];
  let normal = [];
  let step = 360;
  for (let i = 0; i < step; i++) {
    let angleR = CesiumMath.toRadians((i * 360) / step);
    position.push(
      new Cartesian3(radius * Math.cos(angleR), radius * Math.sin(angleR), 0)
    );
    position.push(
      new Cartesian3(
        radius * Math.cos(angleR),
        radius * Math.sin(angleR),
        height
      )
    );
    normal.push(new Cartesian3(Math.cos(angleR), Math.sin(angleR), 0));
    normal.push(new Cartesian3(Math.cos(angleR), Math.sin(angleR), 0));
  }
  let positionArray = new Float32Array(position.length * 3);
  let normalArray = new Float32Array(normal.length * 3);
  for (let i = 0; i < position.length; i++) {
    positionArray[i * 3] = position[i].x;
    positionArr