Jump to content

Typescript and Babylon js


Wink
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...