Cesium JS API

ModelGraphics

在Cesium中，ModelGraphics可以用于定义一个3D模型外部的外观，包括模型：

駆動位置和方位的3D模型
用于绘制模型的材质
模型缩放比例

示例

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
    url : 'path/to/model.gltf',
    modelMatrix : modelMatrix,
    scale: 10.0
}));

model.readyToShow.addEventListener(function(model) {
    if (model === model.namedNodes['Propeller']) {
        // 旋转螺旋桨
        scene.postUpdate.addEventListener(function() {
            var angle = cesium.JulianDate.secondsDifference(scene.frameState.time, timeSinceStart);
            angle = Cesium.Math.zeroToTwoPi(angle);
            model.namedNodes['Propeller'].rotate(Cesium.Cartesian3.UNIT_Z, angle);
        });
    }
});

类屬性

属性名称	类型	是否必须	描述
`definitionChanged`	`Event`	否	有关属性何时更改的事件。
`backFaceCulling`	`Property`	否	控制是否只绘制模型的正面。
`clampAnimations`	`Property`	否	控制模型的动画是否被夹在时间范围内，并在范围外暂停。默认为false。
`colors`	`Property`	否	控制模型颜色，能够指定统一颜色，颜色表，以及分类属性。
`colorBlendAmount`	`Property`	否	如果一个材质指定了透明颜色，则控制着透明的值，否则控制颜色混合的比例。
`colorBlendMode`	`Property`	否	控制颜色混合方式。
`distanceDisplayCondition`	`Property`	否	控制距离显示条件。
`scale`	`Property`	否	控制模型的比例。
`show`	`Property`	否	控制是否显示模型。

所有颜色属性

属性名	描述
`color`	符合颜色的纯色（如果指定了）
`colorBlend`	进一步控制透明及透明混合
`colorBlendAmount`	控制着透明和颜色混合的比例。
`colorBlendMode`	控制颜色混合模式。
`colorBlendDestination`	如果`colorBlend`为MIX，则是颜色混合的目标
`colorBlendSource`	如果`colorBlend`为MIX，则是颜色混合的源
`colorImage`	为每个顶点指定不同的颜色值
`colorRamp`	颜色表
`colorRampSpread`	控制颜色表的映射方式。

示例

以下示例演示了如何创建模型外观。

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
    url : 'path/to/model.gltf',
    modelMatrix : modelMatrix,
    scale: 10.0,
    show : true,
    color : Cesium.Color.RED,
    colorBlendMode : Cesium.ColorBlendMode.HIGHLIGHT,
    colorBlendAmount : 0.5,
    distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 100.0),
    backFaceCulling : true,
    clampAnimations : true,
    colorBlend : new Cesium.ColorBlend({
        colorBlendAmount : 0.5,
        destination : Cesium.BlendFunction.ONE_MINUS_SOURCE_ALPHA,
        source : Cesium.BlendFunction.SOURCE_ALPHA,
        minimumRedOutput : 0.4,
        minimumGreenOutput : 0.3,
        minimumBlueOutput : 0.5,
        maximumAlphaOutput : 0.7
    }),
    colors : new Cesium.ColorGeometryInstanceAttribute({
        componentDatatype : Cesium.ComponentDatatype.FLOAT,
        componentsPerAttribute : 4,
        value : new Float32Array([1.0, 0.0, 0.0, 0.5])
    }),
    colorImage : new Cesium.Texture({
        source : 'path/to/colorImage.png',
        pixelFormat : Cesium.PixelFormat.RGBA
    }),
    colorRamp : new Cesium.Texture({
        source : 'path/to/colorRamp.png',
        pixelFormat : Cesium.PixelFormat.RGBA,
        flipY : false
    }),
    colorRampSpread : Cesium.ColorSpread.REPEAT
}));

model.definitionChanged.addEventListener(function(model) {
    var nodes = model.definedPropertyNames;
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var nodeModel = model[node];
        if (typeof nodeModel === 'object') {
            if (node.match(/propeller/i)) {
                nodeModel.color = Cesium.Color.GREEN;
            }
        }
    }
});

继承

ModelGraphics继承自Property，具有值和事件定义。