改变圆柱体长度或挤压高度

Change length of cylinder or extrudedHeight of circle

本文关键字：高度 圆柱体 改变      更新时间：2023-09-26

我试图改变圆柱体的长度或圆圈的extrextrdedheight，当它被添加到原语中并显示在铯小部件/查看器中。例如:

var length = 100;
var cylinderGeometry = new Cesium.CylinderGeometry({
    length : length,
    topRadius : cylinderradius,
    bottomRadius : cylinderradius,
    slices: cylinderslices,
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});
var cylinder = new Cesium.GeometryInstance({
    geometry: cylinderGeometry,
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(  
        Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lon, lat))), 
        new Cesium.Cartesian3(0.0, 0.0, length * 0.5)),
    attributes: {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    },
    id: "Cylinder1"
});
var primitive = new Cesium.Primitive({
    geometryInstances : cylinder ,
    appearance : new Cesium.PerInstanceColorAppearance({
        closed : false,
        translucent: true,
        flat: false,
        faceForward: true
    }),
    allow3DOnly: true,
    vertexCacheOptimize: true,
    allowPicking: true,
    releaseGeometryInstances: false
});
widget.scene.primitives.add(primitive);

因为它被添加到primitives数组中，所以它将显示在小部件中，但是在2秒之后，我得到一个通知，长度应该减半(这意味着设置为50)。有什么办法可以做到吗?在cylinderGeometry中简单地更改它似乎并不能完成工作。

我创建了一个新的圆柱体，新的高度，添加它，并删除旧的。然而，这往往是闪烁的圆柱体(它消失了几分之一秒)之前，新的显示。我通过在添加新实例后一段时间后删除旧实例来解决此问题。这整个解决方案不是很优雅，在计算能力较弱的设备上也不能很好地工作，因此我寻找一个更好的解决方案。

我不在乎这是使用圆柱体还是挤压圆来实现的。如果你需要更多的信息，请在问题下方的评论中提问。

编辑

我实现了马修建议的第二个解决方案，但经过一段时间的完美运行后，圆柱体停止改变高度(当我使用我的解决方案时没有发生)。interval中的回调确实被调用了。下面是一些代码，显示了我的新解决方案是什么(不工作):

primitives.add(prim);
window.nodeValuesInterval = setInterval(function () {
    if (prim._state == Cesium.PrimitiveState.COMPLETE) {
        clearInterval(window.nodeValuesInterval);
        clearTimeout(window.nodeValuesTimeout);
        primitives.remove(primitiveObjects.value);
        primitiveObjects.value = prim;
    }
}, cylindervalueinterval);
window.nodeValuesTimeout = setTimeout(function () {
    clearInterval(window.nodeValuesInterval);
    primitives.remove(primitiveObjects.value);
    primitiveObjects.value = prim;
}, cylindervaluedelay);

Cesium的几何结构目前针对静态数据进行了优化。一些属性(如可视性、颜色和材料)可以动态更改，但是实际修改几何形状的项(如圆柱体高度)需要您删除原语并重新计算几何形状。您看到的闪烁是默认情况下异步原语创建的结果。有两种方法可以做到你想要的。

  1. 通过将[options.asynchronous: false传递给Primitive构造函数来禁用异步原语创建。这意味着当您添加一个新的原语时，Cesium在准备好之前不会渲染。对于一两个物体，你不会注意到任何东西。对于许多对象，它将锁定浏览器，直到一切就绪。

  2. 第二个选择是添加你的新原语(不删除旧的)，然后每一帧，检查你的新原语的_state属性(我认为这是公共API的一部分，但显然它不是)。当_state等于Cesium.PrimitiveState.COMPLETE时，你可以安全地删除旧的原语，并保证新的原语将渲染(因此没有闪烁)。

我认为我们有一个bug/特性请求公开暴露状态变量或以其他方式通知当原语准备好了;但在可预见的未来，使用_state应该没问题。我将更新这个问题，如果我们很快添加一个正式的方式。

希望对你有帮助。

编辑:因为需要更多的帮助;这里有一个完整的例子。您可以使用此链接将以下代码复制并粘贴到Sandcastle中。

基本上它使用场景。preender事件而不是超时(在这里，preender几乎总是更好的答案)。另外，如果在旧的更新完成处理之前收到新的更新，那么在计算新的更新之前删除旧的更新是很重要的。如果你还有问题，请告诉我。

require(['Cesium'], function(Cesium) {
    "use strict";
    var widget = new Cesium.CesiumWidget('cesiumContainer');
    var ellipsoid = widget.scene.globe.ellipsoid;
    var lon = 0;
    var lat = 0;
    var cylinderradius = 30000;
    var length = 10000000;
    var cylinderslices = 32;
    var newPrimitive;
    var currentPrimitive;
    //This function creates a new cylinder that is half the length of the old one.
    function decreaseLength() {
        //If there's a pending primitive already, remove it.
        if(Cesium.defined(newPrimitive)){
            widget.scene.primitives.remove(newPrimitive);
        }
        length /= 2;
        var cylinderGeometry = new Cesium.CylinderGeometry({
            length : length,
            topRadius : cylinderradius,
            bottomRadius : cylinderradius,
            slices: cylinderslices,
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
        });
        var cylinder = new Cesium.GeometryInstance({
            geometry: cylinderGeometry,
            modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lon, lat))),
                                                              new Cesium.Cartesian3(0.0, 0.0, length * 0.5)),
            attributes: {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
            },
            id: "Cylinder1"
        });
        newPrimitive = new Cesium.Primitive({
            geometryInstances : cylinder ,
            appearance : new Cesium.PerInstanceColorAppearance({
                closed : false,
                translucent: true,
                flat: false,
                faceForward: true
            }),
            allow3DOnly: true,
            vertexCacheOptimize: true,
            allowPicking: true,
            releaseGeometryInstances: false
        });
        //We add the new cylinder immediately, but don't remove the old one yet.
        widget.scene.primitives.add(newPrimitive);
    }
    //Create the initial cylinder.
    decreaseLength();
    //Subscribe to the preRender event so we can check the primitive every frame.
    widget.scene.preRender.addEventListener(function(scene, time) {
        //Remove the old cylinder once the new one is ready.
        if(Cesium.defined(newPrimitive) && newPrimitive._state === Cesium.PrimitiveState.COMPLETE){
            if(Cesium.defined(currentPrimitive)){
                widget.scene.primitives.remove(currentPrimitive);
            }
            currentPrimitive = newPrimitive;
            newPrimitive = undefined;
        }
    });
    Sandcastle.addToolbarButton('Decrease Length', decreaseLength);
    Sandcastle.finishedLoading();
});
相关文章：