rotating cone geometry

CesiumJS
1

I want to rotate the cone geometry by certain angle. I am using geometryInstance to add geometry to scene. After that I have set the modelMatrix of geometryInstance to rotation matrix but It does not rotate. Please tell me how can I rotate the cone

Heare is my code

  var viewer = new Cesium.CesiumWidget(container);
    this.viewer = viewer;
    var scene = viewer.scene;
    var primitives = scene.getPrimitives();
    var ellipsoid = viewer.centralBody.getEllipsoid();

    var length = 40000.0;
    var positionEllipsoid = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(72.0, 32.0));

    //var rotMatrix = new Cesium.Matrix3.fromRotationX(0);
    //var modelMatrix = new Cesium.Matrix4.fromRotationTranslation(rotMatrix, positionEllipsoid);
    //var angleRad = 3.14 * 45 / 180;
    // var rotMatrix = new Cesium.Matrix3.fromRotationY(angleRad);
    //var modelMatrix = new Cesium.Matrix4.fromRotationTranslation(rotMatrix, positionEllipsoid);
    var modelMatrix = new Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(positionEllipsoid),
    new Cesium.Cartesian3(0.0, 0.0, length * 0.5));

    //Create Geometry
    var coneGeometry = new Cesium.CylinderGeometry({
        length: length,
        topRadius: 0.0,
        bottomRadius: 20000.0,
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    });

    //Create Geometry Instance
    var coneGeometryInstance = new Cesium.GeometryInstance({
        id: 'RedCone',
        geometry: coneGeometry,
        modelMatrix: modelMatrix,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        }
    });

    //Add geometry to scene
    var primitive;
    primitives.add(primitive = new Cesium.Primitive({

        geometryInstances: coneGeometryInstance,
        appearance: new Cesium.PerInstanceColorAppearance({
            closed: true,
            translucent: false
        })
    }));

    var counter = 90;
    setInterval(function () {
        
        if (counter >= 360) {
            counter = 0;
        }
        var angleRad = 3.14 * counter / 180;
        var rotMatrix = new Cesium.Matrix3.fromRotationY(angleRad);
        var modelMatrix = new Cesium.Matrix4.fromRotationTranslation(rotMatrix, positionEllipsoid);
        coneGeometryInstance.modelMatrix = modelMatrix;
        counter += 5;
        
    }, 100);

2

Hello,

Updating the modelMatrix on the geometry instance doesn’t have any effect after the instance is added primitives. Instead, you can update the primitive.modelMatrix.

Also, the modelMatrix you were creating in your setInterval function wasn’t correct. You need to include the eastNorthUpToFixedFrame transform. This transform places the center of the geometry on the surface of the ellipsoid at the position specified. You can multiply this transform by the rotation and translation matrices to get the effect you’re looking for.

If you’re not very familiar with matrix transforms, I recommend watching the lectures for Eric Haines’ free Interactive 3D Graphics course on Udacity. (https://www.udacity.com/course/cs291) Lessons 4 and 5 are all about matrices and transforms, I found it to be very helpful.

I pasted your modified code below.

Best Regards,

-Hannah

var viewer = new Cesium.CesiumWidget(‘cesiumContainer’);

var scene = viewer.scene;

var primitives = scene.getPrimitives();

var ellipsoid = viewer.centralBody.getEllipsoid();

var length = 400000.0;

var positionEllipsoid = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-105.0, 40.0));

//Create Geometry

var coneGeometry = new Cesium.CylinderGeometry({

length: length,

topRadius: 0.0,

bottomRadius: 200000.0,

vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT

});

//Create Geometry Instance

var coneGeometryInstance = new Cesium.GeometryInstance({

id: ‘RedCone’,

geometry: coneGeometry,

attributes: {

color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)

}

});

//Add geometry to scene

var primitive;

primitives.add(primitive = new Cesium.Primitive({

geometryInstances: coneGeometryInstance,

appearance: new Cesium.PerInstanceColorAppearance({

closed: true,

translucent: false

})

}));

var counter = 90;

setInterval(function () {

if (counter >= 360) {

counter = 0;

}

var angleRad = 3.14 * counter / 180;

var rotMatrix = new Cesium.Matrix3.fromRotationY(angleRad);

var modelMatrix = Cesium.Matrix4.multiply(

Cesium.Transforms.eastNorthUpToFixedFrame(positionEllipsoid),

Cesium.Matrix4.fromRotationTranslation(rotMatrix, new Cesium.Cartesian3(0.0, 0.0, length * 0.5)));

primitive.modelMatrix = modelMatrix;

counter += 5;

}, 100);