I have React application, inwhich i want to load b3dm into cesium and preview it, but got runtime error:
Code:
import { useEffect, useRef, useState } from "react";
import {
Viewer,
Cesium3DTileset,
createWorldTerrainAsync,
CesiumTerrainProvider,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
interface Cesium3DTilesetViewerProps {
tilesetUrl?: string;
}
export const Cesium3DTilesetViewer: React.FC<Cesium3DTilesetViewerProps> = ({
tilesetUrl,
}) => {
const cesiumContainer = useRef<HTMLDivElement>(null);
const viewerRef = useRef<Viewer | null>(null);
const [terrainProvider, setTerrainProvider] = useState<
CesiumTerrainProvider | undefined
>(undefined);
const loadCesiumTerrain = async () => {
const terrainProvider = await createWorldTerrainAsync();
return terrainProvider;
};
useEffect(() => {
if (!cesiumContainer.current) return;
const fetchTerrain = async () => {
const terrain = await loadCesiumTerrain();
setTerrainProvider(terrain);
};
fetchTerrain();
viewerRef.current = new Viewer(cesiumContainer.current, {
terrainProvider: terrainProvider,
});
load3DTileset();
return () => {
if (viewerRef.current && !viewerRef.current.isDestroyed()) {
viewerRef.current.destroy();
viewerRef.current = null;
}
};
}, []);
const load3DTileset = async () => {
if (!viewerRef.current) return;
try {
let tileset: Cesium3DTileset;
if (tilesetUrl) {
tileset = await Cesium3DTileset.fromUrl(tilesetUrl, {
show: true,
dynamicScreenSpaceError: true,
maximumScreenSpaceError: 3,
});
} else {
console.error("No tileset source provided");
return;
}
viewerRef.current.scene.primitives.add(tileset);
viewerRef.current.zoomTo(tileset);
} catch (error) {
console.error("Error loading 3D Tileset:", error);
}
};
return (
<div ref={cesiumContainer} style={{ width: "100%", height: "100vh" }} />
);
};
I checked models with online b3dm viewer and it renders fine. Dont have idea whats wrong
The error is thrown at cesium/packages/engine/Source/Renderer/Sampler.js at 553ac5760205fa6c4de4cd3a28d887fda566a565 · CesiumGS/cesium · GitHub which suggests that the sampler indeed does not have one of the values that are allowed according to glTF™ 2.0 Specification
I think that one could consider some sort of fallback/default value for that case, but regardless of that: The file is invalid. You could probably check that with
npx 3d-tiles-validator --tileContentFile yourFile.b3dm
Fixing this file should be fairly easy, iff this is the only kind of error in this file. It may require a bit of twiddling and custom scripts, but should be doable.
thank you Marco, after validation i get this
Validating tile content ./public/models/Nahimova_13/Nahimova_13.b3dm
Validation result:
{
"date": "2025-07-30T13:53:12.602Z",
"numErrors": 1,
"numWarnings": 0,
"numInfos": 0,
"issues": [
{
"type": "CONTENT_VALIDATION_ERROR",
"path": "Nahimova_13.b3dm",
"message": "Content Nahimova_13.b3dm caused validation errors",
"severity": "ERROR",
"causes": [
{
"type": "CONTENT_VALIDATION_ERROR",
"path": "/bufferViews/3/byteStride",
"message": "Value 2 is out of range.",
"severity": "ERROR"
},
{
"type": "CONTENT_VALIDATION_WARNING",
"path": "/samplers/0/wrapS",
"message": "Invalid value 10496. Valid values are (33071, 33648, 10497).",
"severity": "WARNING"
},
{
"type": "CONTENT_VALIDATION_WARNING",
"path": "/samplers/0/wrapT",
"message": "Invalid value 10496. Valid values are (33071, 33648, 10497).",
"severity": "WARNING"
},
{
"type": "CONTENT_VALIDATION_INFO",
"path": "/images/0",
"message": "Image has non-power-of-two dimensions: 2500x2500.",
"severity": "INFO"
}
]
}
]
}
dont know how to fix it but i ll try to get and load correct file
OK, the message about the invalid wrap mode is actually only a warning in the validator. (This is the glTF validator). This is a stronger sign that there should be some sort of fallback for this in CesiumJS. I opened Consider a fallback for invalid sampler wrap modes · Issue #12781 · CesiumGS/cesium · GitHub to at least consider this.
But… the message
"type": "CONTENT_VALIDATION_ERROR",
"path": "/bufferViews/3/byteStride",
"message": "Value 2 is out of range.",
"severity": "ERROR"
is an actual error. It is not clear what CesiumJS would do with that. So even if the warnings about the wrapping mode are fixed, CesiumJS might still not be able to render this file because of this error.
If the file is not too large, and if it can be attached here in a ZIP file (or in doubt, sent via mail or private message), then I can have a look at whether it can be fixed easily (but I cannot make promises, given that it seems to contain that byte stride error, where the reason and implications of the error are not clear).
1 Like
I got it, cant attach here because of new account. And i cant even find pm section here so if you tell me in more detail how to do this i can send it to you (2Mb in archive)
I manually increased your “trust level”, so you should be able to attach ZIP files now.
For sending PMs: Clicking on my profile picture/icon should open a popup where the “Message” button is in the upper right.
If none of that works, sending it to marco at cesium.com should work in any case.
1 Like
The file was shared internally, and it was confirmed that the file (and the fixed result) can be shared here.
The invalid wrapS/wrapT values haven’t been too much of a problem (except for rendering them in CesiumJS). It’s fairly easy to fix this with a small snippet based on glTF-Transform.
The error about the “byte stride” was a bit more concerning. It was not obvious that other tools could even read this data. But fortuntely, glTF-Transform was pretty forgiving at this point: When reading the data, it could make sense of the data even though the data was invalid. When writing the data, it magically fixed the wrong byte stride.
Attached are the input/output B3DM files (both with a dummy tileset), and a short snippet (based on the 3D Tiles Tools and glTF-Transform) that was used for fixing this file.
Cesium Forum 42415 fixed.zip (3.9 MB)
