Place markers on top of 3D Tiles model

CesiumJS
1

Hi there,

I'm wondering if it's possible to place a marker / pin on top of a Cesium 3D tiles model?

Can someone please point me in the right direction?

Thanks for the help!

2

Check out the annotate ability in the 3D Tiles Sandcastle demo. Is that what you had in mind or something else?

annotate.PNG

3

That definitely looks close. How do I do this in the Sandcastle demo? I'm looking at it now and it's not obvious, also when I press "Style with info" it crashes.

4

This is a more self-contained example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var canvas = viewer.canvas;

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

var annotations = scene.primitives.add(new Cesium.LabelCollection());

var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({

url : '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset/'

}));

tileset.readyPromise.then(function(tileset) {

var boundingSphere = tileset.boundingSphere;

viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

});

handler.setInputAction(function(movement) {

// Add annotation showing the height at the click location

var feature = scene.pick(movement.position);

if (Cesium.defined(feature) && scene.pickPositionSupported) {

    var cartesian = scene.pickPosition(movement.position);

    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

    var height = cartographic.height.toFixed(2) + ' m';

    annotations.add({

        position : cartesian,

        text : height,

        horizontalOrigin : Cesium.HorizontalOrigin.LEFT,

        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

        eyeOffset : new Cesium.Cartesian3(0.0, 0.0, -1.0)

    });

}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

``

We have some improvements coming to the 3D Tiles sandcastle which should fix that bug. Thanks for letting us now.