fromGltf

Asynchronously creates a model from a glTF asset. This function returns a promise that resolves when the model is ready to render, i.e., when the external binary, image, and shader files are downloaded and the WebGL resources are created.

The model can be a traditional glTF asset with a .gltf extension or a Binary glTF using the .glb extension.

// Load a model and add it to the scene
try {
const model = await Model.fromGltfAsync({
url: "../../SampleData/models/CesiumMan/Cesium_Man.glb"
});
viewer.scene.primitives.add(model);
} catch (error) {
console.log(`Failed to load model. ${error}`);
}
// Position a model with modelMatrix and display it with a minimum size of 128 pixels
const position = Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
5000.0
);
const headingPositionRoll = new HeadingPitchRoll();
const fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator(
"north",
"west"
);
try {
const model = await Model.fromGltfAsync({
url: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
modelMatrix: Transforms.headingPitchRollToFixedFrame(
position,
headingPositionRoll,
Ellipsoid.WGS84,
fixedFrameTransform
),
minimumPixelSize: 128,
});
viewer.scene.primitives.add(model);
} catch (error) {
console.log(`Failed to load model. ${error}`);
}
// Load a model and play the last animation at half speed
let animations;
try {
const model = await Model.fromGltfAsync({
url: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
gltfCallback: gltf => {
animations = gltf.animations
}
});
viewer.scene.primitives.add(model);
model.readyEvent.addEventListener(() => {
model.activeAnimations.add({
index: animations.length - 1,
loop: ModelAnimationLoop.REPEAT,
multiplier: 0.5,
});
});
} catch (error) {
console.log(`Failed to load model. ${error}`);
}

Return

A promise that resolves to the created model when it is ready to render.

See also