How to add frustum to 3D Tiles BIM?

CesiumJS
1

I am completely new to Cesium and GIS, I managed to get 3D Tiles BIM working on my project, however now I would like to add a camera frustum.

I have not find any tutorial to do that, can I have some help starting for exemple with the project in sandcastle : Cesium Sandcastle ?

2

Do you have any more info on what you want to do? What do you mean adding a camera frustrum, as different from the camera in the Cesium viewer? Do you mean additional cameras?

Cheers,

Alex

3

Hi Alex,

Thank you for your answer and sorry for not being clear enough.

What I want to achieve looks like that, draw frustum cone inside 3D tile model in order to show a camera field of view .

frustum

1 Like
4

Gotcha. :slight_smile: Well, there’s a number of options, from drawing these with entities to rendered models, etc. Do each frustrum follow discrete parameters of the camera, or are they generic indicators? Ie. are the frustrums to be exactly modelled to the type of camera and lenses, etc, or are they more generic in nature?

For entities, there’s basic shapes and such, and I guess a basic transform to fit them to pitch/yaw/tilt of a camera. I guess this is part of your problem? If you only need indicators the simpler approach is to create the frustum as a model, and import it and then transform as needed (I have code for the latter I can share if that’s your approach).

Cheers,

Alex

1 Like
5

Hi Alex,

The desired frustums are generic indicators only to indicate where the camera is looking at.
Optionally if I could set the range of the frustum, it would be great since some camera could be long range cameras
Maybe as first stage indeed having a static model to be loaded and then only transform the model according to pitch/yaw/tilt should be enough, then I would really be happy if you could share your piece of code for this.

Thanx a lot

6

Hiya,

Well, start by defining your model;

// given an object camera { position [Cartesian3], heading [degrees], pitch [degrees], roll [degrees] }

frustrum = {
        model: {
          uri: '/assets/frustrum_model.glb',
          minimumPixelSize: 25,
          maximumScale: 100
        },
        orientation: Cesium.Transforms.headingPitchRollQuaternion( camera.position, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(camera.heading - 90), Cesium.Math.toRadians(camera.pitch), Cesium.Math.toRadians(camera.roll)))
      }

viewer.entities.add( frustrum );

There’s plenty of parameters in the model to play with scale and constraints, the doco have more of them. If you want to have the cone different from the camera itself you might split it into two models, and try scaling only the cone part to whatever parameters you’ve got. But yeah, that’s the basics. You may have to tweak the “- 90” on heading depending on how the model is drawn to some local coordinate system, you might have to flip it, turn it, and so on.

I’d start there. Try uploading your frustrum model into Cesium Ion, and create a Sandcastle with your code so we all can chip in and help as we go along.

Cheers,

Alex

1 Like
7

Hi Alex,

It may take some time for me to get the cone’s 3D model but as soon as I have it I will give it a try and upload it in Cesium Ion in order it to be easier to help me.

Thanx,
Moussa

8

Hi Alex,

I have put my 3D model in ion (it is a basic cone) and have tried to add the cone to the 3D Tile model as an entity but I am note seeing the cone, you can see my code here

This is how I do to add the cone :

var promise = Cesium.IonResource.fromAssetId(764611)
  .then(function (resource) {
    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-1.33, 0.6, 13.19),
      model: {
        uri: resource,
      },
    });
    //viewer.trackedEntity = entity;
  })
  .otherwise(function (error) {
    console.log(error);
  });

The given coordinates (-1.33, 0.6, 13.19) are pointing here (the read circle) :

3d-tile
3d-tile1001Ă—560 82.3 KB

9

Hiya,

Well, a few things here, but the first one is that I think your position isn’t what you think it is (it looks like radians, while the function takes in degrees). If you try this code, you’ll see (or, rather, you won’t see) a sphere where you think it goes;

var pos = Cesium.Cartesian3.fromDegrees(-1.33, 0.6, 13.19);
var rad = 20;
viewer.entities.add({
      position: pos,
      ellipsoid: {
        radii: new Cesium.Cartesian3(rad, rad, rad),
        fill: false,
        outline: true,
        outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
        outlineWidth:3.0,
        slicePartitions: 20,
        stackPartitions: 25,
    }
});

Once you actually see the sphere you can see if you can get the model there.

Cheers,

Alex