shadows

src/lib/gameEngine.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+import { DRACOLoader } from 'three/examples/jsm/Addons.js';
 import { OrbitControls } from 'three/examples/jsm/Addons.js';
 import { ViewportGizmo } from "three-viewport-gizmo";
 //import { AnaglyphEffect } from './three/AnaglyphEffect';
@@ -15,7 +16,7 @@ class GameEngine {
         this.aspect = this.w / this.h
         const gameEngine = this;
 
-        this.perspectiveCamera = new THREE.PerspectiveCamera(50, this.aspect, 0.01, 1000);
+        this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 1000);
         this.raycaster = new THREE.Raycaster();
         this.perspectiveCamera.position.set(0, 0, 10);
 
@@ -30,20 +31,46 @@ class GameEngine {
             0.01, 1000);
         this.orthographicCamera.position.set( 0, 0, 100 );
         const scene = new THREE.Scene();
-        // this.light = new THREE.AmbientLight( 0x404040, 0 ); // soft white light
+
+        // let light = new THREE.AmbientLight( 0x404040, 300 ); // soft white light
         // scene.add( this.light );
 
+        const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+        dirLight.color.setHSL( 0.1, 1, 0.95 );
+        dirLight.position.set( - 1, 1.75, 1 );
+        dirLight.position.multiplyScalar( 20 );
+        scene.add( dirLight );
+    
+        dirLight.castShadow = true;
+    
+        dirLight.shadow.mapSize.width = 2048;
+        dirLight.shadow.mapSize.height = 2048;
+    
+        const d = 50;
+    
+        dirLight.shadow.camera.left = - d;
+        dirLight.shadow.camera.right = d;
+        dirLight.shadow.camera.top = d;
+        dirLight.shadow.camera.bottom = - d;
+    
+        dirLight.shadow.camera.far = 3500;
+        dirLight.shadow.bias = - 0.0001;
+
         const renderer = new THREE.WebGLRenderer({ 
             antialias: true, 
             // alpha: true,
             // preserveDrawingBuffer: true
+            //powerPreference: "high-performance",
         });
         renderer.setPixelRatio( window.devicePixelRatio );
         // renderer.toneMapping = THREE.CineonToneMapping;
         // renderer.toneMappingExposure = 1.2;
         // renderer.shadowMap.enabled = true;
         // renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
-        renderer.outputEncoding = THREE.sRGBEncoding;
+        // renderer.toneMapping = THREE.ACESFilmicToneMapping;
+		// renderer.toneMappingExposure = 1;
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         renderer.setSize(this.w, this.h);
         renderer.setViewport( 0, 0, this.w, this.h );
         renderer.autoClear = true;
@@ -88,7 +115,10 @@ class GameEngine {
         this.clock = clock;
         this.renderer = renderer;
         this.scene = scene;
+
+        this.draco = new DRACOLoader().setDecoderPath( '/3rdparty/draco/' );
         this.loader = new GLTFLoader();
+        this.loader.setDRACOLoader(this.draco);
         this.mixer = mixer;
 
         this.activeObjects = new THREE.Group();
@@ -116,7 +146,19 @@ class GameEngine {
 
     async load(url, progress){
         return new Promise((resolve, reject)=>{
-            this.loader.load(url, resolve, progress, reject)
+            this.loader.load(url, o=>{
+                o.scene.traverse(object=>{
+                    // if (object.name == 'environment'){
+                    //     console.log('env recomputing')
+                    //     object.material.shading = THREE.SmoothShading;
+                    //     object.geometry.computeVertexNormals(true);
+                    // }
+                    object.frustumCulled = false;
+                    object.castShadow = true;
+                    object.receiveShadow = true;
+                });
+                resolve(o);
+            }, progress, reject)
         })
     }