DylanD

Gradient Material in TypeScript

Recommended Posts

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?

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


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

 

Share this post


Link to post
Share on other sites

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 :)

Share this post


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

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.