cesium实现跳动的四菱锥

已于 2023-07-27 15:24:37 修改
阅读量617 收藏 7
点赞数 4
分类专栏： cesium 文章标签： 前端 着色器
于 2023-07-27 15:15:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25519615/article/details/131959839
版权

在threejs中实现圆锥加动画很简单，但是在cesium中做动画就费劲很多，查了一些网上资料发现实现的效果有版本限制，跟我使用的版本1.95不兼容，于是借鉴了这位兄弟的代码改写了一部分代码 Cesium 绘制一个旋转发光的四棱锥_cesium 四棱锥_Darren~52HZ的博客-CSDN博客，花了一个上午终于弄出来了，如果有同学想在1.02.0版本以及更高版本上运行的话，需要改写着色器代码！！！最终效果如下

 接下来就是开始写代码

一.先封装TetrahedronPrimitive类，封装思路，

    1.先绘制圆锥的positions

var positions = new Float64Array(5 * 3);
        // position 0
        positions[0] = 0.0;
        positions[1] = 1.0;
        positions[2] = 0.0;

        // position 1
        positions[3] = -1.0;
        positions[4] = 0.0;
        positions[5] = 0.0;

        // position 2
        positions[6] = 0.0;
        positions[7] = -1.0;
        positions[8] = 0.0;

        // position 3
        positions[9] = 1.0;
        positions[10] = 0.0;
        positions[11] = 0.0;

        // position 4
        positions[12] = 0.0;
        positions[13] = 0.0;
        positions[14] = -1.0;

2.设置indices

var indices = new Uint16Array(6 * 3);
        // back triangle
        indices[0] = 4;
        indices[1] = 2;
        indices[2] = 3;

        // left triangle
        indices[3] = 4;
        indices[4] = 3;
        indices[5] = 0;

        // right triangle
        indices[6] = 4;
        indices[7] = 0;
        indices[8] = 1;

        // bottom triangle
        indices[9] = 4;
        indices[10] = 1;
        indices[11] = 2;
        // bottom triangle
        indices[12] = 1;
        indices[13] = 2;
        indices[14] = 3;

        // bottom triangle
        indices[15] = 1;
        indices[16] = 3;
        indices[17] = 0;

// 定义纹理数组(设置纹理时需要)
// var sts = new Float32Array([0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.5, 0.5]);

3.生产geometry

let geometry = new Cesium.Geometry({
            attributes: {
                position: new Cesium.GeometryAttribute({
                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
                    componentsPerAttribute: 3,
                    values: positions,
                }),
                // 设置纹理的时候需要配置
                // textureCoordinates: new Cesium.GeometryAttribute({
                //     componentDatatype: Cesium.ComponentDatatype.FLOAT,
                //     componentsPerAttribute: 2,
                //     values: sts,
                // }),
            },
            indices: indices,
            primitiveType: Cesium.PrimitiveType.TRIANGLES,
            boundingSphere: Cesium.BoundingSphere.fromVertices(
                positions
            ),
        });

4.配置VertexArray

const vertexArray = Cesium.VertexArray.fromGeometry({
        geometry: geometry,
        context: context,
        attributeLocation:Cesium.GeometryPipeline.createAttributeLocations(geometry)
    })

5.配置shaderProgram

const shaderProgram = Cesium.ShaderProgram.fromCache({
        context: context,
        vertexShaderSource: `
            precision highp float;
            attribute vec3 position;
            attribute vec2 st;
            varying vec2 v_st;
            void main() {
                v_st = st;
                gl_Position = czm_projection * czm_modelView * vec4(position, 1.0);
            }
        `,
        fragmentShaderSource: `
            varying vec2 v_st;
            // sampler2D 其实是一个图片源经过webgl处理的一个像素数据集
            uniform sampler2D wenli;
            uniform vec4 color;
            void main() {
                czm_materialInput materialInput;
                czm_material material = czm_getDefaultMaterial(materialInput);
                material.diffuse = vec3(color.rgb);
                material.alpha = color.a;
                // 设置颜色
                gl_FragColor = vec4(color);
                // 设置纹理贴图
                // gl_FragColor = texture2D(wenli, v_st);
            }
        `,
        attributeLocation: Cesium.GeometryPipeline.createAttributeLocations(geometry)
    })

6.定义uniform

const uniformMap = {
        color:  ()=> {
            return this._color;
        },
        wenli: () => {
            if (!this.texture) {
            return context.defaultTexture
            }
            return this.texture
        }
    }

7.实例化DrawCommand

this.drawCommand = new Cesium.DrawCommand({
        vertexArray: vertexArray,
        shaderProgram: shaderProgram,
        uniformMap: uniformMap,
        renderState: renderState,
        pass: Cesium.Pass.TRANSLUCENT,      //开启透明度   https://blog.csdn.net/esoft_weixiuyong/article/details/122338351
        modelMatrix: this._modelMatrix
})

贴出完整代码

// Cesium195版本使用
export default class TetrahedronPrimitive {
    _modelMatrix = null
    drawCommand = null
    _viewer = undefined
    texture = null
    image = null
    _angle = 10
    _height = 100
    _enuMatrix = undefined
    _scaleMatrix = undefined
    _scale = undefined
    _speed = undefined
    _color = undefined
    _distance = Cesium.defaultValue(1, 1);
    constructor(options) {
        this._localPosition = options.position
        this._scale = Cesium.defaultValue(options.scale,new Cesium.Cartesian3(10, 10, 15))
        this._speed = Cesium.defaultValue(options.speed, 1.0)
        this._color = Cesium.defaultValue(
            options.color,
            new Cesium.Color(1.0, 0.0, 0.0, 0.18)
        );
        this._modelMatrix = this.computeModelMatrix();
        this._viewer = options.viewer;
    }
    generateGeometry() {

        var positions = new Float64Array(5 * 3);
        // position 0
        positions[0] = 0.0;
        positions[1] = 1.0;
        positions[2] = 0.0;

        // position 1
        positions[3] = -1.0;
        positions[4] = 0.0;
        positions[5] = 0.0;

        // position 2
        positions[6] = 0.0;
        positions[7] = -1.0;
        positions[8] = 0.0;

        // position 3
        positions[9] = 1.0;
        positions[10] = 0.0;
        positions[11] = 0.0;

        // position 4
        positions[12] = 0.0;
        positions[13] = 0.0;
        positions[14] = -1.0;

        var indices = new Uint16Array(6 * 3);
        // back triangle
        indices[0] = 4;
        indices[1] = 2;
        indices[2] = 3;

        // left triangle
        indices[3] = 4;
        indices[4] = 3;
        indices[5] = 0;

        // right triangle
        indices[6] = 4;
        indices[7] = 0;
        indices[8] = 1;

        // bottom triangle
        indices[9] = 4;
        indices[10] = 1;
        indices[11] = 2;
        // bottom triangle
        indices[12] = 1;
        indices[13] = 2;
        indices[14] = 3;

        // bottom triangle
        indices[15] = 1;
        indices[16] = 3;
        indices[17] = 0;

        // 1.3 定义纹理数组
        // var sts = new Float32Array([0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.5, 0.5]);

        let geometry = new Cesium.Geometry({
            attributes: {
                position: new Cesium.GeometryAttribute({
                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
                    componentsPerAttribute: 3,
                    values: positions,
                }),
                // 设置纹理的时候需要配置
                // textureCoordinates: new Cesium.GeometryAttribute({
                //     componentDatatype: Cesium.ComponentDatatype.FLOAT,
                //     componentsPerAttribute: 2,
                //     values: sts,
                // }),
            },
            indices: indices,
            primitiveType: Cesium.PrimitiveType.TRIANGLES,
            boundingSphere: Cesium.BoundingSphere.fromVertices(
                positions
            ),
        });

        return geometry;
    }
    computeModelMatrix(){
        let enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
            this._localPosition
        );
        let scaleMatrix = Cesium.Matrix4.fromScale(this._scale);
        let modelMatrix = Cesium.Matrix4.multiply(
            enuMatrix,
            scaleMatrix,
            new Cesium.Matrix4()
        );
        this._scaleMatrix = scaleMatrix;
        this._enuMatrix = enuMatrix;
        return modelMatrix;
    }
  createCommand(context) {
    const geometry = this.generateGeometry()

    const vertexArray = Cesium.VertexArray.fromGeometry({
        geometry: geometry,
        context: context,
        attributeLocation:Cesium.GeometryPipeline.createAttributeLocations(geometry)
    })

    const shaderProgram = Cesium.ShaderProgram.fromCache({
        context: context,
        vertexShaderSource: `
            precision highp float;
            attribute vec3 position;
            attribute vec2 st;
            varying vec2 v_st;
            void main() {
                v_st = st;
                gl_Position = czm_projection * czm_modelView * vec4(position, 1.0);
            }
        `,
        fragmentShaderSource: `
            varying vec2 v_st;
            // sampler2D 其实是一个图片源经过webgl处理的一个像素数据集
            uniform sampler2D wenli;
            uniform vec4 color;
            void main() {
                czm_materialInput materialInput;
                czm_material material = czm_getDefaultMaterial(materialInput);
                material.diffuse = vec3(color.rgb);
                material.alpha = color.a;
                // 设置颜色
                gl_FragColor = vec4(color);
                // 设置纹理贴图
                // gl_FragColor = texture2D(wenli, v_st);
            }
        `,
        attributeLocation: Cesium.GeometryPipeline.createAttributeLocations(geometry)
    })
    
    const uniformMap = {
        color:  ()=> {
            return this._color;
        },
        wenli: () => {
            if (!this.texture) {
            return context.defaultTexture
            }
            return this.texture
        }
    }
    const renderState = Cesium.RenderState.fromCache({
        depthTest: {
            enabled: false
        }
    })
 
    this.drawCommand = new Cesium.DrawCommand({
        vertexArray: vertexArray,
        shaderProgram: shaderProgram,
        uniformMap: uniformMap,
        renderState: renderState,
        pass: Cesium.Pass.TRANSLUCENT,      //开启透明度   https://blog.csdn.net/esoft_weixiuyong/article/details/122338351
        modelMatrix: this._modelMatrix
    })
  }
    //开启动画
    startAnimate(){
        let that = this;
        this.computeHeight();
        this._setInterval = setInterval(animateFunc, 5);
        function animateFunc() {
            that._angle = that._angle + 0.01;
            Math.sin(that._angle) > 0
                ? (that._height = 0.005)
                : (that._height = -0.005);
            let translation = new Cesium.Cartesian3(0, 0, that._height);
            Cesium.Matrix4.multiplyByTranslation(
                that._modelMatrix,
                translation,
                that._modelMatrix
            );
            let rotationZ = Cesium.Matrix4.fromRotationTranslation(
                Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(that._speed))
            );
            Cesium.Matrix4.multiply(
                that._modelMatrix,
                rotationZ,
                that._modelMatrix
            );
        }

    }
    //关闭动画
    closeAnimate() {
        clearInterval(this._setInterval);
    }
    computeHeight() {
        let point = Cesium.Cartesian3.fromElements(
            0,
            0,
            this._distance,
            new Cesium.Cartesian3()
        );
        let enuPoint = Cesium.Matrix4.multiplyByPoint(
            this._enuMatrix,
            point,
            new Cesium.Cartesian3()
        );
        let upPositionEC = Cesium.Matrix4.multiplyByPoint(
            this._viewer.scene.camera._viewMatrix,
            enuPoint,
            new Cesium.Cartesian3()
        );
        let upPositionPC = Cesium.Matrix4.multiplyByPoint(
            this._viewer.scene.camera.frustum.projectionMatrix,
            upPositionEC,
            new Cesium.Cartesian3()
        );
        return Cesium.Cartesian3.normalize(upPositionPC, new Cesium.Cartesian3()).z;
    }
    // 创建纹理
    createTextures = (context) => {
        if (this.image) return
        this.image = new Image()
        this.image.src = '../images/blue12.png'
        this.image.onload = () => {
        this.texture = new Cesium.Texture({
            context: context,
            source: this.image
        })
        }
    }
    update(frameState) {
        this.createCommand(frameState.context)
        if (!this.texture) {
            this.createTextures(frameState.context)
        }
        frameState.commandList.push(this.drawCommand)
    }
}

页面上使用

import TetrahedronPrimitive from './js/TetrahedronPrimitive.js'

// 此处省略cesium视图实例化

let longitude = 113.3191;
let latitude = 23.109;

viewer.camera.flyTo({
   destination: Cesium.Cartesian3.fromDegrees(longitude,latitude, 500.0)
});

let position = Cesium.Cartesian3.fromDegrees(longitude,latitude,200);

const primitive = viewer.scene.primitives.add(new TetrahedronPrimitive({
    position: position,
    viewer:viewer,
    color: Cesium.Color.fromCssColorString("#00FF00").withAlpha(0.5),
}))

viewer.scene.primitives.add(primitive);
        
// 开启动画
primitive.startAnimate()

好了，到此一个带有透明度跳动的四菱椎体就实现了

朱颜辞镜、
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium画个雷达四凌锥体
细雨纷飞~~~
05-19 1190
var targetPosition = Cesium.Cartesian3.fromDegrees(116.57, 26.91, 2000.0); viewer.entities.add({ name:"雷达四凌锥体", position:targetPosition, orientation: Cesium.Transforms.headingPitchRollQuaternion(targetPosition, new Cesium.HeadingPitch.
50.（cesium篇）cesium实现四色预警（仿echarts）.zip
11-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/121248421
Cesium实现动态扩散预警
06-21
Cesium预警效果---动态扩散圆圈。用户可在界面动态调整扩散范围、扩散速度、波纹数量以及扩散效果的颜色。附带框架的完整源码，一键部署运行。
cesium绘制卫星四菱锥覆盖范围，跟随卫星移动
最新发布
12-28
cesium绘制卫星四菱锥覆盖范围，跟随卫星移动
CesiumJS PrimitiveAPI 高级着色入门 - 从参数化几何与 Fabric 材质到着色器 - 下篇
liubangbo的专栏
03-14 1393
案例就不放了，有能力的可以直接参考 CesiumJS 曾经推过的一个 3D 风场可视化的案例，它不仅自己写了一个顶点着色器、片元着色器都是自定义的 Appearance，还写了自定义的 Primitive（不是原生 Primitive，是连 DrawCommand 都自己创建的似 Primitive，似 Primitive 将在下文解释）。关于 fabric.materials，它的所有键名都可以在着色器代码中作为 GLSL 变量使用，也就是一个计算完成的 czm_material 结构体变量。
cesium 旋转弹跳四棱锥（光带扫描）（动态泛光效果）
q1025387665a的博客
05-31 5678
前言：本文主要分以下几个部分阐述功能的核心实现。 1、 四棱锥的生成 2、物体的平移（也就是弹跳，本质上来说就是控制物体的渲染位置） 3、物体的绕自身中心轴旋转 4、Cesium drawCommand下的纹理贴图。 5、光带扫描（也有人叫动态泛光，这种效果在啥子智慧城市出现的比较多） 静态效果图 四棱锥的生成 上图可知， 四个边缘上的点是同一Y值，拉高中心点的y值或者减少 中心点的y值就可以形成一...
Cesium 绘制一个旋转发光的四棱锥
qq_35984445的博客
08-08 2676
其中主要构造几何如下，创建倒着的四棱锥，构建顶点数组与索引，同时构建四棱锥的三角面数组与索引。二、根据创建的矩阵（Matrix4）进行做动画自身中心轴旋转操作。2.然后根据坐标创建矩阵（Matrix4）和四棱锥的海拔。最近发现B站上大神的视频，听了一下，受益匪浅，分享给大家。三、根据矩阵（Matrix4）中的海拔做动画自身跳动。最后根据图片创建四棱锥的纹理。如图所示，四棱锥的三角面构建。顶层矩形也切割成两个三角面。如图所示，顶点数组构建。......
Cesium|xt3d 卫星视椎体（四棱锥体）
xt3d的博客
03-08 1399
Cesium|xt3d 卫星视椎体（四棱锥体）效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
Cesium实现动态旋转四棱锥（2023.9.11）
I have a dream, here my dreams come true!
10-02 1578
Cesium 四棱锥
Cesium卫星视椎体（四棱锥体）
xt3d的博客
12-05 4411
Cesium卫星视椎体（四棱锥体）效果图 效果图 详情参见 Cesium实战专栏
四棱锥立方体旋转
12-13
OpenGL实现四棱锥立方体的建模，并将四棱锥立方体进行旋转，实现物体旋转的漂亮效果，这对于学习OpenGL的学习者非常有用，对于游戏开发者也有很高的参考价值！！
cesium.zip
03-02
基于cesium开发的雷达跟踪飞机动画，可以展现几个雷达同时跟踪飞机，同时画飞行轨迹，包括测试数据和运行视频。
倒四棱锥模型，glb格式 cesium直接可用
11-19
倒四棱锥模型，glb格式 cesium直接可用
cesium 实现风场图效果
08-01
cesium加载风场效果
基于cesium实现视频投射功能
11-09
使用cesium实现视频投射，在三维模型上展示实时视频
Cesium 使用着色器实现点光源
kuyewb的专栏
09-22 1694
可设置点光源位置，颜色，使用自定义着色器，混合3DTileset，实现点光源效果。
Cesium雷达追踪追踪（圆锥体效果）
God's asylum的博客
05-28 1334
【代码】Cesium雷达追踪追踪（圆锥体效果）
Cesium|xt3d 雷达追踪圆锥体
xt3d的博客
03-08 1083
Cesium|xt3d 雷达追踪圆锥体效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co
Cesium雷达追踪四棱锥体
xt3d的博客
12-05 1437
Cesium雷达追踪四棱锥体效果图 效果图 详情参见 Cesium实战专栏
cesium 实现旋转四棱锥
06-08
要实现旋转cesium四棱锥，我们可以使用三维图形库，比如OpenGL或者Three.js。下面是一个使用Three.js库实现旋转cesium四棱锥的简单示例代码： ```javascript var scene, camera, renderer; var geometry, material, mesh; init(); function init() { // 创建场景 scene = new THREE.Scene(); // 创建相机 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建几何体 geometry = new THREE.CesiumGeometry(1, 2, 4); // 创建材质 material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建网格 mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // 创建渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); // 旋转cesium四棱锥 mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; // 渲染场景 renderer.render(scene, camera); } animate(); ``` 这段代码中，我们首先创建了一个场景、相机、几何体、材质和网格。然后在动画函数中，我们不断对cesium四棱锥进行旋转，并且不断地渲染场景。最终，我们就可以看到cesium四棱锥在屏幕上旋转的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值