Cesium自定义圆柱体Geomerty表面贴图

晨风 2021-07-21 PM 814℃ 0条

1. **自定义Geomerty实现，顶点(positions)、连接顺序（逆时针顺序,indices），UV坐标（st）**

```javascript

function MyCylinderGeometry(radius , height, slice = 16) {

var positions = new Float64Array((slice+1) * 2 * 3);
    var theta = 360 / slice;
    for (let j = 0; j <= slice; j ++) {
        let start = j * 6;
        positions[start] = Math.sin(theta * j * (Math.PI / 180)) * radius;
        positions[start + 1] = Math.cos(theta * j * (Math.PI / 180)) * radius;
        positions[start + 2] = height * 0.5;

positions[start + 3] = Math.sin(theta * j * (Math.PI / 180)) * radius;
        positions[start + 4] = Math.cos(theta * j * (Math.PI / 180)) * radius;
        positions[start + 5] = height * 0.5 * -1;
    }
    
    var indices = new Uint16Array(slice * 2 * 3)

for (let i = 0; i < slice; i ++) {
        
        var i3 = i * 6;

let start = i * 2;

indices[i3] = start;
        indices[i3 + 1] = start + 1;
        indices[i3 + 2] = start + 3;
        
        indices[i3 + 3] = start;
        indices[i3 + 4] = start + 3;
        indices[i3 + 5] = start + 2;
    }

var st = new Float32Array((slice+1) * 2 * 2);

for (let index = 0; index <= slice; index++) {
        let i3 = index * 4;

st[i3] = index / slice;
        st[i3 + 1] = 0;
        st[i3 + 2] = index / slice;
        st[i3 + 3] = 1;

}

const attributes = new Cesium.GeometryAttributes({
        position: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.DOUBLE,
            componentsPerAttribute: 3,
            values: positions
        }),
        st :new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.FLOAT,
            componentsPerAttribute: 2,
            values: st
        }) 
    });

this.attributes = attributes;
    this.indices = indices;
    this.primitiveType = Cesium.PrimitiveType.TRIANGLES;
    this.boundingSphere = Cesium.BoundingSphere.fromVertices(positions);
}

export default MyCylinderGeometry;

```

2.**调用**
```javascript
let pos = Cesium.Cartesian3.fromDegrees(121.426117204, 31.271286583, 10);
let hpr = new Cesium.HeadingPitchRoll();
let orientation = Cesium.Transforms.headingPitchRollQuaternion(pos, hpr);
let modelToWorldMatrix = Cesium.Matrix4.fromTranslationQuaternionRotationScale(pos,orientation, new Cesium.Cartesian3(1, 1, 1));
var instance = new Cesium.GeometryInstance({
	geometry : new MyCylinderGeometry(2,10,16),
    modelMatrix : modelToWorldMatrix,
	id:"myCylinder",
    attributes : {
		show : new Cesium.ShowGeometryInstanceAttribute(true),
		distanceDisplayCondition : new Cesium.DistanceDisplayConditionGeometryInstanceAttribute(100.0, 10000.0)
    }
});
var prim = new Cesium.Primitive({
	geometryInstances : instance,
	appearance : new Cesium.MaterialAppearance({
		flat : true,
		translucent : false,
		material:new Cesium.Material({
			fabric: {
				type: "Image",
				uniforms: {
					image: `${process.env.BASE_URL}texture/brick.png`,
					repeat:new Cesium.Cartesian2(3.0, 3.0)
				},
			},
		}), 
	})
});
viewer.scene.primitives.add(prim);
```
 3.**attributes 说明**
 
 支持color和show,distanceDisplayCondition，支持后续为每一个geometry更新attributes

```javascript
var attributes = wellPrim.getGeometryInstanceAttributes("myCylinder");
attributes.show = Cesium.ShowGeometryInstanceAttribute.toValue(false);
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.YELLOW);
```

注意当 apperance为PerInstanceColorAppearance时，color才会有效。

标签: cesium

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：http://blog.chenfengly.com/index.php/archives/9/

上一篇 SqlBuckCopy使用

下一篇 Cesium直接加载Shape文件，Js解析Shape文件库

Cesium自定义圆柱体Geomerty表面贴图

评论啦~

栏目分类

标签云

Cesium自定义圆柱体Geomerty表面贴图

 评论啦~

 栏目分类

标签云

评论啦~

栏目分类

标签云