Meshes will load but will not be displayed

Questions
1

Hi, I have a model.glb file using extenstionKHR_materials_pbrSpecularGlossiness
The model is loaded only if I give scene.createDefaultCamera (false, true, true)
I need set camera like in this code bellow.

                var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
                camera.inputs.addMouseWheel();
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(true);

When I set camera like in upper code meshes will load but will not be displayed (see in img below)
If I add other model glb without KHR_materials_pbrSpecularGlossiness it works

Thank you for advice

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script
            src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

        <style>
            html,
            body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

        </style>
    </head>

    <body>
        <canvas id="renderCanvas"></canvas>
        <script>
            var canvas = document.getElementById("renderCanvas");

            var engine = null;
            var scene = null;
            var sceneToRender = null;
            var createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false }); };
            var createScene = function () {
                var scene = new BABYLON.Scene(engine);

                // Lights
                var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);

                //If I add this code below model.glb mesh will load but will not be displayed
                //model.glb is type KHR_materials_pbrSpecularGlossiness maybe this is issue. If I add other model glb without KHR_materials_pbrSpecularGlossiness it works

                var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
                camera.inputs.addMouseWheel();
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(true);

                BABYLON.SceneLoader.Append("scene/", "model.glb", scene, function (scene) {
                    console.log(scene.meshes,'scene'); 

                    //If I give this code below model will be loaded and displayed
                    //scene.createDefaultCamera(false, true, true);

                    //I need remove scene.createDefaultCamera(false, true, true) and replace it with
                    // var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
                    // camera.inputs.addMouseWheel();
                    // camera.setTarget(BABYLON.Vector3.Zero());
                    // camera.attachControl(true);
                });

                return scene;
            }
            window.initFunction = async function () {


                var asyncEngineCreation = async function () {
                    try {
                        return createDefaultEngine();
                    } catch (e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                    }
                }

                window.engine = await asyncEngineCreation();
                if (!engine) throw 'engine should not be null.';
                window.scene = createScene();
            };
            initFunction().then(() => {
                sceneToRender = scene
                engine.runRenderLoop(function () {
                    if (sceneToRender && sceneToRender.activeCamera) {
                        sceneToRender.render();
                    }
                });
            });

            // Resize
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>

</html>

model
model1925×914 83.2 KB

2

Will you be able to reproduce that on the playground? it is very hard to say what doesn’t work.

Also, i would recommend you not to use both createDefaultCamera and construct a new FreeCamera. use one of the two, otherwise you will have two cameras in the scene (unless this is what you want, of course)

3

So models are not necessarily centered at 0 and scaled as you thing by default.

I am pretty sure your model is either offscreen, too tiny or too big to be visible with your current camera setup.

createDefaultCamera is actually computing all this to be sure to point at the model center making it fit too screem.

You should check the default camera setup in the inspector to validate the assumption and reexport your model.

3 Likes
4

Thank you. Model was to large. I had to set Free camera to other position. It was exported from unity and convert to glb in Blender. Then I changed the scale of glb file in the blender