Cesium动态更改贴图

原帖:https://www.cnblogs.com/flypopo/p/9774079.html

网上看了篇帖子,记录一下,还没有测试是否可行
无法更改单个实力的贴图 所有实力的贴图都会同步发生更改

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();
    });
});
*/
Cesium是一款开源的JavaScript库,用于创建基于WebGL的地球和地理空间应用程序。Cesium提供了许多功能,其中一个重要的功能是外部贴图。外部贴图是指在Cesium地球模型上添加自定义贴图,以增加模型的视觉效果和细节。 要实现cesium外部贴图,首先需要准备好自定义贴图贴图可以是任何常见的图片格式,如JPEG、PNG或GIF。确保贴图的分辨率适合应用程序,并且与地球模型的比例匹配。 然后,将贴图加载到Cesium应用程序中。可以使用Cesium的纹理加载器(TextureLoader)来加载贴图文件。加载贴图后,可以将其赋值给Cesium材质(Material)。通过为模型创建一个材质,然后将贴图赋值给材质的属性,就可以实现外部贴图。例如,可以将贴图赋值给模型的颜色(Cesium.Color)属性,以改变模型的颜色。 接下来,将添加外部贴图的模型添加到Cesium的场景(Scene)中。可以使用Cesium的3D模型加载器(ModelLoader)来加载模型文件,并将其添加到场景中。在加载模型时,可以指定模型的位置、旋转和缩放等属性。 最后,刷新Cesium的场景,以显示添加了外部贴图的模型。可以使用Cesium的动画循环(AnimationLoop)来连续刷新场景,以实现动态效果。 总结起来,cesium外部贴图可以通过加载自定义贴图,创建材质,并将其应用于模型的属性来实现。这样可以为Cesium应用程序添加更多的视觉效果和细节,提高用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值