[SOLVED] Requirejs + babylon4 = trouble

Questions
1

Hi,

This relates to my previous post, but I’ve managed to get to the root cause of the issue (but not solve it!).

Essentially, when requirejs library is present, Babylon acts differently, here’re some scenarios:

  1. No requirejs: everything works as expected.
  2. requirejs present, Babylon loaded via requirejs: Babylon works, materials from materialLibrary don’t! I’ve tried loading them with requirejs or just dynamically adding them via script tag, result is the same: runtime error “BABYLON…Material is not a constructor”.
  3. requirejs present, Babylon loaded via script tag: runtime error “BABYLON is not defined”.

Babylon v3.2.0 worked as expected (scenario 2).

Is there a solution to this conundrum?

2

I am not seeing any issue with require on the latest:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>MatLib Require</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 0;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>

    <script>
        //The requirejs config
        requirejs.config({
            baseUrl: '.',
            paths: {
                babylonjs: 'https://preview.babylonjs.com/babylon.max',
                'babylonjs-materials': 'https://preview.babylonjs.com/materialsLibrary/babylonjs.materials',
                pep: 'https://code.jquery.com/pep/0.4.3/pep'
            },
            shim : {
                babylonjs: {deps: ['pep']}
            }
        });

        //The main entrypoint to my app
        require([
            'babylonjs',
            'babylonjs-materials'
        ], function(
            BJS,
            MAT
        ){
            var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
            var engine = new BJS.Engine(canvas, true); // Generate the BABYLON 3D engine
            var scene = new BJS.Scene(engine);

            // This creates and positions a free camera (non-mesh)
            var camera = new BJS.FreeCamera("camera1", new BJS.Vector3(0, 5, -10), scene);

            // This targets the camera to scene origin
            camera.setTarget(BJS.Vector3.Zero());

            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BJS.HemisphericLight("light", new BJS.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            // Our built-in 'sphere' shape.
            var sphere = BJS.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

            // Move the sphere upward 1/2 its height
            sphere.position.y = 1;

            // Our built-in 'ground' shape.
            var ground = BJS.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

            ground.material = new MAT.GridMaterial("", scene);

            engine.runRenderLoop(() => {
                scene.render();
            });
        })
    </script>

</body>

</html>
1 Like
3

@sebavan - thanks dude, it worked!