Cesium中使用Primitive API 創建平面

Cesium中使用Primitive API 創建平面

來自專欄 Cesium開發筆記

Cesium Sandcastle中Entity API創建的Plane有點兒問題

Cesium在前兩個月的版本中新增了Plane這種Geometry類型，然後只給了一個Entity API下的示例。其中按照示例代碼中的寫法，這三個平面分別垂直於x、y、z三個軸。

然而這個示例看著，總讓人有點兒覺得哪兒有點兒不對的感覺。。三個軸的對應關係貌似有問題。。於是，我把他們的原點放在一起，結果就變成了下圖這樣。

Cesium通過Entity API創建的Plane貌似不太好控制姿態。。

使用Primitive API創建一個Plane

Cesium沒有提供Primitive API的PlaneGeometry示例，於是我用Primitive API寫了以下示例，這樣通過ModelMatrix來控制姿態就會方便很多。

var viewer = new Cesium.Viewer(cesiumContainer);var scene = viewer.scene;var dimensions = new Cesium.Cartesian3(400000.0, 300000.0, 1.0);var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.3912, 39.920);var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);var scaleMatrix = Cesium.Matrix4.fromScale(dimensions);var planeModelMatrix = new Cesium.Matrix4();Cesium.Matrix4.multiply(translateMatrix, scaleMatrix, planeModelMatrix);// 創建平面var planeGeometry = new Cesium.PlaneGeometry({ vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,});// 創建平面外輪廓var planeOutlineGeometry = new Cesium.PlaneOutlineGeometry({});var planeGeometryInstance = new Cesium.GeometryInstance({ geometry : planeGeometry, modelMatrix : planeModelMatrix, attributes : { color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)) }});scene.primitives.add(new Cesium.Primitive({ geometryInstances : planeGeometryInstance, appearance : new Cesium.PerInstanceColorAppearance({ closed: true })}));var planeOutlineGeometryInstance = new Cesium.GeometryInstance({ geometry : planeOutlineGeometry, modelMatrix : planeModelMatrix, attributes : { color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0)) }});scene.primitives.add(new Cesium.Primitive({ geometryInstances : planeOutlineGeometryInstance, appearance : new Cesium.PerInstanceColorAppearance({ flat : true, renderState : { lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth) } })}));viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(positionOnEllipsoid, 300000));

接下來創建三個分別垂直x、y、z軸的平面

效果如下圖所示，很顯然，使用Primitive API來控制姿態還是靠譜一點！

代碼如下：

var viewer = new Cesium.Viewer(cesiumContainer);var scene = viewer.scene;var dimensions = new Cesium.Cartesian3(400000.0, 400000.0, 1.0);var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.3912, 39.920);var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);var rotationXMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(-90.0)));var rotationYMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(90.0)));var scaleMatrix = Cesium.Matrix4.fromScale(dimensions);var planeZModelMatrix = new Cesium.Matrix4();Cesium.Matrix4.multiply(translateMatrix, scaleMatrix, planeZModelMatrix);var planeXModelMatrix = new Cesium.Matrix4();Cesium.Matrix4.multiply(translateMatrix, rotationXMatrix, planeXModelMatrix);Cesium.Matrix4.multiply(planeXModelMatrix, scaleMatrix, planeXModelMatrix);var planeYModelMatrix = new Cesium.Matrix4();Cesium.Matrix4.multiply(translateMatrix, rotationYMatrix, planeYModelMatrix);Cesium.Matrix4.multiply(planeYModelMatrix, scaleMatrix, planeYModelMatrix);createPlane(planeZModelMatrix, new Cesium.Color(0.0, 0.0, 1.0, 1.0));createPlane(planeXModelMatrix, new Cesium.Color(1.0, 0.0, 0.0, 1.0));createPlane(planeYModelMatrix, new Cesium.Color(0.0, 1.0, 0.0, 1.0));function createPlane(planeModelMatrix, color) { // 創建平面 var planeGeometry = new Cesium.PlaneGeometry({ vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT, }); // 創建平面外輪廓 var planeOutlineGeometry = new Cesium.PlaneOutlineGeometry({ }); var planeGeometryInstance = new Cesium.GeometryInstance({ geometry : planeGeometry, modelMatrix : planeModelMatrix, attributes : { color : Cesium.ColorGeometryInstanceAttribute.fromColor(color) } }); scene.primitives.add(new Cesium.Primitive({ geometryInstances : planeGeometryInstance, appearance : new Cesium.PerInstanceColorAppearance({ closed: false, translucent: false }) })); var planeOutlineGeometryInstance = new Cesium.GeometryInstance({ geometry : planeOutlineGeometry, modelMatrix : planeModelMatrix, attributes : { color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0)) } }); scene.primitives.add(new Cesium.Primitive({ geometryInstances : planeOutlineGeometryInstance, appearance : new Cesium.PerInstanceColorAppearance({ flat : true, renderState : { lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth) } }) })); }viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(positionOnEllipsoid, 300000));

點擊czm6.com，查看更多內容。

推薦閱讀：