How to move ClippingPlane to a specific position?

CesiumJS
1

Hi, I’m creating 6 ClippingPlanes (a box with 6 surfaces) in a ClippingPlaneCollection for Cesium3DTileset.The tileset gets a large range like 50km length * 50km width.I want the plane box move to the position I clicked.

I’ve tried adjusting the distance of every plane to make them look like in the center of new position.But that would never work cause the range is large and the globe is an ellipsoid. With the clicked position farther and farther away from the center of tileset (which is the origin of clipping planes), the offset grows larger and larger.

I’ve also tried using modelMatrix in the ClippingPlaneCollection to rotate them around a vertical axis of clicked point and center of tileset.But the planes are always at somewhere near the center of tileset.I don’t know whats wrong in my code.

Here’s the code.

/*the center of 3dTileset*/
const tileSetCenterCartesian3 = this.tileSet.boundingSphere.center
/*the projection of mouse-clicked position on screen.*/
this.clickedCartesian3 = this.viewer.scene.pickPosition(new Cartesian2(e.x, e.y));

this.tileSet.clippingPlanes.modelMatrix =
      Matrix4.fromTranslationQuaternionRotationScale(
          Cartesian3.ZERO,
          Quaternion.fromAxisAngle(
              Cartesian3.cross(this.clickedCartesian3, tileSetCenterCartesian3, new Cartesian3()),
              Math.acos(
                  Cartesian3.dot(this.clickedCartesian3, tileSetCenterCartesian3) /
                      Cartesian3.distance(new Cartesian3(0, 0, 0), this.clickedCartesian3) /
                      Cartesian3.distance(new Cartesian3(0, 0, 0), tileSetCenterCartesian3)
              )
          ),
          Cartesian3.ONE
      );

Can someone help me out please?

1 Like