Create entity on a 3D tileset

[DavidDvpt]

hi, i’m using Cesium with Resium react wrapper.
i’ve created a map with 3D tiles and a selected poligon and point. but sometimes, the point is under the tileset layer because my entity is linked on the View and not 3D Layer

my viewer code :

 <Viewer
      ref={cesiumViewer}
      full
      animation={false}
      timeline={false}
      homeButton={false}
      baseLayerPicker={false}
      sceneModePicker={false}
      onClick={handleMapClick}
      geocoder={false}
      style={{
        width: '100%',
        height: '100vh',
      }}
      infoBox={false}
      useBrowserRecommendedResolution={true}
    >
      <ResiumFlyTo clicked3dPoint={center} />

      <Cesium3DTileset url={tilesetUrl} />
      <SelectedPlotEntity />

      <ClickedPoint center={center} />
    </Viewer>

my entity code :

<Entity
      position={getCartesian3FromDegrees(parcelle.lng, parcelle.lat, 200)}
      // pin image display
      billboard={{
        image: entityPin,
        show: true,
        eyeOffset: new Cartesian3(0.0, 0.0, 0.0),
        horizontalOrigin: HorizontalOrigin.CENTER,
        verticalOrigin: VerticalOrigin.BOTTOM,
        alignedAxis: Cartesian3.ZERO,
        width: 30,
        height: 46,
      }}
      // plot id display
      label={{
        text: `${parcelle?.parcelleId?.substring(5) ?? ''}`,
        font: '14pt Lato',
        style: LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: VerticalOrigin.TOP,
        pixelOffset: new Cartesian2(0, -80),
      }}
    >
      {/* plot polygon display */}
      <SelectedPlotPolygon />

      {/* line ground to pin */}
      <PolylineGraphics
        material={Color.WHITE.withAlpha(0.5)}
        positions={[
          getCartesian3FromDegrees(parcelle?.lng, parcelle?.lat, 0),
          getCartesian3FromDegrees(parcelle?.lng, parcelle?.lat, 200),
        ]}
      />
    </Entity>

the good display on screen is like this, we can see the point (red marker)

but on this second city the point markers are between layers but polygon is displayed on the good layer

the first image is Bayonne - France and the second is Lyon - France
i think i must link points on scene or 3D tileset but i don’t know how

any ideas?

thanks

[DavidDvpt]

i’ve fixed the problem after removing resium and create full cesiumjs instance in a simple react component.
i’ve used TerrainProvider to take the height of a clicked point, then use it to create an entity on scene like this :

async function createTerrainProvider(latLng: StreetViewLatLngType) {
  return await Cesium.createWorldTerrainAsync().then(function (terrainProvider) {
    return terrainProvider;
  });
}
async function getTerrainInfosFromLatLng(
  terrain: Cesium.TerrainProvider,
  lat: number,
  lng: number
) {
  const positions = [Cesium.Cartographic.fromDegrees(lng, lat)];

  // Query the terrain height at the given positions
  return Cesium.sampleTerrainMostDetailed(terrain, positions).then((result) => {
    return result[0].height;
  });
}

and use it like this :

        // get clicked3dPoint height
        const height = await getTerrainInfosFromLatLng(
          terrainProvider,
          clicked3dPoint.lat - 0.005,
          clicked3dPoint.lng
        );
        // calculate initial camera position
        const initialPosition = getCartesian3FromDegrees(
          clicked3dPoint.lng,
          clicked3dPoint.lat - 0.005,
          height + 600
        );

working fine

[1132990649]

However, the entities drawn in this way are still linked with the View. When the perspective is moved, the parallax effect will still occur with the 3dtiles. When the camera is moved, the relative position of the entity and the 3dtiles will change. The closer the distance, the greater the change. My temporary solution is to enable collision detection (enableCollision: true) when loading 3dtiles, but this will bring a lot of performance problems. Is there any good idea to solve this problem? I just want to draw some points on the 3dtiles.

[Luke_McKinstry]

Hi @1132990649 ,

Thanks for your post and welcome to the Cesium community.

Is my understanding correct that you are trying to plot an entity on a 3DTileset? If so, we have this sandcastle example which may be helpful which shows how to plot entities on top of 3DTilesets and set the clamping parameters such that they are visible.

If this example does not address your use case, is it possible for you to provide us a sandcastle example showing your code and data so that we can determine the issue?

Thanks and I hope we can help resolve your issue soon.
Best,
Luke

[1132990649]

Hi,yes, take this sandcastle as an example. When my camera is closer to the entity, the position of the entity relative to the 3dtiles will be offset when I move the perspective (because the entity is drawn on the terrain). The only way I have found to avoid offset is to configure Cesium3DTileset.fromUrl(tilesetUrl, {
enableCollision: true}) when loading 3dtiles, that is, to enable collision detection, but this will bring significant performance issues.