shadows

src/components/GameDesigner/GameDesigner.vue

@@ -142,7 +142,7 @@ export default {
             }
         },
         async loadEnvironment(scene, target){
-            //await gameEngine.loadPanorama(`/asset/default/43.webp`);
+            await gameEngine.loadPanorama(`/asset/default/43.webp`);
             await this.expandScenarioData(scene);
             target.objects = target.objects || {};
             let l = target.objects;

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)
         })
     }
 

src/pages/game-objects/[[id]].vue

@@ -94,6 +94,7 @@ export default {
                 if (this.id == 'add') {
                     this.$router.replace({ params: { id: this.object.id } });
                 }
+                await this.$nextTick();
                 if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
             } catch (err) {
                 console.error(err);

src/pages/scenarios/list.vue

@@ -3,7 +3,7 @@
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
                 <router-link :to="`/scenarios/${v.id}`">
-                    <v-img :src="`/asset/thumb/${v.sceneThumb[0]}.webp`"></v-img>
+                    <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
                 </router-link>
                 <div class="d-flex">
                     <span class="flex-grow-1">{{ v.name }}</span>