FAILED implementation test of shadowmapping of threeJS

Extensions/3D/A_RuntimeObject3DRenderer.ts

@@ -11,6 +11,8 @@ namespace gdjs {
       this._object = runtimeObject;
       this._threeObject3D = threeObject3D;
       this._threeObject3D.rotation.order = 'ZYX';
+      this._threeObject3D.castShadow = true;
+      this._threeObject3D.receiveShadow = true;
 
       instanceContainer
         .getLayer('')

Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts

@@ -83,6 +83,8 @@ namespace gdjs {
         );
 
       const boxMesh = new THREE.Mesh(geometry, materials);
+      boxMesh.receiveShadow = true;
+      boxMesh.castShadow = true;
 
       super(runtimeObject, instanceContainer, boxMesh);
       this._boxMesh = boxMesh;

Extensions/3D/DirectionalLight.ts

@@ -27,7 +27,15 @@ namespace gdjs {
           constructor() {
             this.light = new THREE.DirectionalLight();
             this.light.castShadow = true;
-            this.light.position.set(1, 0, 0);
+            this.light.shadow.mapSize.width = 1024;
+            this.light.shadow.mapSize.height = 1024;
+            this.light.shadow.camera.near = 0.1;
+            this.light.shadow.camera.far = 10;
+            this.light.shadow.camera.right = 10;
+            this.light.shadow.camera.left = 10;
+            this.light.shadow.camera.top = 10;
+            this.light.shadow.camera.bottom = 10;
+            this.light.position.set(0, 20, 0);
             this.rotationObject = new THREE.Group();
             this.rotationObject.add(this.light);
             this.updateRotation();
@@ -55,6 +63,13 @@ namespace gdjs {
               return false;
             }
             scene.add(this.rotationObject);
+            const helper = new THREE.DirectionalLightHelper(this.light);
+            scene.add(helper);
+            const cameraHelper = new THREE.CameraHelper(
+              this.light.shadow.camera
+            );
+            scene.add(cameraHelper);
+
             this._isEnabled = true;
             return true;
           }

Extensions/3D/JsExtension.js

@@ -2405,6 +2405,8 @@ module.exports = {
           getTransparentMaterial(),
         ];
         this._threeObject = new THREE.Mesh(geometry, materials);
+        this._threeObject.castShadow = true;
+        this._threeObject.receiveShadow = true;
         this._threeObject.rotation.order = 'ZYX';
         this._threeGroup.add(this._threeObject);
 

Extensions/3D/Model3DRuntimeObject3DRenderer.ts

@@ -47,6 +47,8 @@ namespace gdjs {
 
   const setBasicMaterialTo = (node: THREE.Object3D): void => {
     const mesh = node as THREE.Mesh;
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
     if (!mesh.material) {
       return;
     }

GDJS/Runtime/Model3DManager.ts

@@ -45,12 +45,13 @@ namespace gdjs {
          * easily spotted if rendered on screen.
          */
         const group = new THREE.Group();
-        group.add(
-          new THREE.Mesh(
-            new THREE.BoxGeometry(1, 1, 1),
-            new THREE.MeshBasicMaterial({ color: '#ff00ff' })
-          )
+        const mesh = new THREE.Mesh(
+          new THREE.BoxGeometry(1, 1, 1),
+          new THREE.MeshStandardMaterial({ color: '##ff00ff' })
         );
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        group.add(mesh);
         this._invalidModel = {
           scene: group,
           animations: [],

GDJS/Runtime/pixi-renderers/layer-pixi-renderer.ts

@@ -346,6 +346,8 @@ namespace gdjs {
               this._threePlaneGeometry,
               this._threePlaneMaterial
             );
+            this._threePlaneMesh.castShadow = true;
+            this._threePlaneMesh.receiveShadow = true;
 
             // Force to render the mesh last (after the rest of 3D objects, including
             // transparent ones). In most cases, the 2D rendering is composed of a lot

GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts

@@ -97,6 +97,7 @@ namespace gdjs {
               !gdjs.evtTools.common.isMobile()),
           preserveDrawingBuffer: true, // Keep to true to allow screenshots.
         });
+        this._threeRenderer.shadowMap.enabled = true;
         this._threeRenderer.useLegacyLights = true;
         this._threeRenderer.autoClear = false;
         this._threeRenderer.setSize(

GDJS/Runtime/pixi-renderers/runtimescene-pixi-renderer.ts

@@ -31,14 +31,12 @@ namespace gdjs {
       this._pixiContainer.sortableChildren = true;
       
       this._threeRenderer = this._runtimeGameRenderer
-      ? this._runtimeGameRenderer.getThreeRenderer()
-      : null;
-      if(this._threeRenderer)
-        {
-          this._threeRenderer.shadowMap.enabled = true;
-          this._threeRenderer.shadowMap.type = THREE.PCFShadowMap;
-        }
-        
+        ? this._runtimeGameRenderer.getThreeRenderer()
+        : null;
+      if (this._threeRenderer) {
+        this._threeRenderer.shadowMap.enabled = true;
+        this._threeRenderer.shadowMap.type = THREE.PCFShadowMap;
+      }
     }
 
     onGameResolutionResized() {

newIDE/app/src/InstancesEditor/index.js

@@ -225,6 +225,7 @@ export default class InstancesEditor extends Component<Props, State> {
       const threeRenderer = new THREE.WebGLRenderer({
         canvas: gameCanvas,
       });
+      threeRenderer.shadowMap.enabled = true;
       threeRenderer.useLegacyLights = true;
       threeRenderer.autoClear = false;
       threeRenderer.setSize(this.props.width, this.props.height);