1. A concise explanation of the problem you're experiencing.
Hi,
I installed cesium using webpack as instructed in this tutorial:https://cesiumjs.org/tutorials/cesium-and-webpack. But when I load a Cesium3DTileset it doesn't show up until I'm extremely close to it. I've tried tinkering with every option for the Cesium3DTileset with no avail.
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
import ces from 'cesium/Cesium';
require('cesium/Widgets/widgets.css');
require('./css/main.css');
let viewer = new ces.Viewer('mapContainer',
{
timeline: false,
animation: false,
vrButton: true,
sceneModePicker: false,
projectionPicker:false,
infoBox: false,
selectionIndicator: false,
// terrainProvider :new ces.EllipsoidTerrainProvider({}),
// baseLayerPicker: false,
// imageryProvider: false,
// globe:false,
scene3DOnly: true,
}
);
let pinBuilder = new ces.PinBuilder();
viewer.scene.globe.depthTestAgainstTerrain = false;
//tileset
let tileset = viewer.scene.primitives.add(new ces.Cesium3DTileset({
url : '../Scene/Cesium.json'
}));
let v = viewer;
//tileset position
viewer.entities.add({
name: 'Blank blue pin',
position: new ces.Cartesian3.fromDegrees(lng, lat, height),
billboard: {
image: pinBuilder.fromColor(ces.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: ces.VerticalOrigin.BOTTOM
}
});
//testing other entities and primitives
var blueEllipse = viewer.entities.add({
position: ces.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
name : 'Blue translucent, rotated, and extruded ellipse with outline',
ellipse : {
semiMinorAxis : 150000.0,
semiMajorAxis : 300000.0,
extrudedHeight : 200000.0,
rotation : ces.Math.toRadians(45),
material : ces.Color.BLUE.withAlpha(0.5),
outline : true
}
});
var outlineOnly = viewer.entities.add({
name : 'Yellow ellipsoid outline',
position: ces.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
ellipsoid : {
radii : new ces.Cartesian3(200000.0, 200000.0, 300000.0),
fill : false,
outline : true,
outlineColor : ces.Color.YELLOW,
slicePartitions : 24,
stackPartitions : 36
}
});
// 1. Draw a translucent ellipse on the surface with a checkerboard pattern
var instance = new ces.GeometryInstance({
geometry : new ces.EllipseGeometry({
center : ces.Cartesian3.fromDegrees(-100.0, 20.0),
semiMinorAxis : 500000.0,
semiMajorAxis : 1000000.0,
rotation : ces.Math.PI_OVER_FOUR,
vertexFormat : ces.VertexFormat.POSITION_AND_ST
}),
id : 'object returned when this instance is picked and to get/set per-instance attributes'
});
viewer.scene.primitives.add(new ces.Primitive({
geometryInstances : instance,
appearance : new ces.EllipsoidSurfaceAppearance({
material : ces.Material.fromType('Checkerboard')
})
}));
tileset.readyPromise.then(function(tileset) {
// viewer.scene.primitives.add(tileset);
viewer.flyTo(tileset);
console.log(`cargo con exito! ${tileset}`);
}).otherwise(function(error) {
console.log(error);
});
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
My application needs to be able to show a Cesium3DTileset from a relatively far distance.
4. The Cesium version you're using, your operating system and browser.
cesium: "^1.49.0"
os: Windows 10
tested browsers:
Chrome Version 69.0.3497.92 (Official Build) (64-bit)
Firefox Quantum 61.0.2 (32-bit)