solved TS2339: Property specularColor does not exist on type Material

[JohnnyDevNull]

Hi there,

i have ported the world axes example from http://doc.babylonjs.com/snippets/world_axes into my Angular-Babylon template, but getting the following error:

let makeTextPlane = function(text, color, size) {
  let dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', 50, $scope.scene, true);
  dynamicTexture.hasAlpha = true;
  dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color , 'transparent', true);
  let plane = BABYLON.Mesh.CreatePlane('TextPlane', size, $scope.scene, true);
  plane.material = new BABYLON.StandardMaterial('TextPlaneMaterial', $scope.scene);
  plane.material.backFaceCulling = false;
  plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
  plane.material.diffuseTexture = dynamicTexture;
  return plane;
};

webpack: Compiled with warnings.
ERROR in src/app/engine/engine.service.ts(91,22): error TS2339: Property 'specularColor' does not exist on type 'Material'.
src/app/engine/engine.service.ts(92,22): error TS2339: Property 'diffuseTexture' does not exist on type 'Material'.

I can only fix it with an <any> in front of the BABYLON.Mesh.CreatePlane() function.

Am i doing something wrong here?

I don't think that this should be the right way...

[Guest]

This is expected as the mesh.Material is of type Material

you can just cast it to <StandardMaterial> instead of any

[JohnnyDevNull]

Sorry but i'am a little bit confused...

my workaround for now is as followed:

    let makeTextPlane = function(text: string, color: string, textSize: number) {
      let dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', 50, $scope.scene, true);
      dynamicTexture.hasAlpha = true;
      dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color , 'transparent', true);
      // @todo fix <any> - actual a hack for @types Error...
      let plane = <any>BABYLON.Mesh.CreatePlane('TextPlane', textSize, $scope.scene, true);
      plane.material = new BABYLON.StandardMaterial('TextPlaneMaterial', $scope.scene);
      plane.material.backFaceCulling = false;
      plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
      plane.material.diffuseTexture = dynamicTexture;
      return plane;
    };

Sorry i'am not as familiar with typescript than with javascript or php, but how can i overwrite an existing propeties type from an instance?

[Guest]

Here is how you can do it:

 let makeTextPlane = function(text: string, color: string, textSize: number) {
      let dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', 50, $scope.scene, true);
      dynamicTexture.hasAlpha = true;
      dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color , 'transparent', true);
      // @todo fix <any> - actual a hack for @types Error...
      let plane = BABYLON.Mesh.CreatePlane('TextPlane', textSize, $scope.scene, true);
      let material = new BABYLON.StandardMaterial('TextPlaneMaterial', $scope.scene);
      plane.material = material;
      material.backFaceCulling = false;
      material.specularColor = new BABYLON.Color3(0, 0, 0);
      material.diffuseTexture = dynamicTexture;
      return plane;
    };

 

[JohnnyDevNull]

ok, thats easy ?

set the properties on the materials instance not over the parent way.

thanks a lot for the help!

[Guest]

My pleasure!