solved Problem with Typescript example

[Sailarg]

 

Good afternoon my name is Gary a pleasure, I am new and decided to raise babylon on the recommendation of a friend.
I can do the basic example of the site (version js), but now I try to do it using the version typescript, but doing so I get the following error: 
src/ts-reference/babylon.2.5.d.ts(2,11): error TS2300: Duplicate identifier 'InstancingAttributeInfo'.
src/ts-reference/babylon.2.5.d.ts(29,11): error TS2300: Duplicate identifier 'EngineCapabilities'.
src/ts-reference/babylon.2.5.d.ts(71,11): error TS2300: Duplicate identifier 'Engine'.
src/ts-reference/babylon.2.5.d.ts(1145,11): error TS2300: Duplicate identifier 'Node'.
src/ts-reference/babylon.2.5.d.ts(1254,11): error TS2300: Duplicate identifier 'PointerEventTypes'.
src/ts-reference/babylon.2.5.d.ts(1270,11): error TS2300: Duplicate identifier 'PointerInfoBase'.
src/ts-reference/babylon.2.5.d.ts(1279,11): error TS2300: Duplicate identifier 'PointerInfoPre'.
src/ts-reference/babylon.2.5.d.ts(1288,11): error TS2300: Duplicate identifier 'PointerInfo'.
src/ts-reference/babylon.2.5.d.ts(1295,11): error TS2300: Duplicate identifier 'RenderingGroupInfo'.
src/ts-reference/babylon.2.5.d.ts(1337,11): error TS2300: Duplicate identifier 'Scene'.
src/ts-reference/babylon.2.5.d.ts(2083,11): error TS2300: Duplicate identifier 'Action'.
src/ts-reference/babylon.2.5.d.ts(2115,11): error TS2300: Duplicate identifier 'ActionEvent'.
src/ts-reference/babylon.2.5.d.ts(2156,11): error TS2300: Duplicate identifier 'ActionManager'.
src/ts-reference/babylon.2.5.d.ts(2257,11): error TS2300: Duplicate identifier 'Condition'.
src/ts-reference/babylon.2.5.d.ts(2268,11): error TS2300: Duplicate identifier 'ValueCondition'.
src/ts-reference/babylon.2.5.d.ts(2289,11): error TS2300: Duplicate identifier 'PredicateCondition'.
src/ts-reference/babylon.2.5.d.ts(2295,11): error TS2300: Duplicate identifier 'StateCondition'.
src/ts-reference/babylon.2.5.d.ts(2306,11): error TS2300: Duplicate identifier 'SwitchBooleanAction'.
src/ts-reference/babylon.2.5.d.ts(2316,11): error TS2300: Duplicate identifier 'SetStateAction'.
src/ts-reference/babylon.2.5.d.ts(2323,11): error TS2300: Duplicate identifier 'SetValueAction'.
src/ts-reference/babylon.2.5.d.ts(2334,11): error TS2300: Duplicate identifier 'IncrementValueAction'.
src/ts-reference/babylon.2.5.d.ts(2345,11): error TS2300: Duplicate identifier 'PlayAnimationAction'.
src/ts-reference/babylon.2.5.d.ts(2355,11): error TS2300: Duplicate identifier 'StopAnimationAction'.
src/ts-reference/babylon.2.5.d.ts(2362,11): error TS2300: Duplicate identifier 'DoNothingAction'.
src/ts-reference/babylon.2.5.d.ts(2367,11): error TS2300: Duplicate identifier 'CombineAction'.
src/ts-reference/babylon.2.5.d.ts(2374,11): error TS2300: Duplicate identifier 'ExecuteCodeAction'.
src/ts-reference/babylon.2.5.d.ts(2379,11): error TS2300: Duplicate identifier 'SetParentAction'.
...

src/ts/babylon.ts(7962,15): error TS2417: Class static side 'typeof Box' incorrectly extends base class static side 'typeof _Primitive'.
  Types of property 'Parse' are incompatible.
    Type '(parsedBox: any, scene: Scene) => Box' is not assignable to type '(parsedVertexData: any, scene: Scene, rootUrl: string) => Geometry'.
      Type 'Box' is not assignable to type 'Geometry'.
        Types have separate declarations of a private property '_scene'.
src/ts/babylon.ts(8073,11): error TS2300: Duplicate identifier 'GroundMesh'.

...
src/ts-reference/babylon.2.5.d.ts(16940,11): error TS2300: Duplicate identifier 'DefaultRenderingPipeline'.
src/ts-reference/babylon.2.5.d.ts(16995,11): error TS2300: Duplicate identifier 'LensRenderingPipeline'.
src/ts-reference/babylon.2.5.d.ts(17086,11): error TS2300: Duplicate identifier 'SSAO2RenderingPipeline'.
src/ts-reference/babylon.2.5.d.ts(17197,11): error TS2300: Duplicate identifier 'SSAORenderingPipeline'.
 

Looking in this same forum I found that someone said that the solution was to update according to this version: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/babylon.d.ts but it does not work:

 my code:

game.ts file
 

/// <reference path = "../ts-reference/babylon.2.5.d.ts" />
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 = <HTMLCanvasElement> 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
{
// run the render loop
this._engine.runRenderLoop(() => {
this._scene.render();
});
 
// the canvas/window resize event handler
window.addEventListener('resize', () => {
this._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();
});

index.pug 

doctype html
html
head
title= title
meta(name='viewport', content='width=device-width, initial-scale=1.0', charset="utf-8")
style
include ../css/style.css
script
include ../js/babylon.2.5.max.js
include ../js/bGUI.js
include ../js/hand.min.1.3.8.js
include ../js/cannon.js
include ../js/game.js
body
h1= message

div#GUI
canvas#renderCanvas

 

[GameMonetize]

Hello this should be fixed by bjs 3.0

At the time bjs 2.5 was shipped we had to add the pointer events typings in bjs. But now with the latest TS it is no more mandatory.

[Sailarg]

8 minutes ago, Deltakosh said:

Hello this should be fixed by bjs 3.0

At the time bjs 2.5 was shipped we had to add the pointer events typings in bjs. But now with the latest TS it is no more mandatory.

You have the repository link with that version?

[GameMonetize]

https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release

[Sailarg]

38 minutes ago, Deltakosh said:

https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release

I downloaded it, but I get the same error with that version

[GameMonetize]

Then it should be related with the way you compile it

[Sailarg]

11 minutes ago, Deltakosh said:

Then it should be related with the way you compile it

 

Sorry I was wrong copying the files, the repository if it works, I am very grateful, really thank you very much for the help

[Sailarg]

 

Good evening, 
Sorry for the inconvenience again, but I'm trying to use the TerrainMaterial method to add some textures to a floor, but I get the error:
"[ts] Property 'TerrainMaterial' does not exist on type 'typeof BABYLON'"

I'm doing it like this

        let materialPlane = new BABYLON.TerrainMaterial("terrainMaterial", this._scene);
        materialPlane.diffuseTexture1 = new BABYLON.Texture("assets/tracks/track.jpg", this._scene);
        let ground = BABYLON.MeshBuilder.CreateGround('track_1', {width: _width, height: _height, subdivisions: _subdivisions}, this._scene);
        ground.material = materialPlane;

and with javascript files give me this error: 

Uncaught TypeError: BABYLON.TerrainMaterial is not a constructor
    at Game.createTrack (Game.ts:46)
    at window.addEventListener (Game.ts:96)


And using the uScale and vScale properties of the creation of a StandardMaterial I also get the following errors

[ts] Property 'uScale' does not exist on type 'BaseTexture'.

[ts] Property 'vScale ' does not exist on type 'BaseTexture'.

I'm doing it like this

var materialPlane = new BABYLON.StandardMaterial("texturePlane", this._scene);
        materialPlane.diffuseTexture = new BABYLON.Texture("assets/tracks/track.jpg", this._scene);
        materialPlane.diffuseTexture.uScale = 5.0;
        materialPlane.diffuseTexture.vScale = 5.0;
        materialPlane.backFaceCulling = false;
        plane.material = materialPlane;

 

edit:

i find this post with the same problem:

 

So I searched the materialsLibrary folder, copied and pasted all the js but none of them created the creation of the terrain.
any ideas?

[GameMonetize]

To use the terrain just add this reference:

https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js

[Sailarg]

On 2017-6-21 at 1:18 PM, Deltakosh said:

To use the terrain just add this reference:

https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js

 

 

Good afternoon, first of all I have to say that update to the last verison that the repository that you left me up, replace the files with the new version but i get this error
babylon.js:6 Uncaught TypeError: o.getScene(...).addMesh is not a function

at i [as constructor] (babylon.js:6)

at i.r [as constructor] (babylon.js:11)

at new i (babylon.js:24)
at Function.t.CreateGround (babylon.js:24)
at Game.createTrack (Game.ts:47)
at Game.init (Game.ts:114)
at window.addEventListener (index.ts:8)
 

I do not know if it's my fault, here I leave a repo with what I have until now https://github.com/sailarg/test

All I want to do is load a scene with a terrain, a cubemap (the example and already achieved) and an animation (the wolf running)

this is my index.html
 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <script src="js/hand.min.1.3.8.js"></script>
    <script src="js/cannon.js"></script>
    <script src="js/Oimo.js"></script>
    <script src="js/split.js"></script>
    <script src="js/babylon.max.js"></script>
    <script src="js/babylon.terrainMaterial.min.js"></script>
    <script src="js/bGUI.js"></script>
    <script src="js/engine.js"></script>
    <link type="text/css" href="css/style.css" rel="stylesheet"/> 
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

And engine.js (Compiled already, I remind you that I use typescript)

class MySkybox {
    create(scene, _size = 100.0) {
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.disableLighting = true;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skyboxTextures/skybox", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        let skybox = BABYLON.Mesh.CreateBox("skyBox", _size, scene);
        skybox.material = skyboxMaterial;
        skybox.infiniteDistance = false;
        return skybox;
    }
}
class Jockey {
    constructor(_data) {
        this._name = _data._name;
        if (_data._age != undefined) {
            this._age = _data._age;
        }
    }
    getID() {
        return this._id;
    }
    makeRandom() {
        this._skin = Math.floor(Math.random() * 15);
        var has_marks = !(this._skin > 0 && this._skin < 6);
        if (has_marks) {
            this._hands = Math.floor(Math.random() * 7) - 1;
            this._hands_color = this._hands == -1 ? -1 : 1;
        }
        else {
            this._hands = -1;
            this._hands_color = -1;
        }
        console.log("HCODE", this._hands, this._hands_color);
    }
}
class Horse {
    constructor(_data) {
        this._name = _data._name;
        if (_data._age != undefined) {
            this._age = _data._age;
        }
    }
    getID() {
        return this._id;
    }
    makeRandom() {
        this._skin = Math.floor(Math.random() * 15);
        var has_marks = !(this._skin > 0 && this._skin < 6);
        if (has_marks) {
            this._hands = Math.floor(Math.random() * 7) - 1;
            this._hands_color = this._hands == -1 ? -1 : 1;
            this._feet = Math.floor(Math.random() * 7) - 1;
            this._feet_color = this._feet == -1 ? -1 : 1;
            this._head = Math.floor(Math.random() * 11) - 1;
            this._head_color = this._head == -1 ? -1 : 1;
        }
        else {
            this._hands = -1;
            this._hands_color = -1;
            this._feet = -1;
            this._feet_color = -1;
            this._head = -1;
            this._head_color = -1;
        }
        console.log("HCODE", this._hands, this._hands_color, this._feet, this._feet_color, this._head, this._head_color);
    }
}
class Game {
    constructor(canvasElement) {
        this._canvas = document.getElementById(canvasElement);
        this._engine = new BABYLON.Engine(this._canvas, true);
    }
    createScene() {
        this._scene = new BABYLON.Scene(this._engine);
        this._camera = new BABYLON.FreeCamera('camera_1', new BABYLON.Vector3(0, 10, 15), this._scene);
        this._camera.setTarget(new BABYLON.Vector3(0, 0, 0));
        this._camera.attachControl(this._canvas, true);
        this._light = new BABYLON.HemisphericLight('light_1', new BABYLON.Vector3(0, 1, 0), this._scene);
    }
    createTrack(_width = 100.0, _height = 100.0, _subdivisions = 2) {
        var terrainMaterial = new BABYLON.TerrainMaterial("terrainMaterial", this._scene);
        terrainMaterial.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
        terrainMaterial.specularPower = 64;
        terrainMaterial.mixTexture = new BABYLON.Texture("assets/tracks/mixMap.png", this._scene);
        terrainMaterial.diffuseTexture1 = new BABYLON.Texture("assets/tracks/floor.png", this._scene);
        terrainMaterial.diffuseTexture2 = new BABYLON.Texture("assets/tracks/rock.png", this._scene);
        terrainMaterial.diffuseTexture3 = new BABYLON.Texture("assets/tracks/grass.png", this._scene);
        terrainMaterial.bumpTexture1 = new BABYLON.Texture("assets/tracks/floor_bump.png", this._scene);
        terrainMaterial.bumpTexture2 = new BABYLON.Texture("assets/tracks/rockn.png", this._scene);
        terrainMaterial.bumpTexture3 = new BABYLON.Texture("assets/tracks/grassn.png", this._scene);
        terrainMaterial.diffuseTexture1.uScale = terrainMaterial.diffuseTexture1.vScale = 10;
        terrainMaterial.diffuseTexture2.uScale = terrainMaterial.diffuseTexture2.vScale = 10;
        terrainMaterial.diffuseTexture3.uScale = terrainMaterial.diffuseTexture3.vScale = 10;
        var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 100, 0, 10, this._scene, false);
        ground.position.y = -2.05;
        ground.material = terrainMaterial;
    }
    createModel() {
        let __this = this;
        BABYLON.SceneLoader.ImportMesh("wolf", "assets/animation/", "Wolf.babylon", __this._scene, function (newMeshes, particleSystems, skeletons) {
            var wolf = newMeshes[1];
            __this._scene.beginAnimation(skeletons[0], 0, 100, true, 0.8);
        });
    }
    createSkybox(_size = 100.0) {
        this._skybox = new MySkybox().create(this._scene, _size);
    }
    animate() {
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
    init() {
        this.createScene();
        this.createTrack();
        this.createSkybox();
        this.createModel();
        this.animate();
    }
}
window.addEventListener('DOMContentLoaded', () => {
    console.log("creating a new game");
    let game = new Game('renderCanvas');
    game.init();
});
//# sourceMappingURL=engine.js.map

 

[GameMonetize]

Do you have a running version somewhere?

[TaylorPzreal]

My babylon.js version is 3.1.0-alpha1, got these warning:

Property 'uScale' does not exist on type 'BaseTexture'.

[ts] Property 'vScale' does not exist on type 'BaseTexture'.

[ts] Property 'position' does not exist on type 'Light'

[ts] Property 'shadowOrthoScale' does not exist on type 'Light'.

[seb75]

Hi,

I'm also getting the same error with TypeScript when running my Babylon code with material.diffuseTexture.uScale = 10, and same with vScale.

 TS2551: Property 'vScale' does not exist on type 'BaseTexture'. Did you mean 'scale'? 
 TS2551: Property 'uScale' does not exist on type 'BaseTexture'. Did you mean 'scale'? 

Have you been able to solve this issue ?

[Guest]

I don;t see them (you can just case like that to fix it: <BABYLON.Texture>(material.diffuseTexture)

[seb75]

problem solved, thanks !