Minimalist Example

CesiumJS
1

Prior to 1.0 there was a sandcastle example called Minimalist that allowed the developer to create the globe without the widget or viewer. This was the approach that I was using. I am not sure, but it seems as if it is no longer working. I also do not see this example in sandcastle. Can someone confirm this?

2

I am also running into this issue. Has this option been removed for 1.0? (I sure hope not :slight_smile: )

3

The minimalist approach is still available. Here’s the working code that you can paste into Sandcastle:

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html

var canvas = document.createElement(‘canvas’);

canvas.className = “fullSize”;

document.getElementById(‘cesiumContainer’).appendChild(canvas);

var scene = new Cesium.Scene({

canvas : canvas

});

var primitives = scene.primitives;

scene.globe = new Cesium.Globe();

var imageryUrl = ‘…/…/…/Source/Assets/Textures/’;

var imageryProvider = new Cesium.TileMapServiceImageryProvider({

url : imageryUrl + ‘NaturalEarthII’

});

scene.imageryLayers.addImageryProvider(imageryProvider);

scene.skyAtmosphere = new Cesium.SkyAtmosphere();

var skyBoxBaseUrl = imageryUrl + ‘SkyBox/tycho2t3_80’;

scene.skyBox = new Cesium.SkyBox({

sources : {

positiveX : skyBoxBaseUrl + ‘_px.jpg’,

negativeX : skyBoxBaseUrl + ‘_mx.jpg’,

positiveY : skyBoxBaseUrl + ‘_py.jpg’,

negativeY : skyBoxBaseUrl + ‘_my.jpg’,

positiveZ : skyBoxBaseUrl + ‘_pz.jpg’,

negativeZ : skyBoxBaseUrl + ‘_mz.jpg’

}

});

function animate() {

// INSERT CODE HERE to update primitives based on changes to animation time, camera parameters, etc.

}

function tick() {

scene.initializeFrame();

animate();

scene.render();

Cesium.requestAnimationFrame(tick);

}

tick();

// Prevent right-click from opening a context menu.

canvas.oncontextmenu = function () {

return false;

};

///////////////////////////////////////////////////////////////////////////

// Example resize handler

var onResize = function () {

var width = canvas.clientWidth;

var height = canvas.clientHeight;

if (canvas.width === width && canvas.height === height) {

return;

}

canvas.width = width;

canvas.height = height;

scene.camera.frustum.aspectRatio = width / height;

};

window.addEventListener(‘resize’, onResize, false);

onResize();

4

The minimalist example was removed for 2 reasons.

  1. We felt it was a confusing example to have in Sandcastle, we didn’t want to expose new users to needless complexity.

  2. We expect must users to use CesiumWidget or Viewer as the basis for their map.

There’s also a small possibility that some of the objects used in the minimalist example were marked as private (because we plan on breaking changes for them in the future); but I don’t think that’s the case here. You can definitely still do everything that the minimalist example did with the newly released 1.0.

I’m sure there may be some use cases I’m not thinking of that could lead a user to avoid CesiumWidget (maybe trying to cut down on overall file size?) What are the reasons you’ve chosen not to use CesiumWidget?

5

Thanks for the quick response! Much appreciated.

6

Thanks for the sample code. The difference was prior to 1.0 I was using:
var scene = new Cesium.Scene(canvas);
and now I needed to change it to:
var scene = new Cesium.Scene({
    canvas : canvas
});

My initial reason for using the minimalist approach was to make it so the user didn't run into the axis when moving the globe around. I have just stuck with using it since then.

7

For unconstrained axis, you can use:

var viewer = new Cesium.Viewer(‘cesiumContainer’);
viewer.scene.camera.constrainedAxis = undefined;

Or without the extra widgets:

var widget = new Cesium.CesiumWidget(‘cesiumContainer’);
widget.scene.camera.constrainedAxis = undefined;

–Ed.