Wink Posted December 13, 2016 Share Posted December 13, 2016 I'm a long time programmer and like strongly typed languages and I'd like to try to use Typescript with Babylon. My first step was to take the typescript version of the example file at doc.babylonjs.com and I created index.html and game.ts as described. With one change to index.html, I changed the script reference to "babylon.2.5.max.js" instead of "babylon.2.3.debug.js": wink@wink-desktop:~/prgs/test-babylon/test-babylon-typescript-1 $ ls babylon.2.5.max.js game.ts index.html wink@wink-desktop:~/prgs/test-babylon/test-babylon-typescript-1 $ cat index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- link to the last version of babylon ---> <script src="babylon.2.5.max.js"></script> <script src="game.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> </body> </html> wink@wink-desktop:~/prgs/test-babylon/test-babylon-typescript-1 $ cat game.ts window.addEventListener('DOMContentLoaded', () => { // get the canvas DOM element let canvas = <HTMLCanvasElement>document.getElementById('renderCanvas'); // load the 3D engine let engine = new BABYLON.Engine(canvas, true); // createScene function that creates and return the scene let createScene = function() { // create a basic BJS Scene object let scene = new BABYLON.Scene(engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) let camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // target the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas camera.attachControl(canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky let light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene let sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one let ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene); // return the created scene return scene; } // call the createScene function let scene = createScene(); // run the render loop engine.runRenderLoop(() => { scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', () => { engine.resize(); }); }); I then compiled game.ts to game.gs with tsc and got some errors, although the index.html did use the generated game.js and displayed the plane and sphere as expected. wink@wink-desktop:~/prgs/test-babylon/test-babylon-typescript-1 $ tsc game.ts game.ts(6,22): error TS2304: Cannot find name 'BABYLON'. game.ts(11,25): error TS2304: Cannot find name 'BABYLON'. game.ts(14,26): error TS2304: Cannot find name 'BABYLON'. game.ts(14,60): error TS2304: Cannot find name 'BABYLON'. game.ts(17,26): error TS2304: Cannot find name 'BABYLON'. game.ts(23,25): error TS2304: Cannot find name 'BABYLON'. game.ts(23,64): error TS2304: Cannot find name 'BABYLON'. game.ts(26,22): error TS2304: Cannot find name 'BABYLON'. game.ts(32,22): error TS2304: Cannot find name 'BABYLON'. So how do I "fix" the errors generated by compiling? -- Wink Quote Link to comment Share on other sites More sharing options...
Gijs Posted December 13, 2016 Share Posted December 13, 2016 Hi, You need to add the TypeScript declarations of Babylon.js: Put "babylon.d.ts" from here with the other files, and then compile it like this: tsc game.ts babylon.d.ts Quote Link to comment Share on other sites More sharing options...
Wink Posted December 13, 2016 Author Share Posted December 13, 2016 Txs, that did it! 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.