Unable to load a gltf modal using glTF Sample Viewer API

[Jogii]

Hi all,

I am trying to use glTF Sample Viewer as an API to integrate the same with my web application. I am using the NPM packaged code of Khronos gltf sample viewer.(npm i @khronosgroup/gltf-viewer). I followed the steps mentioned in the khronos gltf sample player github page but my modal is not loading , instead a blank sceen is rendered, and there is no error in console.

Can some one review my code and let me know what am i doing wrong. Also Is there any step wise documention to integrate the player API?

`const canvas = document.getElementById('canvas'); const context = canvas.getContext('webgl2', { alpha: false, antialias: true });

//gltfView
const view = new GltfView(context);
const resourceLoader = view.createResourceLoader();
const state = view.createState();

await resourceLoader
    .loadGltf(
        './assets/Bryo_Soundscape_Headphone_SIGNATURE/Bryo_Soundscape_Headphone_SIGNATURE.gltf'
    )
    .then((gltf) => {
        console.log('model loaded');
        state.gltf = gltf;
        const defaultScene = state.gltf.scene;
        state.sceneIndex = defaultScene === undefined ? 0 : defaultScene;
        state.cameraIndex = undefined;
        if (state.gltf.scenes.length != 0) {
            if (state.sceneIndex > state.gltf.scenes.length - 1) {
                state.sceneIndex = 0;
            }
            const scene = state.gltf.scenes[state.sceneIndex];
            scene.applyTransformHierarchy(state.gltf);
            state.userCamera.aspectRatio = canvas.width / canvas.height;
            state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);

            // Try to start as many animations as possible without generating conficts.
            state.animationIndices = [];
            for (let i = 0; i < gltf.animations.length; i++) {
                if (
                    !gltf
                        .nonDisjointAnimations(state.animationIndices)
                        .includes(i)
                ) {
                    state.animationIndices.push(i);
                }
            }
            state.animationTimer.start();
        }
    });

const update = () => {
    view.renderFrame(state, canvas.clientWidth, canvas.clientHeight);
    window.requestAnimationFrame(update);
};
window.requestAnimationFrame(update);`

[Jogii]

@elalish Hello, i saw that google's render-fidelity-tools uses khronos gltf sample viewer. Can you please have a look into the code above.

[elalish]

You're welcome to look at our integration, but for ease of use and reliability, I'd recommend <model-viewer>.

[Jogii]

@elalish Does <model-viewer> requires three,js as peer dependency, which mean i have to install threejs also from npm along with <model-viewer> ?

[elalish]

Our upcoming release will have this option. Currently we bundle three.js internally.

[UX3D-haertl]

Sorry for the late response. It seems like you are missing the loading of an environment map (HDR file). If the glTF does not have lights itself the screen will be black without environment light. Here is the code snippet from Sample Viewer:

    uiModel.hdr.subscribe(hdrFile => {
        resourceLoader.loadEnvironment(hdrFile).then( (environment) => {
            state.environment = environment;
            // We need to wait until the environment is loaded to redraw
            redraw = true;
        });
    });