Hi,
Am using 3d GLTF model in cesiumion as 3d tile (asset). now i want to use same in cesiumjs without internet so am downloaded the asset and used the tileset.json in cesium.js application. but that not rendered in map.
From where are you loading that tileset? (I.e. what is the location of the tileset JSON, and what does code for loading it look like?)
Maybe these instructions are helpful here…?
Hi Marco,
thanks for the reply.
here am summarize my problem here. pls help me on this.
am using cesiumjs for my map integration. i want to do map with cesiumjs offline(without internet) support.
earlier i have used cesiumion assets. for offline i have used tileset.json in cesium. on using this below code
integrate with my tileset.json i am not able to the my 3d model in map. so help me on this. in which way i can load 3d tileset and able to add markers,labels,cluster,paths in it.
I’m not sure what the question is. But when your tileset is provided by a local server, then you can load it like this:
actually i wan to do Cesium Sandcastle
in offline cesium. pls help me to acheive the same output
yeah your answer helps me to load tileset.json in earth with this Cesium.ImageryLayer.fromProviderAsync(
Cesium.TileMapServiceImageryProvider.fromUrl(
Cesium.buildModuleUrl(“Assets/Textures/NaturalEarthII”),
),
but i can get this type output.
how to load this on earth surface (blend with surface of earth)
tileset.json
{“asset”:{“version”:“1.0”,“extras”:{“ion”:{“georeferenced”:true,“movable”:false}}},“geometricError”:773.9228030080011,“root”:{“boundingVolume”:{“region”:[-1.3194620680333091,0.6987656516400003,-1.3193538949432,0.6988542204615121,-2.570415496826172,38.02749061584473]},“geometricError”:773.9228030080011,“refine”:“ADD”,“children”:[{“boundingVolume”:{“region”:[-1.3194620680333091,0.6987656516400003,-1.3193538949432,0.6988542204615121,-2.570415496826172,38.02749061584473]},“geometricError”:0,“content”:{“uri”:“0/0/0.b3dm”}}]}}
I don’t see a glTF in this tileset, but that may not be important right now.
The tileset that is shown in the screenshot is the one from the 3D Tiles Photogrammetry sandcastle. And this contains a certain geolocation. When you directly load this, with a sandcastle like this
then it will be displayed (roughly) on the surface of the earth. When you have your own tileset (i.e. another data set), then this may encode its geolocation differently. (Could that tileset be shared, e.g. as a ZIP file? That could make it easier to find out how the geolocation is encoded)
thx.
ccity_building_set_1 (5).zip (10.9 MB)
pls refer this gltf file . i wan to use this as tileset.json in cesium to achieve the 3dtiles layer. explore this.
my question: to acheive 3d tiles thru tileset .json what is the right GLTF file and its properties . because i want to do 3d tile project so can i procure the GLTF file from stakeholders and convert it to tileset.json thru cesium ion. on result of tileset i able to add markers,cluster,path,style,detail pane like all map features?
Some parts of the goal are not entirely clear for me.
But a few pieces of information, in the hope that they may be helpful:
This is only a single glTF file for now. (With some external resources). You can drag-and-drop that whole folder with the gltf file in it into https://gltf.report/ , and then press the “Export” button at the lower right, to receive a single .glb file (these are usually easier to handle).
In order to convert that single GLB file into a tileset, there are different options. You could use the 3d-tiles-tools to create a tileset.json from that. For example, with
npx 3d-tiles-tools createTilesetJson -i ./ -o ./tileset.json
(in the directory that contains only the GLB file!).
The resulting tileset can then be served with a local server via localhost, and displayed in a sandcastle like this:
const viewer = new Cesium.Viewer("cesiumContainer");
// Create the tileset in the viewer
const tileset = viewer.scene.primitives.add(
await Cesium.Cesium3DTileset.fromUrl(
"http://localhost:8003/tileset.json", {
debugShowBoundingVolume: true,
})
);
// Move the tileset to a certain position on the globe,
// and scale it down
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.152408, 39.946975, 20)
);
const scale = 0.01;
const modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
transform,
scale,
new Cesium.Matrix4()
);
tileset.modelMatrix = modelMatrix;
// Zoom to the tileset, with a small offset so that
// it is fully visible
const offset = new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(-22.5),
Cesium.Math.toRadians(-22.5),
160.0
);
viewer.zoomTo(tileset, offset);
Note that the model matrix includes a scaling factor of 0.01. Apparently, the glTF file is stored in centimeters, although according to the glTF specification, it should be stored in meters.
This will show the following:
Alternatively, you can upload that GLB file to Cesium ion and tile it as a 3D Model. There, you can adjust the tileset location functionality…
to place it at a certain posiiton:
(Note that this also involves the scaling factor of 0.01 here. You should consider converting that tileset from centimeter to meters before processing it further…)