Cesium+Three.js.
Make you can use three.js geometry in Cesium,and use mesh,geometry,material like three.js to manage renderable object in Cesium.
npm install --save-dev
npm run build
npm install cesiummeshvisualizer
html:
<script src="./ThirdParty/Cesium/Cesium.js"></script>
js:
var CesiumMeshVisualizer=require('./dist/CesiumMeshVisualizer.js')
//...
//npm install
//var CesiumMeshVisualizer=require('cesiummeshvisualizer')
//...
var g=typeof(window)!='undefined'?window:(typeof(global)!='undefined'?global:globalThis);
import Cesium from 'cesium/Source/Cesium.js'
g.Cesium=Cesium;
import CesiumMeshVisualizer from './Source/Main.js'
//npm install
//import CesiumMeshVisualizer from 'cesiummeshvisualizer/Source/Main.js'
//...
or
<script src="./ThirdParty/Cesium/Cesium.js"></script>
import CesiumMeshVisualizer from './Source/Main.js'
<script src="./ThirdParty/Cesium/Cesium.js"></script>
<script src="./dist/CesiumMeshVisualizer.js"></script>
<script>
console.log(CesiumMeshVisualizer,Cesium)
//...
</script>
MeshVisualizer = Cesium.MeshVisualizer;
Mesh = Cesium.Mesh;
MeshMaterial = Cesium.MeshMaterial;
FramebufferTexture = Cesium.FramebufferTexture;
var center = Cesium.Cartesian3.fromDegrees(homePosition[0], homePosition[1], 50000);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var meshVisualizer = new MeshVisualizer({
modelMatrix: modelMatrix,
});
viewer.scene.primitives.add(meshVisualizer);
//示例1:Cesium.Geometry+Cesium.MeshMaterial组合
var box = Cesium.BoxGeometry.createGeometry(Cesium.BoxGeometry.fromDimensions({
dimensions: new Cesium.Cartesian3(100000, 50000, 50000),
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
}));
var material = new MeshMaterial({
defaultColor: "rgba(255,0,0,1.0)",
wireframe: false,
side: MeshMaterial.Sides.DOUBLE
});
var boxMesh = new Mesh(box, material);
meshVisualizer.add(boxMesh);
//示例2:Cesium.CSG+Cesium.MeshMaterial组合,可以用Cesium.CSG做布尔运算并渲染运算结果
//首先使用Cesium创建球体
var sphere = new Cesium.SphereGeometry({
radius: 50000.0,
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
});
sphere = Cesium.SphereGeometry.createGeometry(sphere);
var sphereMesh = new Mesh(sphere, material);
sphereMesh.position = new Cesium.Cartesian3(100000, 0, 0)
meshVisualizer.add(sphereMesh);
//将球体对象Cesium.SphereGeometry转成Cesium.CSG实例
sphere = CSG.toCSG(sphere);
//将盒子对象转成Cesium.CSG实例
box = CSG.toCSG(box);
//做布尔运算
var subResult = sphere.subtract(box);
//渲染运算结果
var subResultMesh = new Mesh(subResult, material);
subResultMesh.position = new Cesium.Cartesian3(700000, 0, 0)
meshVisualizer.add(subResultMesh);
//示例3:使用帧缓存作纹理,实际应用中如体绘制,风场流场绘制等等都可以运用此技术
function createGeometry() {
var p1 = new Cesium.Cartesian3(-50000, 50000, 100);
var p2 = new Cesium.Cartesian3(-50000, -50000, 100);
var p3 = new Cesium.Cartesian3(50000, -50000, 100);
var p4 = new Cesium.Cartesian3(50000, 50000, 100);
var positions = new Float64Array([
p1.x, p1.y, p1.z,
p2.x, p2.y, p2.z,
p3.x, p3.y, p3.z,
p4.x, p4.y, p4.z
]);
var indices = new Uint16Array([
0, 1, 3,
1, 2, 3,
]);
var sts = new Float32Array([
1, 1,
1, 0,
0, 0,
0, 1
]);
var geometry = new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: positions
}),
st: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 2,
values: sts
})
},
indices: indices,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
return geometry;
}
//将上文中的盒子渲染到缓存,作为纹理参与createGeometry()方法创建的几何体渲染过程
var framebufferTex = new FramebufferTexture(boxMesh);
var geometry = createGeometry();
var customMesh = new Mesh(geometry, new MeshMaterial({
uniforms: {
u_textureMap: framebufferTex//Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png')
},
side: MeshMaterial.Sides.DOUBLE,
vertexShader : "\n\
\n\
varying vec3 v_position;\n\
varying vec2 v_st;\n\
\n\
void main(void) \n\
{\n\
vec4 pos = u_modelViewMatrix * vec4(position,1.0);\n\
v_position = pos.xyz;\n\
v_st=st;\n\
gl_Position = u_projectionMatrix * pos;\n\
}",
fragmentShader : "varying vec2 v_st;\
uniform sampler2D u_textureMap;\
void main()\
{\
gl_FragColor = texture2D(u_textureMap,v_st);\n\
\
}\
"
}));
customMesh.position = new Cesium.Cartesian3(100000, 0, 0);
meshVisualizer.add(customMesh);
demos(示例中常用操作有:左击发射,Q、A——左、右摆动,W、S、A、D——前进、后退、左转弯、右转弯):
MeshVisualizer
physics/helloworld
physics/cloth
physics/vehicle
physics/terrain
physics/softbody_volume
physics/softbody_volume2
ReferenceMesh
VolumeRendering
fluid2d
instancing
携源码示例和文档,诚意奉献,https://github.com/MikesWei/CesiumMeshVisualizer , 名字不重要。
个人觉得Threejs里的Mesh、Geometry、Material极好,尤其是各个属性可以独立地、动态地编辑的特点,是目前在Cesium的Primitive中没有充分体现的。比如
你渲染一个立方体,想要旋转,竟然还需要自己去算新的ModelMatrix;再比如画个波动的水面竟然不能只修改顶点位置属性,修改完顶点位置后竟然需要移除旧的
Primitive再创建一个。。。也许我没找到接口,但是真心难找啊!还好,稍微扒过Cesium Primitive的都知道,再往稍微底层一点的还有DrawCommand可以灵活使用,
但是也太灵活,代码量大,还容易出错,所以决定自己模仿Threejs的Mesh、Geometry、Material并实现一个负责渲染和管理它们的更支持动态管理可渲染对象的
Primitive;之前的思路是直接转换Threejs的Mesh,产物就是Cesium3js,但是名字太大,误以为是要完全整合Cesium和Threejs,这与我本意不符,遂重新整理优化: