fix: better shadows

package.json

@@ -12,40 +12,40 @@
     "copy:draco": "cp -r ./node_modules/three/examples/jsm/libs/draco/gltf/* ./public/draco"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.16",
-    "@fontsource/rubik": "^5.0.18",
-    "@studio-freight/lenis": "^1.0.39",
-    "@tweenjs/tween.js": "^22.0.0",
+    "@fontsource/inter": "^5.0.18",
+    "@fontsource/rubik": "^5.0.20",
+    "@studio-freight/lenis": "^1.0.42",
+    "@tweenjs/tween.js": "^23.1.2",
     "draco3d": "^1.5.7",
     "pinia": "^2.1.7",
-    "three": "^0.161.0",
-    "three-mesh-bvh": "^0.7.3",
+    "three": "^0.164.1",
+    "three-mesh-bvh": "^0.7.4",
     "three-pathfinding": "^1.2.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.7.2",
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.21",
-    "@types/three": "^0.161.2",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@rushstack/eslint-patch": "^1.10.2",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.10",
+    "@types/three": "^0.164.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.22.0",
+    "eslint-plugin-vue": "^9.25.0",
     "npm-run-all": "^4.1.5",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.71.1",
-    "typescript": "5.3.3",
-    "vite": "^5.1.4",
+    "sass": "^1.76.0",
+    "typescript": "5.4.5",
+    "vite": "^5.2.11",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^1.8.27"
   }

src/components/Page/PHome.vue

@@ -12,8 +12,8 @@
       <OInterActiveScene
         ref="scene"
         class="PHome__scene"
-        model-url="/models/keypad/keypad.bake.gltf"
-        env-map-url="/envmap/brown_photostudio_02_1k.hdr"
+        model-url="models/keypad/keypad.bake.gltf"
+        :env-map-url="envMapUrl"
         :interactive-element-names="[
           'key-0',
           'key-1',
@@ -55,21 +55,22 @@
 </template>
 
 <script lang="ts" setup>
-  import AScrollHint from '@/components/Atom/AScrollHint.vue'
-  import MControlsChooser from '@/components/Molecule/MControlsChooser.vue'
-  import MFeaturePreview from '@/components/Molecule/MFeaturePreview.vue'
-  import MHeader from '@/components/Molecule/MHeader.vue'
-  import OAppearList from '@/components/Organism/OAppearList.vue'
-  import OInterActiveScene from '@/components/Organism/OInteractiveScene.vue'
-  import { computed } from 'vue'
-  import { useControlsStore } from '@/state/useControlsStore'
-  import { useAnimationsStore } from '@/state/useAnimationsStore'
-  import { useInteractiveObjectsStore } from '@/state/useInteractiveObjectsStore'
-  import { useClickWithoutDragging } from '@/composables/useClickWithoutDragging'
-  import { Easing, Tween } from '@tweenjs/tween.js'
-  import { DURATION_SNAPPY } from '@/constants'
-
-  const controlsStore = useControlsStore()
+import AScrollHint from '@/components/Atom/AScrollHint.vue'
+import MControlsChooser from '@/components/Molecule/MControlsChooser.vue'
+import MFeaturePreview from '@/components/Molecule/MFeaturePreview.vue'
+import MHeader from '@/components/Molecule/MHeader.vue'
+import OAppearList from '@/components/Organism/OAppearList.vue'
+import OInterActiveScene from '@/components/Organism/OInteractiveScene.vue'
+import { computed } from 'vue'
+import { useControlsStore } from '@/state/useControlsStore'
+import { useAnimationsStore } from '@/state/useAnimationsStore'
+import { useInteractiveObjectsStore } from '@/state/useInteractiveObjectsStore'
+import { useClickWithoutDragging } from '@/composables/useClickWithoutDragging'
+import { Easing, Tween } from '@tweenjs/tween.js'
+import { DURATION_SNAPPY } from '@/constants'
+import envMapUrl from '@/assets/envmap/brown_photostudio_02_1k.hdr?url'
+
+const controlsStore = useControlsStore()
   const animationsStore = useAnimationsStore()
   const interactiveObjectsStore = useInteractiveObjectsStore()
   const tweens = new Map<string, Tween<Record<string, any>>>()

src/composables/useEnvMap.ts

@@ -10,7 +10,7 @@ export async function useEnvMap (renderer: WebGLRenderer, url: string): Promise<
     rgbeLoader
       .setDataType(HalfFloatType)
       .load(
-        `${import.meta.env.BASE_URL}${url}`,
+        url,
         function (texture: Texture) {
           const envMap = pmremGenerator.fromEquirectangular(texture).texture
 

src/composables/useInteractiveGLTF.ts

@@ -25,7 +25,7 @@ export async function useInteractiveGLTF (url: string, interactiveElementNames:
       child.castShadow = true
       child.shadow.mapSize.width = 1024
       child.shadow.mapSize.height = 1024
-      child.shadow.bias = -0.005
+      child.shadow.bias = -0.001
       return
     }
 

src/state/useAnimationsStore.ts

@@ -40,7 +40,7 @@ export const useAnimationsStore = defineStore('animations', () => {
     mixer.value?.setTime(factor * duration.value)
 
     if (newFrame !== currentFrame.value) {
-      currentFrame.value = Math.round(factor * frameCount)
+      currentFrame.value = newFrame
     }
   }
 

src/utils/createLights.ts

@@ -8,9 +8,9 @@ export function createPointLight (intensity: number, x: number, y: number, z: nu
 
   light.castShadow = true
 
-  light.shadow.mapSize.width = 512
-  light.shadow.mapSize.height = 512
-  light.shadow.bias = -0.0001
+  light.shadow.mapSize.width = 1024
+  light.shadow.mapSize.height = 1024
+  light.shadow.bias = -0.001
 
   return light
 }

vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig(({ mode }) => ({
     vue(),
     visualizer({ filename: 'dist/bundle.html' })
   ],
+
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),