Misunderstanding of animation without CZML basics in Cesium

CesiumJS
1

Hello,

I’d like to animate 3d objects and polylines without CZML. But I couldn’t find samples, tutorials or fragments of actual code related to this. Help on AnimationCollection, dynamic objects doesn’t allow to build a complete picture, because it doesn’t explain use of them.

I tried to modify Sandcastle Simple Polyline example changing polyline positions on timer, also tried to use own render loop, but all without success.

Could somebody push me in right direction? For example, how to animate a polyline with changing control point (CP) positions and (preferably, if possible) CP number? Or may be: what minimal steps are necessary to animate something?

Thanks in advance,

Alexei

2

The Polyline class lets you set the positions of the line to a new array of Cartesian positions.

Here’s a Sandcastle example that you can paste over top of the Polyline example that adds random new positions to a polyline periodically.

require([‘Cesium’], function(Cesium) {

“use strict”;

function createPrimitives(scene, ellipsoid) {

var primitives = scene.primitives;

var polylines = new Cesium.PolylineCollection();

primitives.add(polylines);

var position1 = Cesium.Cartographic.fromDegrees(-120.0, 40.0);

var position2 = Cesium.Cartographic.fromDegrees(-110.0, 30.0);

var positions = [position1, position2];

// A simple polyline with two points.

var polyline = polylines.add({

positions : ellipsoid.cartographicArrayToCartesianArray(positions),

material : Cesium.Material.fromType(‘Color’, {

color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)

})

});

function getRandom(min, max) {

return Math.random() * (max - min) + min;

}

setInterval(function() {

var lastPosition = positions[positions.length - 1];

var newPosition = lastPosition.clone();

newPosition.latitude += getRandom(-0.1, 0.1);

newPosition.longitude += getRandom(-0.1, 0.1);

positions.push(newPosition);

polyline.positions = ellipsoid.cartographicArrayToCartesianArray(positions);

}, 500);

}

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

createPrimitives(viewer.scene, viewer.centralBody.ellipsoid);

Sandcastle.finishedLoading();

});

3

Scott, thanks a lot!

4

A small note to say that as explained here ( https://groups.google.com/forum/#!msg/cesium-dev/j092lcSvSvI/kgtMdMhve1IJ ) ,
the line
createPrimitives(viewer.scene, viewer.centralBody.ellipsoid);
should be replaced with
createPrimitives(viewer.scene, viewer.scene.globe.ellipsoid);
in order to work

5

hi, i tried your demo successfully, but something wrong when i change the material to an Image, fe:

var material = new Cesium.Material({

fabric : {

type : ‘Image’,

uniforms : {

image: 'textures/dot.png’

}

}

})

Do you know where is wrong with my little bit change? I expect the right way to set this material to Image

在 2014年4月23日星期三 UTC+8下午10:51:45，Scott Hunter写道：

6

Hi Sisi,

Setting the material should be a separate issue from the animation. To use an image as a material, you can copy this sandcastle example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Rectangle.html&label=

Hope that helps,

  • Rachel