Cesium 动态更换模型贴图方法

时间:2022-05-14 22:52:47

参考资料

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();
});
});
*/

方法现阶段存在的问题

无法更改单个实例的贴图,所有实例的贴图都会同步发生更改