[Solved] Babylon.js Getting Started Example to JSFiddle in TypeScript

[8Observer8]

Hello

I want to run Getting Started Example in TypeScript on JSFiddle: https://jsfiddle.net/8Observer8/z4vo5u5d/68/

But an error occurs on the line 50 "this._scene.render();"

Quote

Uncaught TypeError: Cannot read property '_scene' of undefined

Thank you in advance

[8Observer8]

Now it works: https://jsfiddle.net/8Observer8/z4vo5u5d/75/

I added var self = this; in animate() method:

    animate() : void
    {
        var self = this;

        // run the render loop
        this._engine.runRenderLoop(() =>
        {
            self._scene.render();
        });

        // the canvas/window resize event handler
        window.addEventListener('resize', () =>
        {
            self._engine.resize();
        });
    }

This is the completed code:

<canvas id="renderCanvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.3.0/babylon.js"></script>

    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

    #renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
    }

class Game
{
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.FreeCamera;
    private _light: BABYLON.Light;
  
    constructor(canvasElement : string)
    {
        // Create canvas and engine
        this._canvas = document.getElementById(canvasElement);
        this._engine = new BABYLON.Engine(this._canvas, true);
    }

    createScene() : void
    {
        // create a basic BJS Scene object
        this._scene = new BABYLON.Scene(this._engine);
        
        // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
        this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);
        
        // target the camera to scene origin
        this._camera.setTarget(BABYLON.Vector3.Zero());

        // attach the camera to the canvas
        this._camera.attachControl(this._canvas, false);

        // create a basic light, aiming 0,1,0 - meaning, to the sky
        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

        // create a built-in "sphere" shape; with 16 segments and diameter of 2
        let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1',
                            {segments: 16, diameter: 2}, this._scene);

        // move the sphere upward 1/2 of its height
        sphere.position.y = 1;

        // create a built-in "ground" shape
        let ground = BABYLON.MeshBuilder.CreateGround('ground1',
                            {width: 6, height: 6, subdivisions: 2}, this._scene);
    }

    animate() : void
    {
        var self = this;
        // run the render loop
        this._engine.runRenderLoop(() =>
        {
            self._scene.render();
        });

        // the canvas/window resize event handler
        window.addEventListener('resize', () =>
        {
            self._engine.resize();
        });
    }
}

window.addEventListener('DOMContentLoaded', () =>
{
    // Create the game using the 'renderCanvas'
    let game = new Game('renderCanvas');

    // Create the scene
    game.createScene();

    // start animation
    game.animate();
});

[8Observer8]

It works on codepen too: Getting Started Example in TypeScript