Jan23

Members
  • Content count

    4
  • Joined

  • Last visited

  1. NPM / Webpack and loaders

    OK, as a workaround I'm using the bundled files, which I've copied in the assets directory in a newly created js directory: <script src="assets/js/babylon.max.js"></script> <script src="assets/js/babylon.glTFFileLoader.min.js"></script> Then to use it in Angular (Typescript) I've just copied (appended) the whole content of the babylon.d.ts into the typings.d.ts file which is located at the project root directory and is created by the Angular CLI. If you're not using Angular or Angular with the CLI you can place your custom typings whereever you wish but need to specify the location in the tsconfig.json. Loading works! Now, I only need to figure out, how to set the camera to acutally see my models :-) ... but that's the fun part, I hope :-)
  2. GLTF Loader

    The issue seems to be related to loading the gltf-loader with webpack - see
  3. Hi there, using Angular I have problems loading gltf-files. Now, I think I've narrowed as loading a Babylon file (*.babylon) works fine. Also, loading a gltf file in a simple non-webpack project works fine as well. The issue is (probably) that the gltf-loader is not loaded by webpack. I've found this issue (https://github.com/BabylonJS/Babylon.js/issues/2265) but I still can't get it working. So, how do I integrate the loaders using webpack? Thanks and cheers, Jan
  4. GLTF Loader

    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