Babylonjs Materials Library giving error

Getting error for the babylonjs materials library

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollShape</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon.js"></script>
    <!-- <script src="https://cdn.babylonjs.com/babylon.js"></script> -->
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://unpkg.com/earcut@2.1.1/dist/earcut.min.js"></script>
    <script src="https://cdn.babylonjs.com/ammo.js"></script>

</head>
<body>
    <canvas id = "renderCanvas"></canvas>
    <script src="js/app.js"></script>
</body>
</html>

Error Sceenshot:

I don’t know if it’s the problem but you should not mix the versions of the packages: https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js is 5.0 whereas you load Babylon.js 4.2.0: you should use the 4.2.0 version of the materials library package.

This would definitely be the issue :slight_smile:

Please, either you should always use preview or always cdn, not mixing here will help a lot

Where can I find cdn of materials library, I can only see preview everywhere.

It would really help me If you could share the link here

Thank you

It’s the same link than the preview one but with cdn instead of preview:

https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js

@Evgeni_Popov Thank you so much :pray:, It is working now

1 Like