solved GLTF Loader

[Jan23]

Hello,

my first steps with babylon. So far all good, however I'm struggeling with importing a gltf file (the official Duck.gltf example) in my Angular app whereas it works fine in a simple sample app.

This works:

I've included

<script src="js/vendor/babylon.js"></script>
<script src="js/vendor/babylon.glTFFileLoader.js"></script>

and my main looks like this:

// Get the canvas element from our HTML below
var canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
// -------------------------------------------------------------
var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    // glTF Files use right handed system
    scene.useRightHandedSystem = true;

    // Configuring camera
    var camera = new BABYLON.ArcRotateCamera("camera", 4.712, 1.571, 0.05, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    camera.wheelPrecision = 100.0;
    camera.minZ = 0.01;
    camera.maxZ = 1000;

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Append sample glTF model to scene
    BABYLON.SceneLoader.Append("/BabylonTest/data/", "Duck.gltf", scene, function (scene) {
    }, null, function (scene) {
        alert("error");
    });

    // camera.zoomOn(scene.meshes);

    return scene;

};
// -------------------------------------------------------------
// Now, call the createScene function that you just finished creating
var scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
    scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
    engine.resize();
});

This doesn't work:

I'm constructing this class in the ngOnit() function and calling the addGltf() function on a button click. Creating a sphere this way works.

I've tried npm install 3.1 alpha and 3.0 (which seems to install 3.0.7)

import * as babylon from "babylonjs";

export class BabylonViewer {
  private canvas: HTMLCanvasElement;
  private engine: babylon.Engine;

  constructor(canvasId: string) {
    this.canvas = <HTMLCanvasElement>document.getElementById(canvasId);
    this.engine = new babylon.Engine(this.canvas, true);
  }

  addGltf() {
    const root = "/api/file/";
    const file = "Duck.gltf";

    const scene = new babylon.Scene(this.engine);
    scene.useRightHandedSystem = true;

    const camera = new babylon.ArcRotateCamera("camera", 4.712, 1.571, 0.05, babylon.Vector3.Zero(), scene);
    camera.attachControl(this.canvas, true);
    camera.wheelPrecision = 100.0;
    camera.minZ = 0.01;
    camera.maxZ = 1000;

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    const light = new babylon.HemisphericLight("light1", new babylon.Vector3(0, 1, 0), scene);
    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Append sample glTF model to scene
    babylon.SceneLoader.Append(root, file, scene, function (scene) {
    }, null, function (scene) {
      alert("error");
    });

    this.engine.runRenderLoop(() => {
      scene.render();
    });
    window.addEventListener("resize", () => {
      this.engine.resize();
    });
  }
}

The output in Chrome is

core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

babylon.max.js:6006 BJS - [20:27:16]: Babylon.js engine (v3.0) launched

babylon.max.js:6006 BJS - [20:27:21]: importScene of unknown
core.es5.js:1020 ERROR TypeError: Cannot read property '0' of undefined
    at Function.webpackJsonp.../../../../babylonjs/dist/preview release/babylon.max.js.Color4.FromArray (babylon.max.js:578)
    at Object.load (babylon.max.js:46606)
    at loadSceneFromData (babylon.max.js:46322)
    at XMLHttpRequest.request.onreadystatechange (babylon.max.js:5557)
    at XMLHttpRequest.wrapFn (zone.js:1075)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

While debugging I've seen that in the load function some checks for undefined are missing, e.g.:

                    scene.clearColor = BABYLON.Color4.FromArray(parsedData.clearColor);
                    scene.ambientColor = BABYLON.Color3.FromArray(parsedData.ambientColor);
                    if (parsedData.gravity) {
                        scene.gravity = BABYLON.Vector3.FromArray(parsedData.gravity);
                    }

I fixed those but later in crashed loading the meshes.

So, I suspect there's something else wrong.

 

May it be that the GLTF loader is not loaded properly by using npm?

 

Cheers and thanks,

 

Jan

[GameMonetize]

Hey!

did you check this?

http://doc.babylonjs.com/tutorials/babylonjs_and_ionic_angular

 

[Jan23]

The issue seems to be related to loading the gltf-loader with webpack - see