原文地址:http://my.oschina.net/u/149294/blog/284363
首先
由于Cesium目前接口还不是很稳定,每个版本之间差异较大,所以请确保你下载了最版本b29,并且配置好了环境,参见环境配置。
Cesium交流群:115883691,欢迎大家一起来讨论Cesium相关技
开始
直接上代码
var TetrahedronGeometry = function(){
var negativeRootTwoOverThree = -Math.sqrt(2.0) / 3.0;
var negativeOneThird = -1.0 / 3.0;
var rootSixOverThree = Math.sqrt(6.0) / 3.0;
//四面体的四个顶点
var positions = new Float64Array(4 * 3);
// position 0
positions[0] = 0.0;
positions[1] = 0.0;
positions[2] = 1.0;
// position 1
positions[3] = 0.0;
positions[4] = (2.0 * Math.sqrt(2.0)) / 3.0;
positions[5] = negativeOneThird;
// position 2
positions[6] = -rootSixOverThree;
positions[7] = negativeRootTwoOverThree;
positions[8] = negativeOneThird;
// position 3
positions[9] = rootSixOverThree;
positions[10] = negativeRootTwoOverThree;
positions[11] = negativeOneThird;
var attributes = new Cesium.GeometryAttributes({
position : new Cesium.GeometryAttribute({
componentDatatype : Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute : 3,
values : positions
})
});
//顶点索引
var indices = new Uint16Array(4 * 3);
// back triangle
indices[0] = 0;
indices[1] = 1;
indices[2] = 2;
// left triangle
indices[3] = 0;
indices[4] = 2;
indices[5] = 3;
// right triangle
indices[6] = 0;
indices[7] = 3;
indices[8] = 1;
// bottom triangle
indices[9] = 2;
indices[10] = 1;
indices[11] = 3;
//包围球
var boundingSphere = new Cesium.BoundingSphere(new Cesium.Cartesian3(0.0,0.0,0.0),1.0);
var geometry = Cesium.GeometryPipeline.computeNormal(new Cesium.Geometry({
attributes: attributes,
indices: indices,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: boundingSphere
}));
this.attributes = geometry.attributes;
this.indices = geometry.indices;
this.primitiveType = geometry.primitiveType;
this.boundingSphere = geometry.boundingSphere;
//this.boundingSphere = Cesium.BoundingSphere.fromVertices(positions);
};
四面体是四个顶点组成的,为了不损失精度在保存顶点位置的时候我们使用了Float64Array。
四面体的每个面都又三个顶点组成,通过使用顶点索引我们可以减少所要使用的顶点数,节约内存。每个顶点都将被使用3次,索引的存储使用Uint16Array,加入超过6k也可以用Uint32Array。
通过上述代码我们定义了一个四面体,接下来我们来把它加到场景中。
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
var scene = cesiumWidget.scene;
var ellipsoid = cesiumWidget.scene.globe.ellipsoid;
//模型矩阵
var modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(
Cesium.Cartographic.fromDegrees(-100.0, 40.0))),
new Cesium.Cartesian3(0.0, 0.0, 200000.0)),
500000.0);
//四面体的实例
var instance = new Cesium.GeometryInstance({
geometry : new TetrahedronGeometry(),
modelMatrix : modelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE) //白色
}
});
//加入场景
scene.primitives.add(new Cesium.Primitive({
geometryInstances : instance,
appearance : new Cesium.PerInstanceColorAppearance({
flat : true,
translucent : false
})
}));
运行代码,你将看到如下画面
这个四面体是不是看的不是很清楚啊,你确定这是四面体?难道不是三角形?,确实!!!
现在我们把创建四面体实例的代码替换为下面这样:
var instance = new Cesium.GeometryInstance({
geometry : Cesium.GeometryPipeline.toWireframe(new TetrahedronGeometry()),
modelMatrix : modelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
}
});
现在再来看看呢,GeometryPipeline.toWireframe将会使几何体使用Lines来绘制