I’m testing out how to use node material files within my code. I first tested this out on the playground and it works fine there: Babylon.js Playground
When I try to replicate it within visual studio code it throws errors. Here is the code:
var canvas = document.getElementById("canvas");
var engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
});
const createScene = () => {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera(
"camera1",
new BABYLON.Vector3(0, 5, -10),
scene
);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var hemiLight = new BABYLON.HemisphericLight(
"HemiLight",
new BABYLON.Vector3(0, 1, 0),
scene
);
// Our built-in 'sphere' shape.
var sphere = BABYLON.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 = BABYLON.MeshBuilder.CreateGround(
"ground",
{ width: 6, height: 6 },
scene
);
var nodeMaterial = new BABYLON.NodeMaterial("custom node material");
nodeMaterial
.loadAsync(
"https://3d-assets-bucket.s3-us-west-1.amazonaws.com/Shaders/pbrMaterial.json"
)
.then(() => {
nodeMaterial.build(true);
});
ground.material = nodeMaterial;
return scene;
};
var scene = createScene();
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", () => {
engine.resize();
});
Here is what I see in the console:
What am I missing here?