It's not really built for animation in that sense but you can effectively create what your after by creating a graphic and then creating your own animation frameHandler by using something like a setInterval() that regular updates the geometry of that graphic.
A really quick rough example that I modified from the code sample looks like:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Add Graphics to a SceneView | Sample | ArcGIS Maps SDK for JavaScript 4.26
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/geometryEngine"
], (Map, SceneView, GraphicsLayer, Graphic, geometryEngine) => {
const map = new Map({
basemap: "hybrid"
});
const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
// autocasts as new Camera()
position: {
// autocasts as new Point()
x: -0.17746710975334712,
y: 51.44543992422466,
z: 1266.7049653716385
},
heading: 0.34445102566290225,
tilt: 82.95536300536367
}
});
/*********************
* Add graphics layer
*********************/
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
/*************************
* Add a 3D point graphic
*************************/
// London
const point = {
type: "point", // autocasts as new Point()
x: -0.178,
y: 51.48791,
z: 1010
};
const markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(pointGraphic);
/****************************
* Add a 3D polyline graphic
****************************/
const polyline = {
type: "polyline", // autocasts as new Polyline()
paths: [
[-0.178, 51.48791, 0],
[-0.178, 51.48791, 1000]
]
};
const lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
graphicsLayer.add(polylineGraphic);
/***************************
* Add a 3D polygon graphic
***************************/
const polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[-0.184, 51.48391, 400],
[-0.184, 51.49091, 500],
[-0.172, 51.49091, 500],
[-0.172, 51.48391, 400],
[-0.184, 51.48391, 400]
]
};
const fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
const polygonGraphic = new Graphic({
attributes: {
title: "square"
},
geometry: polygon,
symbol: fillSymbol
});
graphicsLayer.add(polygonGraphic);
view.when(() => {
let timerControl = setInterval(() => {
const toRotate = graphicsLayer.graphics.items.find(graphic => graphic.attributes?.title === 'square')
const rotatedGeometry = geometryEngine.rotate(toRotate.geometry, 2)
toRotate.geometry = rotatedGeometry;
}, 100);
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
The key part being this:
let timerControl = setInterval(() => {
const toRotate = graphicsLayer.graphics.items.find(graphic => graphic.attributes?.title === 'square')
const rotatedGeometry = geometryEngine.rotate(toRotate.geometry, 2)
toRotate.geometry = rotatedGeometry;
}, 100);
Where I'm running a function every 100ms that calls geometryEngine to rotate a geometry by 2 degrees.
James from www.landkind.com
