Jump to content

Problem with Typescript example


Sailarg
 Share

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

 

Link to comment
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?
Link to comment
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?
Link to comment
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

 

Link to comment
Share on other sites

  • 1 month later...

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'.
Link to comment
Share on other sites

  • 8 months later...

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 ?

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