Cesium快速上手8-Appearance&Material

image.png

比较通用的有两个：
Cesium.MaterialAppearance(options) 可以设置纹理图案
Cesium.PerInstanceColorAppearance(options) 主要用于颜色属性，与 Cesium.GeometryInstance中attributes中 colo属性 ； 每个GeometryInstance 一个颜色；

另外需要注意：
EllipsoidSurfaceAppearance / MaterialAppearance  / PolylineMaterialAppearance 可设置Material属性
PerInstanceColorAppearance / PolylineColorAppearance  不可设置Material属性，只可更改颜色

//Add Primitives
scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : Cesium.BoxGeometry.fromDimensions({
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
        }),
        modelMatrix : Cesium.Matrix4.multiplyByTranslation(
            Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-105.0, 45.0)),
            new Cesium.Cartesian3(0.0, 0.0, 250000), new Cesium.Matrix4()),
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
        }
    }),
    appearance : new Cesium.PerInstanceColorAppearance({
        closed: true
    })
}));

MaterialAppearance

http://localhost:8080/Apps/Sandcastle/index.html?src=Materials.html&label=Development

image.png

function applyDiffuseMaterial(primitive, scene) {
    Sandcastle.declare(applyDiffuseMaterial);   // For highlighting in Sandcastle.
    primitive.appearance.material = new Cesium.Material({
        fabric : {
            type : 'DiffuseMap',
            uniforms : {
                image : '../images/Cesium_Logo_Color.jpg'
            }
        }
    });
}

MaterialAppearance2

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FCoplanar%20Polygon.html&label=Development

image.png

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : polygonInstance,
    appearance : new Cesium.MaterialAppearance({
        material : Cesium.Material.fromType('Checkerboard'),
        materialSupport : Cesium.MaterialAppearance.MaterialSupport.TEXTURED
    })
}));

PolylineColorAppearance

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPolyline%20Color.html&label=Development

image.png

Material 文档

Material API

// Create a color material with fromType:
polygon.material = Cesium.Material.fromType('Color');
polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

// Create the default material:
polygon.material = new Cesium.Material();

// Create a color material with full Fabric notation:
polygon.material = new Cesium.Material({
    fabric : {
        type : 'Color',
        uniforms : {
            color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
        }
    }
});