Cesium 動態更換模型貼圖方法

參考資料

github 討論地址 示例代碼地址

示例代碼

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var imagePath = '../../../../Apps/SampleData/models/CesiumAir/0_Cesium_Air.png';
var model = createModel('../../../../Apps/SampleData/models/CesiumBalloon/CesiumBalloon.glb');

// New texture must be the same size as the original texture
model.readyPromise.then(function() {
    var textureIndexToReplace = 0;
    var textures = model._rendererResources.textures;
    var texture = textures[textureIndexToReplace];
    Cesium.Resource.fetchImage({
        url : imagePath
    }).then(function(image) {
        texture.copyFrom(image);
        texture.generateMipmap(); // Also replaces textures in mipmap
    });
});


function createModel(url) {
    var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0);
    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0));

    var model = scene.primitives.add(Cesium.Model.fromGltf({
        url : url,
        modelMatrix : modelMatrix,
        minimumPixelSize : 128,
        incrementallyLoadTextures : false
    }));

    model.readyPromise.then(function(model) {
        var camera = viewer.camera;

        // Zoom to model
        var controller = scene.screenSpaceCameraController;
        var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.5;

        var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
        var heading = Cesium.Math.toRadians(230.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
    }).otherwise(function(error){
        window.alert(error);
    });
    
    return model;
}

/*
// Alernate approach - but requires fix in DelayLoadedTextureUniform to return this._textures[this._textureId] instead of this._value
model.readyPromise.then(function() {
    var textureIndexToReplace = 0;
    var textures = model._rendererResources.textures;
    var oldTexture = textures[textureIndexToReplace];
    Cesium.Resource.fetchImage({
        url : imagePath
    }).then(function(image) {
        var newTexture = new Cesium.Texture({
            context : viewer.scene.frameState.context,
            source : image
        });
        textures[textureIndexToReplace] = newTexture;
        oldTexture.destroy();
    });
});
*/

方法現階段存在的問題

沒法更改單個實例的貼圖，全部實例的貼圖都會同步發生更改