RaananW Posted January 10, 2018 Share Posted January 10, 2018 Hello dear community, I have just pushed a new version of Babylon to NPM. 3.2.0-alpha2 has a bit of changed package structure, which is, in general, transparent to the regular user. You will still be able to do the following: import * as BABYLON from "babylonjs"; What's new and exciting about this release are the extra modules that were added to this package. Babylon's npm package now contains commonjs and es6-ready modules, including typescript typings (for the commonjs modules). With the updated package you could do the following in TypeScript (and JavaScript): import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core"; import { ArcRotateCamera } from "babylonjs/arcRotateCamera"; import { HemisphericLight } from "babylonjs/hemisphericLight"; import { MeshBuilder } from "babylonjs/meshBuilder"; var canvas: any = document.getElementById("renderCanvas"); var engine: Engine = new Engine(canvas, true); function createScene(): Scene { var scene: Scene = new Scene(engine); var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene); camera.attachControl(canvas, true); var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene); var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene); return scene; } var scene: Scene = createScene(); engine.runRenderLoop(() => { scene.render(); }); window.addEventListener("resize", () => { engine.resize(); }); This will be using the commonjs modules available in the babylonjs package. The file generated (using webpack) will be roughly 2.2 MB unminified (which is an improvement to the 4+MB unminified Babylon file). To use es6, simple add /es6 after the module name. for example: import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6"; I have worked a lot to make it work correctly. But there are (probably) many things I did catch. Please: Be patient! it was just released, there might be a few bugs. Use it, abuse it, make it fail, and let me know when it did! I want to fix all bugs until 3.2 is officially released I will write a detailed documentation page about how to use it. For a list of modules, you can refer to config.json in our Gulp directory (until I finish the docs) : https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Gulp/config.json#L21 . Add "core", being the most important package there is. Enjoy! tomer, JackFalcon, jerome and 5 others 7 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 11, 2018 Author Share Posted January 11, 2018 Just updating that a first bug was found in the es6 modules, which I am fixing right now. Will sadly have to wait till the next npm update to be public. JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
Korvo Posted January 17, 2018 Share Posted January 17, 2018 Hi, What is the use-case for a headless babylonjs? Thanks, Bill Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 17, 2018 Share Posted January 17, 2018 With the headless version you can: - Run tests (units or validation) - Execute server side simulation (for multiplayer games for instance) Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 17, 2018 Share Posted January 17, 2018 This is pretty cool! I had to do a bunch of hacking last year to get models parsing for 3d print done server side on a bjs instance running on node. I was able to get it functioning and run some csg then polygon optimization on the meshs all on the server, but like I said it took a TON of hacking. This would handle all that with ease it looks like. GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
HoloLite Posted January 22, 2018 Share Posted January 22, 2018 @RaananW Hello, I am trying to use this nifty feature, and I am using babylonjs-3.2-alpha4 npm package. So I am replacing the following line: import 'babylonjs' with import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6" But I am getting error TS2307: Cannot find module 'babylonjs/core/es6'. I am guessing there is something in the tsconfig.json that I need to change ? Looking at the local node_modules/babylonjs dir, I don't see core/es6 dir structure though. Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 23, 2018 Author Share Posted January 23, 2018 yep, sorry for not updating here (updated in github only). You can track the progress here - https://github.com/BabylonJS/Babylon.js/issues/3314 In general - until I solve the few problems we had with the standalone modules, they were removed from the package. you can use the es6.js file from the repo. so you can do this: import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/es6" This will load the entire framework in es6-mode and will allow you to work with native es6 modules. Just a note, if you compile it using webpack, use the UMD version, which will give the same result. Quote Link to comment Share on other sites More sharing options...
HoloLite Posted January 23, 2018 Share Posted January 23, 2018 Yes you are correct that I can do the selective import now using webpack/angular. In this case then, what advantages does the es6 module offer ? I believe the current webpack/angular settings can also do tree-shaking. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.