JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World!</title>
<script src="Cesium/Cesium.js"></script>
<style>
@import url(Cesium/Widgets/widgets.css);
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="js/test.js"></script>
</body>
</html>
JavaScript
//test.js
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
var viewer;
var pipesManager;
function startup(Cesium) {
viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.globe.depthTestAgainstTerrain = false;
var positions = [Cesium.Cartesian3.fromDegrees(15, 80, -20), Cesium.Cartesian3.fromDegrees(15.5, 80, -20)];
var instance = new Cesium.GeometryInstance({
geometry : new Cesium.PolylineVolumeGeometry({
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
polylinePositions : positions,
shapePositions: computeCircle(5, 8)
}),
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
}
});
var primitive = new Cesium.Primitive({
geometryInstances : instance,
appearance : new Cesium.PerInstanceColorAppearance({
translucent : false
})
});
viewer.scene.primitives.add(primitive);
function computeCircle(radius, definition) {
var positions = [];
var step = 360/definition;
for (var i = 0; i < 360; i+=step) {
var radians = Cesium.Math.toRadians(i);
positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
}
return positions;
}
var cameraPos = new Cesium.Cartesian3(1073639.7144648745, 287480.1251882551, 6259649.849894111);
var direction = new Cesium.Cartesian3(-0.6622673000198468, 0.7188684383273912, -0.21125858965060018);
var up = new Cesium.Cartesian3(-0.022334456192881352, 0.2628879618773839, 0.964567826317295);
viewer.scene.camera.flyTo({
destination: cameraPos,
duration: 0,
orientation: {
direction: direction,
up: up
}
});
}