I noticed that objects created with ExtrudePolygon are not receiving shadows no matter what i did to fix that bug, please some one can help ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Extrude Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/earcut.min.js"></script> <!-- Include earcut library -->
</head>
<body>
<canvas id="renderCanvas" touch-action="none" style="width: 100%; height: 100%;"></canvas>
<script>
// Get the canvas element from the DOM
const canvas = document.getElementById("renderCanvas");
// Associate a Babylon Engine to it
const engine = new BABYLON.Engine(canvas, true);
// Create a scene
const scene = new BABYLON.Scene(engine);
// Set clear color
scene.clearColor = new BABYLON.Color4(0.95, 0.95, 0.95, 1);
// Create a camera and attach it to the canvas
const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 3, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
// Add a hemispheric light
const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.5;
// Add a directional light for shadows
const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
dirLight.position = new BABYLON.Vector3(10, 10, 10);
dirLight.intensity = 0.5;
// Create a shadow generator
const shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
shadowGenerator.useBlurExponentialShadowMap = true;
shadowGenerator.blurKernel = 32;
shadowGenerator.setDarkness(0.5);
shadowGenerator.bias = 0.001;
// Create a ground
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 20, height: 20 }, scene);
ground.receiveShadows = true;
const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
ground.material = groundMaterial;
// Define the path for the first extruded object
const squarePath = [
new BABYLON.Vector3(-1, 0, -1),
new BABYLON.Vector3(1, 0, -1),
new BABYLON.Vector3(1, 0, 1),
new BABYLON.Vector3(-1, 0, 1),
new BABYLON.Vector3(-1, 0, -1) // Close the path
];
// Extrude the first path
const extrudedSquare = BABYLON.MeshBuilder.ExtrudePolygon("extrudedSquare", {
shape: squarePath,
depth: 1,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);
extrudedSquare.position.y = 0.5;
// Assign a material to the first extruded square
const squareMaterial = new BABYLON.StandardMaterial("squareMaterial", scene);
squareMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1); // Light blue color
extrudedSquare.material = squareMaterial;
// Enable shadows for the first square
extrudedSquare.receiveShadows = true;
shadowGenerator.addShadowCaster(extrudedSquare);
// Define the path for the second extruded object
const smallerSquarePath = [
new BABYLON.Vector3(-0.5, 0, -0.5),
new BABYLON.Vector3(0.5, 0, -0.5),
new BABYLON.Vector3(0.5, 0, 0.5),
new BABYLON.Vector3(-0.5, 0, 0.5),
new BABYLON.Vector3(-0.5, 0, -0.5) // Close the path
];
// Extrude the second path
const extrudedSmallerSquare = BABYLON.MeshBuilder.ExtrudePolygon("extrudedSmallerSquare", {
shape: smallerSquarePath,
depth: 1,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);
extrudedSmallerSquare.position.y = 2; // Place it above the first square
// Assign a material to the second extruded square
const smallerSquareMaterial = new BABYLON.StandardMaterial("smallerSquareMaterial", scene);
smallerSquareMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5); // Light red color
extrudedSmallerSquare.material = smallerSquareMaterial;
// Enable shadows for the second square
extrudedSmallerSquare.receiveShadows = true;
shadowGenerator.addShadowCaster(extrudedSmallerSquare);
// Render loop
engine.runRenderLoop(() => {
scene.render();
});
// Resize the engine on window resize
window.addEventListener("resize", () => {
engine.resize();
});
</script>
</body>
</html>
