How do I rotate a wall in CesiumJS?

Question

    const coordinates1 =
           [103.63489648850312,29.78399543240111,103.63494150663065,29.78333590922089,103.635553885046,29.783280635414627,103.63574287140266,29.783196010558108,
            103.63620765390426,29.783160361213504,103.63656871959176,29.783150670758086,103.63687253364753,29.783122359794692,
            103.63703689114861,29.783125411914874,103.63722310083804,29.78321706433821,103.63729821843017,29.78323540821292,
            103.63693308223041,29.783680207069843,103.63629639553365,29.78406369054707,103.635696188705 ,29.7842438403505,
            103.63532376388201,29.784315674969854,103.63487784803836,29.7843448268703,103.63489648850312,29.78399543240111]

            let heading = Cesium.Math.toRadians(90)
            let pitch = Cesium.Math.toRadians(45)
            let roll = Cesium.Math.toRadians(45)
            let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
            var center = Cesium.Cartesian3.fromDegrees(103.63722310083804,29.78321706433821)
            let orientation = Cesium.Transforms.headingPitchRollQuaternion(center, hpr)

            var maximumHeights = new Array(coordinates1.length).fill(16);
            var minimumHeights = new Array(coordinates1.length).fill(0);
            var wall =  viewer.entities.add({
                positions: center,
                orientation:orientation,
                wall:{
                    positions: Cesium.Cartesian3.fromDegreesArray(coordinates1),
                    maximumHeights: maximumHeights,
                    minimumHeights: minimumHeights,
                    outline:false,
                    material : Cesium.Color.BLUE.withAlpha(0.4),
                }
            })
            console.log(wall)

I've tried setting it to rotate in orientation, but I don't understand what's wrong? Can someone tell me what to do?

Answer 1

First of all, you have a small bug in the above code. The heights arrays need to be only half as long as what you've provided (one height per lat/lon), so it gets an error unless you divide by 2.

    var maximumHeights = new Array(coordinates1.length / 2).fill(16);
    var minimumHeights = new Array(coordinates1.length / 2).fill(0);

Unfortunately, Cesium's walls don't rotate. This is because walls can be arbitrary length, and conform to the surface of the Earth (or the WGS84 Ellipsoid) and might leave the ground if they were to rotate about a fixed point.

One option might be to send new wall geometry every so often, but this won't work for smooth animation. Cesium uses a background worker thread to calculate positions and new vertices and such things when the wall geometry changes, so it may take multiple animation frames to get everything ready for display. But if you only need a fixed number of rotations, you could compute them all in advance and toggle the wall visibility to animate them without recomputing them, perhaps.

A better option might be to make a simple model of the wall as a glTF model file. This works best for local walls where the Earth's curvature doesn't matter much. It could be done for example in Blender, importing the shape and extruding a bit, and assigning a translucent blue color, then exporting to glTF. Loading the glTF model into Cesium as an entity would give you the option to rotate it using the orientation parameter as you've attempted above. This sort of setup should animate very smoothly, because no new vertices are needed for each different orientation, it's just updating a quaternion each frame.