Thiết kế website giá rẻ

Question

What happened?

I am trying to create a visualization in CesiumJS where:

1.  There is a line connecting two geographic points.
2.  There is a plane passing through the first point and perpendicular to the line.
3.  There is another plane passing through the line and perpendicular to the first plane.

However, despite following the steps, the second plane does not seem to correctly pass through the line as expected. Below are the coordinates and my implementation steps.

Coordinates:

•   Point 1: (118.5329951, 37.0466284)
•   Point 2: (118.533065, 37.0466414)

enter image description here

Reproduction steps

Calculate the direction vector from Point 1 to Point 2.
Create the first plane with a normal vector perpendicular to the direction vector.
Create the second plane with a normal vector perpendicular to both the direction vector and the first plane’s normal vector.

Sandcastle example

Example in Sandcastle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium Plane and Extended Normal Vector Example</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js" integrity="sha512-Q7HOppxoH0L2M7hreVoFCtUZimR2YaY0fBewIYzkCgmNtgOOZ5IgMNYxHgfps0qrO1ef5m7L1FeHrhXlq1I9HA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/earcut.min.js"></script>

    <link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
    <script>
      
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: Cesium.createWorldTerrain()
        });

        viewer.scene.globe.depthTestAgainstTerrain = false

               // Define the coordinates of the two points
        const point1 = Cesium.Cartesian3.fromDegrees(118.5329951, 37.0466284);
        const point2 = Cesium.Cartesian3.fromDegrees(118.533065, 37.0466414);

        // Add the first point
        viewer.entities.add({
            position: point1,
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED
            }
        });

        // Add the second point
        viewer.entities.add({
            position: point2,
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED
            }
        });

        // Add a line connecting the two points
        viewer.entities.add({
            polyline: {
                positions: [point1, point2],
                width: 5,
                material: Cesium.Color.YELLOW
            }
        });

        // Calculate the direction vector from point1 to point2
        const direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3());
        Cesium.Cartesian3.normalize(direction, direction);

        // Calculate a vector that is perpendicular to the direction vector (first plane normal vector)
        const up = Cesium.Cartesian3.normalize(point1, new Cesium.Cartesian3());
        const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());
        Cesium.Cartesian3.normalize(perpendicular, perpendicular);

        // Define the first plane that is perpendicular to the direction vector and passes through point1
        const firstPlane = viewer.entities.add({
            position: point1,
            plane: {
                dimensions: new Cesium.Cartesian2(100.0, 100.0),
                material: Cesium.Color.GREEN.withAlpha(0.5),
                plane: new Cesium.Plane(perpendicular, 0.0),
            }
        });

        // Calculate the normal vector for the second plane which is perpendicular to both the first plane and the direction vector
        const secondPlaneNormal = Cesium.Cartesian3.cross(perpendicular, direction, new Cesium.Cartesian3());
        Cesium.Cartesian3.normalize(secondPlaneNormal, secondPlaneNormal);

        // Define the second plane that is perpendicular to the first plane and passes through the line
        const secondPlane = viewer.entities.add({
            position: point1,
            plane: {
                dimensions: new Cesium.Cartesian2(100.0, 100.0),
                material: Cesium.Color.BLUE.withAlpha(0.5),
                plane: new Cesium.Plane(secondPlaneNormal, 0.0),
            }
        });

        // Fly to the location of the entities
        viewer.zoomTo(viewer.entities);
    </script>
    </script>
</body>
</html>

Environment

Browser: Chrome 126.0.6478.183
CesiumJS Version: 1.119
Operating System: MacOS 14.5 & Windows 11

It seems to me that the yellow line segments should belong to the blue plane, and now it looks like they don’t

Thiết kế website giá rẻ

Danh mục

How to Create Perpendicular Planes and Line Intersection in CesiumJS?

What happened?

Reproduction steps

Sandcastle example

Environment