Sailarg

Problem with Typescript example

Recommended Posts

 

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

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

 

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 err
or:
"[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?

Share this post


Link to post
Share on other sites
On 2017-6-21 at 1:18 PM, Deltakosh said:

 

 

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

 

Share this post


Link to post
Share on other sites

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'.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.