CODEWITHSUNDEEP
cesiumjs
Harvey
Harvey

Reputation: 21

How to get states of the gltf texture rendered with cesium

I am the newbie and have a 3dsmax model that converted to gltf with lots of texture images, after loading with cesium and flyto the model, the white bone loaded first, then it'll take long time to render the texture. I want to show a loading image before all textures rendered. Is there anyway to get the texture rendering states?

Upvotes: 2

Views: 685

Answers (1)

emackey
emackey

Reputation: 12418

If you're using the model directly as a graphics primitive (as opposed to using it on a Cesium Entity), then there's a Model.readyPromise that will tell you when the model has finished loading.

Here's a Sandcastle Demo for Cesium 1.54:

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var model;

var modelUrl = '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb';

var height = 0.0;
var heading = 0.0, pitch = 0.0, roll = 0.0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);

scene.primitives.removeAll(); // Remove previous model
model = scene.primitives.add(Cesium.Model.fromGltf({
    url : modelUrl,
    modelMatrix: modelMatrix
}));

console.log('Model is loading...');

model.readyPromise.then(function(model) {

    console.log('Model loading complete.');

    // Zoom to model
    var camera = viewer.camera;
    var controller = scene.screenSpaceCameraController;
    var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    controller.minimumZoomDistance = r * 0.5;

    var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
    var heading = Cesium.Math.toRadians(230.0);
    var pitch = Cesium.Math.toRadians(-20.0);
    camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
}).otherwise(function(error){
    console.error(error);
});

Upvotes: 1

Related Questions