I’m rendering a 3D point cloud. I’m only interested in the 3D model itself, there isn’t any geolocation data attached.
I’ve made a simple scene but the mouse rotation controls are unintuitive IMO. Id like to either:
1 - Make clicking and dragging the mouse rotate the model (as Potree does).
2 - Expose a widget that users can click on to rotate the scene.
Can either of these be done?
Im confused by the docs, many link to a sandcastle page but these but I get an error trying to load them eg Cesium Sandcastle
Error, first part of bucket-requirejs.html must match first part of bucket.html exactly.
Here is my code:
async function init() {
// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = YOUR_ACCESS_TOKEN_HERE;
const viewer = new Cesium.Viewer("cesiumContainer", {
skyBox: false,
globe: false,
baseLayerPicker: false,
navigationHelpButton: true, // Shows navigation instructions
navigationInstructionsInitiallyVisible: false, // Shows help overlay on start
sceneModePicker: false, // Allows switching between 3D/2D modes
navigationWidget: true, // Add navigation widget
});
// Enable screen space camera controller
viewer.scene.screenSpaceCameraController.enableRotate = true; // Enable rotation
viewer.scene.screenSpaceCameraController.enableTilt = true; // Enable tilting
viewer.scene.screenSpaceCameraController.enableTranslate = true; // Enable panning
viewer.scene.screenSpaceCameraController.enableZoom = true; // Enable zoom
viewer.scene.backgroundColor = Cesium.Color.WHITE;
try {
const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(
YOUR_ASSET_ID_HERE,
{
//This tileset doesn't have a location, so we're using a modelMatrix to place it at 0, 0 instead of drawing at the center of the earth
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(0, 0)
),
}
);
viewer.scene.primitives.add(tileset);
await viewer.zoomTo(tileset);
// Apply the default style if it exists
const extras = tileset.asset.extras;
if (
Cesium.defined(extras) &&
Cesium.defined(extras.ion) &&
Cesium.defined(extras.ion.defaultStyle)
) {
tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
}
// Add this to change point cloud color (if needed)
tileset.style = new Cesium.Cesium3DTileStyle({
color: 'color("blue")', // You can use any CSS color name or RGB/RGBA values
});
} catch (error) {
console.log(error);
}
}
init();