solved Gradient Material in TypeScript

[DylanD]

Hey everyone,  I was wondering if anyone knew how to get gradient material into code.  I am using BABYLON version 3.2.0 but it does not have gradient material, so I tried adding in this file and then adding through script in my index.html but I couldn't use it in my typescript code.  Then I tried adding this file to my typescript files which did let me compile without errors but gave me the runtime error typeError: BABYLON.GradientMaterial is not a constructor.  I also tried adding this file to my javascript files, and it didn't seem do anything, any idea how to get gradient materials into my code?

Im using npm if that helps...

All I want to be able to do with it is this: https://www.babylonjs-playground.com/#2IFRKC%237

 

Any ideas?

[MarianG]

Hi. Follow this. You have only to do 

npm install --save babylonjs babylonjs-materials

After that you should have all the materials needed.

 

[DylanD]

13 minutes ago, MarianG said:

Hi. Follow this. You have only to do 

npm install --save babylonjs babylonjs-materials

After that you should have all the materials needed.

 

That seems to help... I still get errors though, specifically these two errors:

Uncaught TypeError: BABYLON.GradientMaterial is not a constructor

and

Uncaught (in promise) TypeError: BABYLON.GradientMaterial is not a constructor

 

Any ideas why this happened?

I also added it in my tsconfig since the guide told me to. 

This seems like it should have worked though.

 

Thanks for your help so far, it is greatly appreciated  

[brianzinn]

Did you import it without a namespace?  What is your setup?

import 'babylonjs-materials';

 

[DylanD]

1 minute ago, brianzinn said:

Did you import it without a namespace?  What is your setup?

import 'babylonjs-materials';

 

{
      "compilerOptions": {
        "target": "ES6",
        "module": "system",
        "moduleResolution": "node",
        "outDir": "js/build",
        "rootDir": "./ts",
       
        "types": [
          "babylonjs",
          "babylonjs-gui",
          "babylonjs-materials"
        ],
      },
      "exclude": [
        "node_modules",
        ".npm"
      ],
      "include": [
            "ts/**/*.ts"
    ]
}

This is my tsconfig.json

 

MY package.json dependencies:

 

"dependencies": {
    "babylonjs": "^3.2.0",
    "babylonjs-gui": "^3.2.0",
    "babylonjs-materials": "^3.2.0",
    "cannon": "github:schteppe/cannon.js",
    "concurrently": "^3.4.0",
    "npm": "^6.1.0",
    "oimo": "^1.0.9",
    "serve": "^8.2.0",
    "systemjs": "^0.21.4",
    "typescript": "~2.9.1"
  },

 

I dont import, I just type in BABYLON and It works....

so not really sure whats up since I never needed to import Babylon or Babylon-gui...  I would have assumed I could have done something similar with materials...

 

Any ideas?

[DylanD]

8 minutes ago, brianzinn said:

Did you import it without a namespace?  What is your setup?

import 'babylonjs-materials';

 

also if I use that line the : import 'babylonjs-materials'; then I get a 404 not found error on babylon's-materials

[DylanD]

also my index.html setup if needed looks like this:

<script src="cannon.min.js"></script>

<script src="/node_modules/babylonjs/babylon.js"></script>

<script src="/node_modules/babylonjs-gui/babylon.gui.js"></script>

 

 

<script src="/node_modules/systemjs/dist/system.src.js"></script>

<script src="/js/systemjs.config.js"></script>

[brianzinn]

I think that you just need to add the script tag for the materials module:
<script scr="/node_modules/babylonjs-materials/???"></script>

make sure it's after babylon. fill in the "???" with the .js file name like you did with the others.

[DylanD]

15 minutes ago, brianzinn said:

I think that you just need to add the script tag for the materials module:
<script scr="/node_modules/babylonjs-materials/???"></script>

make sure it's after babylon. fill in the "???" with the .js file name like you did with the others.

Aha I believe this is how I got the Gui and cannon parts working but, for some reason it won't connect for me.  As in with cannon and Gui they become underlined and can be cmd + clicked to show where they are (Mac OS thing I think), but it doesn't do this for the materials and I still have the same 2 errors.

 

Any ideas what I'm doing wrong?

[brianzinn]

Go into Finder and make sure you have a folder /node_modules/babylonjs-materials/ - if you don't have the materials as a script on your webpage then the you won't have the materials available and will give the "BABYLON.GradientMaterial is not a constructor" error.

[DylanD]

4 minutes ago, brianzinn said:

Go into Finder and make sure you have a folder /node_modules/babylonjs-materials/ - if you don't have the materials as a script on your webpage then the you won't have the materials available and will give the "BABYLON.GradientMaterial is not a constructor" error.

I checked and they are there under node_modules/babylonjs-materials/babylonjs.materials.js

I have also found them in the visual studio code folder viewer and copied the path then tried using that path in my src but nothing with that either.. I think I need to figure out how to make this thing a source...

 

Any other ideas?

 

[brianzinn]

Can't you just add to your index.html this script? The node modules is relative to your index.html file.
<script src="/node_modules/babylonjs-materials/babylonjs.materials.js"></script>
At some point you may want to look at a bundling that does this for you

[DylanD]

11 minutes ago, brianzinn said:

Can't you just add to your index.html this script? The node modules is relative to your index.html file.
<script src="/node_modules/babylonjs-materials/babylonjs.materials.js"></script>
At some point you may want to look at a bundling that does this for you

strange, it seems that when I paste that in it links, but when I typed it out it did not.  But ok...   

Thanks a million @brianzinn

Now if only I could get my npm server running...

[DylanD]

Its working!!!!