Cesium中DrawCommand使用【转】
Cesium中DrawCommand使用
viewer.scene.primitives.add(object)方法在添加自定义的物体时,首先会加载object里的update方法,若没有则会报如下错误
代码如下:
//定义一个Trangles类
function Trangles(options) {
this._viewer = options.viewer
this._modelMatrix = options.modelMatrix
this.arr = options.arr
}
//用prototype给定方法和属性
Trangles.prototype.getCommand = function(context) {
//顶点着色器
let v = `
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
void main()
{
vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
p = czm_modelViewProjectionRelativeToEye * p;
gl_Position = p;
}
`
//片元着色器
let f = `void main()
{
gl_FragColor = vec4(0,1,0,1);
}
`
//shaderProgram将两个着色器合并
var shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: v,
fragmentShaderSource: f
})
//渲染状态
var renderState = Cesium.RenderState.fromCache({
depthTest: {
enabled: false
},
depthMask: false,
blending: Cesium.BlendingState.ALPHA_BLEND
})
//索引数组Buffer
var indexBuffer = Cesium.Buffer.createIndexBuffer({
context: context,
typedArray: new Uint32Array([0, 1, 2]), //索引顺序
usage: Cesium.BufferUsage.STATIC_DRAW,
indexDatatype: Cesium.IndexDatatype.UNSIGNED_INT
})
//顶点数组Buffer
var vertexBuffer = Cesium.Buffer.createVertexBuffer({
context: context,
typedArray: Cesium.ComponentDatatype.createTypedArray(
Cesium.ComponentDatatype.FLOAT,
this.arr //顶点位置数组
),
usage: Cesium.BufferUsage.STATIC_DRAW
})
//用来表示逐个顶点的信息
var attributes = []
attributes.push({
index: 0,
vertexBuffer: vertexBuffer,
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
normalize: false
})
//顶点数组(设置顶点属性和索引Buffer)
var vertexArray = new Cesium.VertexArray({
context: context,
attributes: attributes,
indexBuffer: indexBuffer
})
//新建一个DrawCommand
this.pointCommand = new Cesium.DrawCommand({
primitiveType: Cesium.PrimitiveType.TRIANGLES,
shaderProgram: shaderProgram,
renderState: renderState,
vertexArray: vertexArray,
pass: Cesium.Pass.OPAQUE,
modelMatrix: this._modelMatrix
})
}
Trangles.prototype.destroy = function() {
//this.arr = [];
}
Trangles.prototype.update = function(frameState) {
if (this.pointCommand) {
var commandList = frameState.commandList
commandList.push(this.pointCommand)
this._viewer.scene.requestRender()
} else {
this.getCommand(this._viewer.scene.context)
}
}
//模型矩阵
var position = Cesium.Cartesian3.fromDegrees(119, 40, 0)
var heading = Cesium.Math.toRadians(0)
var pitch = Cesium.Math.toRadians(0)
var roll = Cesium.Math.toRadians(0)
var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
//顶点数组
var arr = [0, 0, 0, 0, 100000, 0, 100000, 100000, 0]
var temp = new Trangles({ viewer, modelMatrix, arr })
viewer.scene.primitives.add(temp)
------------------------------------------------------------------------------------------------------
原文链接:https://blog.csdn.net/sinat_41537539/article/details/106941041
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2018-07-02 asp.net获取当前网址url【转】
2008-07-02 一种基于几何多重映射的地形绘制优化算法(转)