From 09584be48705d24a4eaf89655ac78138fc95108d Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Sun, 5 Jan 2025 19:11:12 +0100
Subject: [PATCH] fix: typescript build issues (#578)

* chore(tsconfig): update module resolution and linting options

- Changed moduleResolution from "node" to "bundler" for improved compatibility with bundlers.
- Added allowImportingTsExtensions to enable importing TypeScript files with extensions.
- Updated linting options: enabled noFallthroughCasesInSwitch, noUnusedParameters, and isolatedModules.
- Removed declaration, sourceMap, and esModuleInterop options for cleaner configuration.

* fix(Edges): ensure parent is a Mesh instance before accessing geometry

* refactor(Lensflare): migrate Lensflare import to three-stdlib for improved typescript compatibility

* fix(Outline): enhance OutlineMaterial type definition and improve material instantiation for better TypeScript support

* fix(PositionalAudio): migrate PositionalAudioHelper import to three-stdlib for improved TypeScript compatibility

* refactor(PointerLockControls): enhance TypeScript support by extending PointerLockControls with event types and enabling shallow references

* fix(SVGLoader): implement TresSVGLoader class to enhance compatibility with TresJS loader interface and streamline SVG loading process

* fix(GLTFLoader): implement TresGLTFLoader class for enhanced compatibility with TresJS loader system and improve GLTF loading functionality

* refactor(meshGlassMaterial): consolidate imports for improved readability and maintainability

* refactor(Line2): consolidate Line2 imports from three-stdlib for improved compatibility and maintainability

* refactor(ShaderData): replace mapLinear and clamp imports with MathUtils methods for improved consistency and maintainability

* fix(Precipitation): enhance texture handling by adding support for texture URLs and updating prop types for better flexibility

* refactor(FBXLoader): implement TresFBXLoader class to enhance compatibility with TresJS loader system and improve FBX loading functionality

* chore(playground): improved demos for gltf and fbx

* refactor(useEnvironment): simplify loader logic and improve type handling for environment map loading

* chore(FBXModelDemo): add OrbitControls and adjust FBXModel position and shadow casting

* chore(Jeep): adjust truck position, enable shadow casting for mesh components

* chore: adding shadows and correct spacial parameters to model playgrounds

* refactor(PointerLockControls): revert wrong change on extend PointerLockControls

* chore: fix lint

* refactor(useFBX): improve type handling for useFBX function to support generic path types similar to useGLTF

* refactor(Precipitation): update prop type documentation to correctly reference PrecipitationProps instead of StarsProps and ContactShadowsProps

* refactor(useEnvironment): simplify loader callback by removing unnecessary type annotation

* refactor(Edges): improve type checks for parent geometry in Edges component

* refactor(Precipitation): enhance prop type definitions and improve texture handling logic

* refactor(Edges): reorder import statements for better readability
---
 playground/vue/components.d.ts                |  4 +-
 playground/vue/src/components/AkuAku.vue      | 14 ---
 playground/vue/src/components/ModelsDemo.vue  | 78 ----------------
 playground/vue/src/components/fbx/Jeep.vue    | 27 ++++++
 .../vue/src/components/gltf/BlenderCube.vue   | 28 ++++++
 playground/vue/src/components/gltf/index.vue  | 63 -------------
 .../vue/src/pages/loaders/FBXModelDemo.vue    | 44 +++++++++
 .../vue/src/pages/loaders/GLTFModelDemo.vue   | 41 +++++++++
 .../vue/src/pages/loaders/UseFBXDemo.vue      | 39 ++++++++
 .../vue/src/pages/loaders/UseGLTFDemo.vue     | 15 ++--
 playground/vue/src/router/routes/loaders.ts   | 15 ++++
 src/core/abstractions/Edges.vue               |  6 +-
 src/core/abstractions/Lensflare/component.vue |  4 +-
 src/core/abstractions/Outline/component.vue   | 13 ++-
 src/core/abstractions/PositionalAudio.vue     |  2 +-
 src/core/controls/PointerLockControls.vue     | 39 ++++----
 src/core/loaders/SVG/component.vue            | 24 +++--
 src/core/loaders/useFBX/index.ts              | 59 ++++++++++--
 src/core/loaders/useGLTF/index.ts             | 89 +++++++++++++++----
 .../materials/meshGlassMaterial/material.ts   |  7 +-
 src/core/shapes/Line2.vue                     |  4 +-
 src/core/staging/Precipitation.vue            | 71 +++++++++++----
 src/core/staging/Sparkles/ShaderData.ts       |  4 +-
 src/core/staging/useEnvironment/index.ts      | 32 ++++---
 tsconfig.json                                 | 16 ++--
 25 files changed, 469 insertions(+), 269 deletions(-)
 delete mode 100644 playground/vue/src/components/AkuAku.vue
 delete mode 100644 playground/vue/src/components/ModelsDemo.vue
 create mode 100644 playground/vue/src/components/fbx/Jeep.vue
 create mode 100644 playground/vue/src/components/gltf/BlenderCube.vue
 delete mode 100644 playground/vue/src/components/gltf/index.vue
 create mode 100644 playground/vue/src/pages/loaders/FBXModelDemo.vue
 create mode 100644 playground/vue/src/pages/loaders/GLTFModelDemo.vue
 create mode 100644 playground/vue/src/pages/loaders/UseFBXDemo.vue

diff --git a/playground/vue/components.d.ts b/playground/vue/components.d.ts
index 40a84940e..06f78b111 100644
--- a/playground/vue/components.d.ts
+++ b/playground/vue/components.d.ts
@@ -7,10 +7,12 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/AkuAku.vue')['default']
+    AkuAku: typeof import('./src/components/gltf/BlenderCube.vue')['default']
+    BlenderCube: typeof import('./src/components/gltf/BlenderCube.vue')['default']
     FboCube: typeof import('./src/components/FboCube.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
+    Jeep: typeof import('./src/components/fbx/Jeep.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/playground/vue/src/components/AkuAku.vue b/playground/vue/src/components/AkuAku.vue
deleted file mode 100644
index 26583332b..000000000
--- a/playground/vue/src/components/AkuAku.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-
-const { nodes } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
-  { draco: true },
-)
-
-const model = nodes.AkuAku
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>
diff --git a/playground/vue/src/components/ModelsDemo.vue b/playground/vue/src/components/ModelsDemo.vue
deleted file mode 100644
index f6a02c635..000000000
--- a/playground/vue/src/components/ModelsDemo.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { FBXModel, GLTFModel, useFBX, useGLTF } from '@tresjs/cientos'
-import { useRenderLoop } from '@tresjs/core'
-import { ref } from 'vue'
-
-const modelPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
-const modelPathFbx = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'
-
-const pokeballPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/realistic-pokeball/scene.gltf'
-const { scene: model } = await useGLTF(modelPath, {
-  draco: true,
-})
-
-const { scene: pokeball } = await useGLTF(pokeballPath, {
-  draco: true,
-})
-
-const modelFbx = await useFBX(modelPathFbx)
-
-const akuAkuRef = ref(null)
-const jeepRef = ref(null)
-
-/* const gl = {
-  clearColor: '#333',
-  alpha: true,
-  toneMapping: NoToneMapping,
-} */
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (akuAkuRef.value) {
-    akuAkuRef.value.instance.rotation.y += 0.01
-  }
-  if (jeepRef.value) {
-    jeepRef.value.instance.rotation.y -= 0.01
-  }
-})
-</script>
-
-<template>
-  <TresGroup>
-    <primitive
-      :object="model"
-      :position="[-3, 0, 0]"
-    />
-    <Suspense>
-      <GLTFModel
-        ref="akuAkuRef"
-        :path="modelPath"
-        draco
-        :position="[0, -2, 2]"
-        :rotation-x="0.5"
-        name="Aku_aku"
-        cast-shadow
-      />
-    </Suspense>
-    <!-- FBX MODELS -->
-    <primitive
-      :object="modelFbx"
-      :position="[6, 0, 2]"
-      :scale="[0.01, 0.01, 0.01]"
-    />
-    <Suspense>
-      <FBXModel
-        ref="jeepRef"
-        :path="modelPathFbx"
-        :scale="0.01"
-        :position="[0, -1, -2]"
-        name="jeep_model"
-        cast-shadow
-      />
-    </Suspense>
-    <primitive
-      :object="pokeball"
-    />
-  </TresGroup>
-</template>
diff --git a/playground/vue/src/components/fbx/Jeep.vue b/playground/vue/src/components/fbx/Jeep.vue
new file mode 100644
index 000000000..7f71f07e9
--- /dev/null
+++ b/playground/vue/src/components/fbx/Jeep.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useFBX } from '@tresjs/cientos'
+import { type Group, Mesh } from 'three'
+
+const model = await useFBX(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',
+)
+
+const truckRef = shallowRef<Group | null>(null)
+
+watch(truckRef, (truck) => {
+  if (truck) {
+    truck.scale.set(0.01, 0.01, 0.01)
+    truck.position.set(0, -1.6, 0)
+    truck.rotation.y = -Math.PI * 0.5
+    truck.traverse((child) => {
+      if (child instanceof Mesh) {
+        child.castShadow = true
+      }
+    })
+  }
+})
+</script>
+
+<template>
+  <primitive ref="truckRef" :object="model" />
+</template>
diff --git a/playground/vue/src/components/gltf/BlenderCube.vue b/playground/vue/src/components/gltf/BlenderCube.vue
new file mode 100644
index 000000000..8d3e7d117
--- /dev/null
+++ b/playground/vue/src/components/gltf/BlenderCube.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { Mesh } from 'three'
+
+const { nodes } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  { draco: true },
+)
+
+const modelRef = shallowRef<TresObject | null>(null)
+
+const model = nodes.Cube
+
+watch(modelRef, (model) => {
+  if (model) {
+    model.traverse((child: Mesh) => {
+      if (child instanceof Mesh) {
+        child.castShadow = true
+      }
+    })
+  }
+})
+</script>
+
+<template>
+  <primitive ref="modelRef" :object="model" />
+</template>
diff --git a/playground/vue/src/components/gltf/index.vue b/playground/vue/src/components/gltf/index.vue
deleted file mode 100644
index b75a306d6..000000000
--- a/playground/vue/src/components/gltf/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { GLTFModel, OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { reactive, ref, watchEffect } from 'vue'
-import type { Object3D } from 'three'
-
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-const venomSnake = ref(null)
-
-watchEffect(() => {
-  if (venomSnake.value) {
-    const { model }: { model: Object3D } = venomSnake.value
-    model.scale.set(0.02, 0.02, 0.02)
-    model.position.set(0, 2, 0)
-    model.traverse((child) => {
-      if (child.isMesh) {
-        child.castShadow = true
-        child.receiveShadow = true
-      }
-    })
-  }
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="state">
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :fov="45"
-      :near="0.1"
-      :far="1000"
-      :look-at="[-8, 3, -3]"
-    />
-    <OrbitControls make-default />
-    <TresAmbientLight :intensity="0.5" />
-
-    <Suspense>
-      <GLTFModel
-        ref="venomSnake"
-        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf"
-        draco
-      />
-    </Suspense>
-    <TresAxesHelper />
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="1"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>
diff --git a/playground/vue/src/pages/loaders/FBXModelDemo.vue b/playground/vue/src/pages/loaders/FBXModelDemo.vue
new file mode 100644
index 000000000..82f454ef4
--- /dev/null
+++ b/playground/vue/src/pages/loaders/FBXModelDemo.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { FBXModel, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <FBXModel
+        scale="0.01"
+        :position="[0, -1.6, 0]"
+        :rotation-y="-Math.PI * 0.5"
+        cast-shadow
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx"
+      />
+    </Suspense>
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      :position-y="-2"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[5, 10, 5]"
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/loaders/GLTFModelDemo.vue b/playground/vue/src/pages/loaders/GLTFModelDemo.vue
new file mode 100644
index 000000000..c3c606bb3
--- /dev/null
+++ b/playground/vue/src/pages/loaders/GLTFModelDemo.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { GLTFModel, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <GLTFModel
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
+        cast-shadow
+        :position="[0, 1, 0]"
+      />
+    </Suspense>
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[5, 10, 5]"
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/loaders/UseFBXDemo.vue b/playground/vue/src/pages/loaders/UseFBXDemo.vue
new file mode 100644
index 000000000..d8e092b06
--- /dev/null
+++ b/playground/vue/src/pages/loaders/UseFBXDemo.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import Jeep from '../../components/fbx/Jeep.vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <Jeep />
+    </Suspense>
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      :position-y="-2"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[5, 10, 5]"
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/loaders/UseGLTFDemo.vue b/playground/vue/src/pages/loaders/UseGLTFDemo.vue
index 087d64056..e4bf80ced 100644
--- a/playground/vue/src/pages/loaders/UseGLTFDemo.vue
+++ b/playground/vue/src/pages/loaders/UseGLTFDemo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { CameraControls } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import ModelsDemo from '../../components/ModelsDemo.vue'
+import BlenderCube from '../../components/gltf/BlenderCube.vue'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -16,14 +16,15 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
-    <CameraControls />
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
     <Suspense>
-      <ModelsDemo />
+      <TresGroup :position="[0, 1, 0]">
+        <BlenderCube />
+      </TresGroup>
     </Suspense>
     <TresMesh
       :rotate-x="Math.PI * -0.5"
-      :position-y="-2"
       receive-shadow
     >
       <TresPlaneGeometry :args="[40, 40]" />
@@ -33,7 +34,7 @@ const gl = {
     <TresDirectionalLight
       :intensity="1"
       cast-shadow
-      :position="[0, 10, 0]"
+      :position="[5, 10, 5]"
     />
   </TresCanvas>
 </template>
diff --git a/playground/vue/src/router/routes/loaders.ts b/playground/vue/src/router/routes/loaders.ts
index 6f32f21e0..9df590906 100644
--- a/playground/vue/src/router/routes/loaders.ts
+++ b/playground/vue/src/router/routes/loaders.ts
@@ -9,6 +9,21 @@ export const loadersRoutes = [
     name: 'useGLTF',
     component: () => import('../../pages/loaders/UseGLTFDemo.vue'),
   },
+  {
+    path: '/loaders/gltf-model',
+    name: 'GLTFModel',
+    component: () => import('../../pages/loaders/GLTFModelDemo.vue'),
+  },
+  {
+    path: '/loaders/use-fbx',
+    name: 'useFBX',
+    component: () => import('../../pages/loaders/UseFBXDemo.vue'),
+  },
+  {
+    path: '/loaders/fbx-model',
+    name: 'FBXModel',
+    component: () => import('../../pages/loaders/FBXModelDemo.vue'),
+  },
   {
     path: '/loaders/use-video-texture',
     name: 'useVideoTexture',
diff --git a/src/core/abstractions/Edges.vue b/src/core/abstractions/Edges.vue
index 84bd30ffa..f1e1f7e1b 100644
--- a/src/core/abstractions/Edges.vue
+++ b/src/core/abstractions/Edges.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, shallowRef, toRefs, watch } from 'vue'
-import type { BufferGeometry, LineSegments } from 'three'
-import { EdgesGeometry } from 'three'
+import type { LineSegments } from 'three'
+import { BufferGeometry, EdgesGeometry } from 'three'
 import type { TresColor } from '@tresjs/core'
 
 export interface EdgesProps {
@@ -31,7 +31,7 @@ watch(
     if (lineSegmentsRef.value) {
       const parent = lineSegmentsRef.value.parent
 
-      if (parent) {
+      if (parent && 'geometry' in parent && parent.geometry instanceof BufferGeometry) {
         const geometry = parent.geometry
 
         // Update geometry and threshold if necessary.
diff --git a/src/core/abstractions/Lensflare/component.vue b/src/core/abstractions/Lensflare/component.vue
index db22f03c9..9668e32ac 100644
--- a/src/core/abstractions/Lensflare/component.vue
+++ b/src/core/abstractions/Lensflare/component.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { normalizeColor } from '@tresjs/core'
 import { TextureLoader } from 'three'
-import { Lensflare } from 'three/examples/jsm/objects/Lensflare'
+import { Lensflare } from 'three-stdlib'
 import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import type { Texture } from 'three'
-import type { LensflareElement } from 'three/examples/jsm/objects/Lensflare'
+import type { LensflareElement } from 'three-stdlib'
 import { partialLensflarePropsArrayToLensflarePropsArray as fillInProps, filterLensflareElementProps } from '.'
 import type { LensflareElementProps, SeedProps } from '.'
 
diff --git a/src/core/abstractions/Outline/component.vue b/src/core/abstractions/Outline/component.vue
index 981b69db4..2ad480982 100644
--- a/src/core/abstractions/Outline/component.vue
+++ b/src/core/abstractions/Outline/component.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TresColor } from '@tresjs/core'
 import { normalizeColor, useTres } from '@tresjs/core'
-import type { BufferGeometry, Group } from 'three'
+import type { BufferGeometry, Group, Material, ShaderMaterial } from 'three'
 import { BackSide, InstancedMesh, Mesh, SkinnedMesh, Vector2 } from 'three'
 import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
 import OutlineMaterialImpl from './OutlineMaterialImpl'
@@ -29,6 +29,13 @@ interface OutlineProps {
   renderOrder?: number
 }
 
+interface OutlineMaterial extends ShaderMaterial {
+  thickness?: number
+  screenspace?: boolean
+  size?: Vector2
+  color?: TresColor
+}
+
 const props = withDefaults(defineProps<OutlineProps>(), {
   color: 'black',
   opacity: 1,
@@ -46,7 +53,7 @@ const groupRef = shallowRef()
 
 defineExpose({ instance: groupRef })
 
-const material = new OutlineMaterialImpl({ ...props })
+const material = new OutlineMaterialImpl({ ...props }) as OutlineMaterial
 const contextSize = new Vector2(1, 1)
 let oldAngle = 0
 let oldGeometry: BufferGeometry | null = null
@@ -73,7 +80,7 @@ function updateMesh(group: Group) {
       group.add(mesh)
     }
     else if (parent.isInstancedMesh) {
-      mesh = new InstancedMesh(parent.geometry, material, parent.count)
+      mesh = new InstancedMesh(parent.geometry, material as Material, parent.count)
       mesh.instanceMatrix = parent.instanceMatrix
       group.add(mesh)
     }
diff --git a/src/core/abstractions/PositionalAudio.vue b/src/core/abstractions/PositionalAudio.vue
index 8ee5a363c..65ebe4a85 100644
--- a/src/core/abstractions/PositionalAudio.vue
+++ b/src/core/abstractions/PositionalAudio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useLoader, useTresContext } from '@tresjs/core'
 import { AudioListener, AudioLoader, Box3 } from 'three'
-import { PositionalAudioHelper } from 'three/examples/jsm/helpers/PositionalAudioHelper'
+import { PositionalAudioHelper } from 'three-stdlib'
 import { onBeforeUnmount, onMounted, shallowReactive, shallowRef, toRefs, watch } from 'vue'
 import type { LoaderProto } from '@tresjs/core'
 import type { Material, Object3D, PositionalAudio } from 'three'
diff --git a/src/core/controls/PointerLockControls.vue b/src/core/controls/PointerLockControls.vue
index 2100e63e0..c5c5fd4c1 100644
--- a/src/core/controls/PointerLockControls.vue
+++ b/src/core/controls/PointerLockControls.vue
@@ -2,9 +2,17 @@
 import { useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 import { PointerLockControls } from 'three-stdlib'
-import { onUnmounted, ref, watch } from 'vue'
-import type { TresControl } from '@tresjs/core'
-import type { Camera } from 'three'
+import { onUnmounted, shallowRef, watch } from 'vue'
+import type { Camera, EventDispatcher } from 'three'
+
+// Define the event types for PointerLockControls
+interface PointerLockControlsEvents {
+  lock: () => void
+  unlock: () => void
+}
+
+// Extend the PointerLockControls type to include enabled property
+type ExtendedPointerLockControls = PointerLockControls & EventDispatcher<PointerLockControlsEvents> & { enabled: boolean }
 
 export interface PointerLockControlsProps {
   /**
@@ -55,7 +63,7 @@ watch(props, () => {
   invalidate()
 })
 
-const controlsRef = ref<TresControl & PointerLockControls | null>(null)
+const controlsRef = shallowRef<ExtendedPointerLockControls | null>(null)
 let triggerSelector: HTMLElement | undefined
 
 extend({ PointerLockControls })
@@ -74,23 +82,22 @@ watch(controlsRef, (value) => {
   const selector = document.getElementById(props.selector || '')
   triggerSelector = selector || renderer.value.domElement
 
-  useEventListener(controls.value as any, 'change', () => {
-    emit('change', controls.value)
-    invalidate()
-  })
   useEventListener(triggerSelector, 'click', () => {
-    controlsRef.value?.lock()
-    controlsRef.value?.addEventListener('lock', () => isLockEmitter(true))
-    controlsRef.value?.addEventListener('unlock', () => isLockEmitter(false))
-    invalidate()
+    if (controlsRef.value) {
+      controlsRef.value.lock()
+      controlsRef.value.addEventListener('lock', () => isLockEmitter(true))
+      controlsRef.value.addEventListener('unlock', () => isLockEmitter(false))
+      invalidate()
+    }
   })
 })
 
 onUnmounted(() => {
-  controls.value?.removeEventListener('lock', () => isLockEmitter(true))
-  controls.value?.removeEventListener('unlock', () => isLockEmitter(false))
-  if (controlsRef.value) {
-    controlsRef.value.dispose()
+  const controls = controlsRef.value
+  if (controls) {
+    controls.removeEventListener('lock', () => isLockEmitter(true))
+    controls.removeEventListener('unlock', () => isLockEmitter(false))
+    controls.dispose()
   }
 })
 
diff --git a/src/core/loaders/SVG/component.vue b/src/core/loaders/SVG/component.vue
index 706f6d6d6..b43f1ee6a 100644
--- a/src/core/loaders/SVG/component.vue
+++ b/src/core/loaders/SVG/component.vue
@@ -3,10 +3,26 @@ import { useLoader } from '@tresjs/core'
 import { DoubleSide, ShapeGeometry, Vector2 } from 'three'
 import { SVGLoader } from 'three-stdlib'
 import { onUnmounted, shallowRef, toRefs, watch, watchEffect } from 'vue'
-import type { TresOptions } from '@tresjs/core'
+import type { LoaderProto, TresOptions } from '@tresjs/core'
 import type { BufferGeometry, MeshBasicMaterialParameters } from 'three'
 import type { SVGResult, SVGResultPaths } from 'three-stdlib'
 
+const props = withDefaults(defineProps<SVGProps>(), { skipStrokes: false, skipFills: false, depth: 'renderOrder' })
+
+// Create a wrapper around SVGLoader to make it compatible with TresJS loader interface
+class TresSVGLoader extends SVGLoader {
+  load(
+    url: string | string[],
+    onLoad: (result: SVGResult) => void,
+    onProgress?: (event: ProgressEvent<EventTarget>) => void,
+    onError?: (event: ErrorEvent) => void,
+  ): void {
+    // If url is an array, only use the first URL
+    const singleUrl = Array.isArray(url) ? url[0] : url
+    super.load(singleUrl, onLoad, onProgress, onError)
+  }
+}
+
 interface SVGProps {
   /**
    *
@@ -98,8 +114,6 @@ interface SVGProps {
   depth?: 'renderOrder' | 'flat' | 'offsetZ' | number
 }
 
-const props = withDefaults(defineProps<SVGProps>(), { skipStrokes: false, skipFills: false, depth: 'renderOrder' })
-
 interface SVGLayer { geometry: BufferGeometry, material: MeshBasicMaterialParameters, isStroke: boolean }
 
 const { src, skipStrokes, skipFills, fillMaterial, strokeMaterial, fillMeshProps, strokeMeshProps, depth } = toRefs(props)
@@ -114,8 +128,8 @@ watch([skipFills, skipStrokes, fillMaterial, strokeMaterial, paths], updateLayer
 
 async function useSVG(src: string) {
   const srcStr = !src.startsWith('<svg') ? src : encodeURI(`data:image/svg+xml;utf8,${src}`)
-  return useLoader(SVGLoader, srcStr) as Promise<SVGResult>
-};
+  return useLoader(TresSVGLoader as unknown as LoaderProto<SVGResult>, srcStr) as Promise<SVGResult>
+}
 
 onUnmounted(dispose)
 
diff --git a/src/core/loaders/useFBX/index.ts b/src/core/loaders/useFBX/index.ts
index c4cc714a6..167657ec6 100644
--- a/src/core/loaders/useFBX/index.ts
+++ b/src/core/loaders/useFBX/index.ts
@@ -1,14 +1,63 @@
-import { useLoader } from '@tresjs/core'
+import { type LoaderProto, type TresLoader, useLoader } from '@tresjs/core'
 import { FBXLoader } from 'three-stdlib'
-import type { Object3D } from 'three'
+import { Loader } from 'three'
+import type { Group, LoadingManager } from 'three'
+
+/**
+ * A wrapper class that implements TresLoader interface
+ * to make FBXLoader compatible with TresJS loader system.
+ */
+class TresFBXLoaderClass extends Loader implements TresLoader<Group> {
+  private fbxLoader: FBXLoader
+
+  constructor(manager?: LoadingManager) {
+    super(manager)
+    this.fbxLoader = new FBXLoader(manager)
+  }
+
+  /**
+   * Load an FBX model from a URL or array of URLs.
+   * If an array is provided, only the first URL will be used.
+   *
+   * @param {(string | string[])} url - URL or array of URLs to load
+   * @param {(result: Group) => void} onLoad - Callback when the model is loaded
+   * @param {(event: ProgressEvent<EventTarget>) => void} [onProgress] - Loading progress callback
+   * @param {(event: ErrorEvent) => void} [onError] - Error callback
+   */
+  load(
+    url: string | string[],
+    onLoad: (result: Group) => void,
+    onProgress?: (event: ProgressEvent<EventTarget>) => void,
+    onError?: (event: ErrorEvent) => void,
+  ): void {
+    const singleUrl = Array.isArray(url) ? url[0] : url
+    this.fbxLoader.load(singleUrl, onLoad, onProgress, onError)
+  }
+
+  /**
+   * Asynchronously load an FBX model.
+   *
+   * @param {string | string[]} url - URL or array of URLs to load
+   * @returns {Promise<Group>} Promise that resolves with the loaded model
+   */
+  async loadAsync(url: string | string[]): Promise<Group> {
+    const singleUrl = Array.isArray(url) ? url[0] : url
+    return this.fbxLoader.loadAsync(singleUrl)
+  }
+}
+
+const TresFBXLoader = TresFBXLoaderClass as LoaderProto<Group>
 
 /**
  * Loads an FBX file and returns a THREE.Object3D.
  *
  * @export
  * @param {(string | string[])} path
- * @return {*}  {Promise<Object3D>}
+ * @return {*}  {Promise<Group>}
  */
-export async function useFBX(path: string | string[]): Promise<Object3D> {
-  return (await useLoader(FBXLoader, path)) as unknown as Object3D
+export async function useFBX<T extends string | string[]>(
+  path: T,
+): Promise<T extends string[] ? Group[] : Group> {
+  const result = await useLoader(TresFBXLoader, path)
+  return result as T extends string[] ? Group[] : Group
 }
diff --git a/src/core/loaders/useGLTF/index.ts b/src/core/loaders/useGLTF/index.ts
index cc86e1e8f..1e8893532 100644
--- a/src/core/loaders/useGLTF/index.ts
+++ b/src/core/loaders/useGLTF/index.ts
@@ -1,9 +1,64 @@
-import { type TresLoader, type TresObject3D, useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { DRACOLoader } from 'three-stdlib'
-import type { AnimationClip, Material, Scene } from 'three'
+import { type LoaderProto, type TresLoader, type TresObject3D, useLoader } from '@tresjs/core'
+import { DRACOLoader, GLTFLoader } from 'three-stdlib'
+import { Loader } from 'three'
+import type { AnimationClip, LoadingManager, Material, Scene } from 'three'
 import type { GLTF } from 'three-stdlib'
 
+/**
+ * A wrapper class that implements TresLoader<GLTF> interface
+ * to make GLTFLoader compatible with TresJS loader system.
+ */
+class TresGLTFLoaderClass extends Loader implements TresLoader<GLTF> {
+  private gltfLoader: GLTFLoader
+
+  constructor(manager?: LoadingManager) {
+    super(manager)
+    this.gltfLoader = new GLTFLoader(manager)
+  }
+
+  /**
+   * Load a GLTF model from a URL or array of URLs.
+   * If an array is provided, only the first URL will be used.
+   *
+   * @param {(string | string[])} url - URL or array of URLs to load
+   * @param {(result: GLTF) => void} onLoad - Callback when the model is loaded
+   * @param {(event: ProgressEvent<EventTarget>) => void} [onProgress] - Loading progress callback
+   * @param {(event: ErrorEvent) => void} [onError] - Error callback
+   */
+  load(
+    url: string | string[],
+    onLoad: (result: GLTF) => void,
+    onProgress?: (event: ProgressEvent<EventTarget>) => void,
+    onError?: (event: ErrorEvent) => void,
+  ): void {
+    const singleUrl = Array.isArray(url) ? url[0] : url
+    this.gltfLoader.load(singleUrl, onLoad, onProgress, onError)
+  }
+
+  /**
+   * Asynchronously load a GLTF model.
+   *
+   * @param {string | string[]} url - URL or array of URLs to load
+   * @returns {Promise<GLTF>} Promise that resolves with the loaded model
+   */
+  async loadAsync(url: string | string[]): Promise<GLTF> {
+    const singleUrl = Array.isArray(url) ? url[0] : url
+    return this.gltfLoader.loadAsync(singleUrl)
+  }
+
+  /**
+   * Set the DRACO loader for compressed models.
+   *
+   * @param {DRACOLoader} dracoLoader - The DRACO loader instance
+   * @returns {GLTFLoader} The loader instance for chaining
+   */
+  setDRACOLoader(dracoLoader: DRACOLoader): GLTFLoader {
+    return this.gltfLoader.setDRACOLoader(dracoLoader)
+  }
+}
+
+const TresGLTFLoader = TresGLTFLoaderClass as unknown as LoaderProto<GLTF>
+
 export interface GLTFLoaderOptions {
   /**
    * Whether to use Draco compression.
@@ -30,19 +85,18 @@ export interface GLTFResult {
 
 let dracoLoader: DRACOLoader | null = null
 
-export interface TresGLTFLoader extends TresLoader<GLTF> {
+export interface TresGLTFLoaderType extends TresLoader<GLTF> {
   setDRACOLoader?: (dracoLoader: DRACOLoader) => void
 }
 
 /**
  * Sets the extensions for the GLTFLoader.
  *
- * @param {GLTFLoaderOptions} options
- * @param {(loader: TresGLTFLoader) => void} [extendLoader]
- * @return {*}
+ * @param {GLTFLoaderOptions} options - Options for the loader
+ * @param {(loader: TresGLTFLoaderType) => void} [extendLoader] - Function to extend the loader
  */
-function setExtensions(options: GLTFLoaderOptions, extendLoader?: (loader: TresGLTFLoader) => void) {
-  return (loader: TresGLTFLoader) => {
+function setExtensions(options: GLTFLoaderOptions, extendLoader?: (loader: TresGLTFLoaderType) => void) {
+  return (loader: TresGLTFLoaderType) => {
     if (extendLoader) {
       extendLoader(loader)
     }
@@ -62,21 +116,20 @@ function setExtensions(options: GLTFLoaderOptions, extendLoader?: (loader: TresG
  * Loads a GLTF file and returns a THREE.Object3D.
  *
  * @export
- * @param {(string | string[])} path
- * @param {GLTFLoaderOptions} [options]
- *
- *
- * @param {(loader: GLTFLoader) => void} [extendLoader]
- * @return {*}  {Promise<GLTFResult>}
+ * @template T
+ * @param {T} path - Path or array of paths to the GLTF file(s)
+ * @param {GLTFLoaderOptions} [options] - Options for the loader
+ * @param {(loader: TresGLTFLoaderType) => void} [extendLoader] - Function to extend the loader
+ * @returns {Promise<T extends string[] ? GLTFResult[] : GLTFResult>} Promise that resolves with the loaded model(s)
  */
 export async function useGLTF<T extends string | string[]>(
   path: T,
   options: GLTFLoaderOptions = {
     draco: false,
   },
-  extendLoader?: (loader: TresGLTFLoader) => void,
+  extendLoader?: (loader: TresGLTFLoaderType) => void,
 ): Promise<T extends string[] ? GLTFResult[] : GLTFResult> {
-  const gltfModel = (await useLoader<GLTF>(GLTFLoader, path, setExtensions(options, extendLoader))) as unknown as GLTFResult
+  const gltfModel = (await useLoader<GLTF>(TresGLTFLoader, path, setExtensions(options, extendLoader))) as unknown as GLTFResult
   dracoLoader?.dispose()
   dracoLoader = null
   return gltfModel as T extends string[] ? GLTFResult[] : GLTFResult
diff --git a/src/core/materials/meshGlassMaterial/material.ts b/src/core/materials/meshGlassMaterial/material.ts
index 52eff21d2..fee3366a9 100644
--- a/src/core/materials/meshGlassMaterial/material.ts
+++ b/src/core/materials/meshGlassMaterial/material.ts
@@ -1,8 +1,5 @@
-import { MeshStandardMaterial } from 'three'
-import { Color } from 'three/src/math/Color.js'
-import * as MathUtils from 'three/src/math/MathUtils'
-import { Vector2 } from 'three/src/math/Vector2.js'
 import type { MeshStandardMaterialParameters } from 'three'
+import { Color, MathUtils, MeshStandardMaterial, Vector2 } from 'three'
 
 class MeshGlassMaterial extends MeshStandardMaterial {
   isMeshPhysicalMaterial: boolean
@@ -34,8 +31,6 @@ class MeshGlassMaterial extends MeshStandardMaterial {
       PHYSICAL: '',
     }
 
-    this.type = 'MeshPhysicalMaterial'
-
     this.clearcoatMap = null
     this.clearcoatRoughness = 0.0
     this.clearcoatRoughnessMap = null
diff --git a/src/core/shapes/Line2.vue b/src/core/shapes/Line2.vue
index bbc303f6c..e3adefc0f 100644
--- a/src/core/shapes/Line2.vue
+++ b/src/core/shapes/Line2.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { normalizeColor, useTresContext } from '@tresjs/core'
 import { Vector2, Vector3 } from 'three'
-import { Line2 } from 'three/examples/jsm/lines/Line2'
-import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
-import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
+import { Line2, LineGeometry, LineMaterial } from 'three-stdlib'
 import { computed, onUnmounted, shallowRef, watch } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import type { Color } from 'three'
diff --git a/src/core/staging/Precipitation.vue b/src/core/staging/Precipitation.vue
index cb6edca07..d6a6d3b17 100644
--- a/src/core/staging/Precipitation.vue
+++ b/src/core/staging/Precipitation.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useLoop } from '@tresjs/core'
+import { useLoop, useTexture } from '@tresjs/core'
 import { shallowRef, toRefs, watchEffect } from 'vue'
 import type { TresColor } from '@tresjs/core'
+import type { Texture } from 'three'
 
 export interface PrecipitationProps {
   /**
@@ -32,24 +33,24 @@ export interface PrecipitationProps {
   /**
    * Color texture of the drops.
    *
-   * @type {string}
-   * @memberof StarsProps
+   * @type {Texture}
+   * @memberof PrecipitationProps
    * @default null
    */
-  map?: null
+  map?: string | Texture | null
   /**
    * texture of the alphaMap Drops.
    *
-   * @type {string}
-   * @memberof StarsProps
+   * @type {Texture}
+   * @memberof PrecipitationProps
    * @default null
    */
-  alphaMap?: string
+  alphaMap?: string | Texture | null
   /**
    * enables the WebGL to know when not to render the pixel.
    *
    * @type {number}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default 0.01
    */
   alphaTest?: number
@@ -57,7 +58,7 @@ export interface PrecipitationProps {
    * Set the opacity of the drops.
    *
    * @type {number}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default 0.8
    */
   opacity?: number
@@ -65,7 +66,7 @@ export interface PrecipitationProps {
    * number of drops.
    *
    * @type {number}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default 5000
    */
   count?: number
@@ -73,7 +74,7 @@ export interface PrecipitationProps {
    * Speed of drops.
    *
    * @type {number}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default 5000
    */
   speed?: number
@@ -82,7 +83,7 @@ export interface PrecipitationProps {
    *
    * @default 0.5
    * @type {number}
-   * @memberof ContactShadowsProps
+   * @memberof PrecipitationProps
    *
    */
   randomness?: number
@@ -91,7 +92,7 @@ export interface PrecipitationProps {
    *
    * @default false
    * @type {boolean}
-   * @memberof ContactShadowsProps
+   * @memberof PrecipitationProps
    *
    */
   depthWrite?: boolean
@@ -99,7 +100,7 @@ export interface PrecipitationProps {
    * show transparency on the drops texture.
    *
    * @type {boolean}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default true
    */
   transparent?: boolean
@@ -107,7 +108,7 @@ export interface PrecipitationProps {
    * keep the same size regardless distance.
    *
    * @type {boolean}
-   * @memberof StarsProps
+   * @memberof PrecipitationProps
    * @default true
    */
   sizeAttenuation?: boolean
@@ -131,8 +132,8 @@ const {
   size,
   area,
   color,
-  alphaMap,
-  map,
+  alphaMap: alphaMapUrl,
+  map: mapUrl,
   opacity,
   alphaTest,
   depthWrite,
@@ -171,6 +172,38 @@ watchEffect(() => {
   setPosition()
 })
 
+// Load textures if URLs are provided
+const alphaMapTexture = shallowRef<Texture | null>(null)
+const mapTexture = shallowRef<Texture | null>(null)
+
+watchEffect(async () => {
+  /* if (alphaMapUrl.value) {
+    const textures = await useTexture({ alphaMap: alphaMapUrl.value })
+    alphaMapTexture.value = textures.alphaMap
+  }
+  if (mapUrl.value) {
+    const textures = await useTexture({ map: mapUrl.value })
+    mapTexture.value = textures.map
+  } */
+  watchEffect(async () => {
+    if (typeof alphaMapUrl.value === 'string') {
+      const resolvedTexture = await useTexture({ alphaMap: alphaMapUrl.value })
+      alphaMapTexture.value = resolvedTexture.alphaMap
+    }
+    else {
+      alphaMapTexture.value = alphaMapUrl.value ?? null
+    }
+
+    if (typeof mapUrl.value === 'string') {
+      const resolvedTexture = await useTexture({ map: mapUrl.value })
+      mapTexture.value = resolvedTexture.map
+    }
+    else {
+      mapTexture.value = mapUrl.value ?? null
+    }
+  })
+})
+
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(({ invalidate }) => {
@@ -201,8 +234,8 @@ defineExpose({ instance: pointsRef })
     <TresPointsMaterial
       :size="size"
       :color="color"
-      :alpha-map="alphaMap"
-      :map="map"
+      :alpha-map="alphaMapTexture"
+      :map="mapTexture"
       :opacity="opacity"
       :alpha-test="alphaTest"
       :depth-write="depthWrite"
diff --git a/src/core/staging/Sparkles/ShaderData.ts b/src/core/staging/Sparkles/ShaderData.ts
index fe280b746..c37245997 100644
--- a/src/core/staging/Sparkles/ShaderData.ts
+++ b/src/core/staging/Sparkles/ShaderData.ts
@@ -2,11 +2,11 @@ import { watchThrottled } from '@vueuse/core'
 import {
   ClampToEdgeWrapping,
   DataTexture,
+  MathUtils,
   RGBAFormat,
   UnsignedByteType,
   UVMapping,
 } from 'three'
-import { clamp, mapLinear } from 'three/src/math/MathUtils'
 import { isRef, shallowRef, triggerRef, watch } from 'vue'
 import type { MaybeRef, Ref } from 'vue'
 import {
@@ -199,7 +199,7 @@ function clampedMapLinear(
   minOut: number,
   maxOut: number,
 ) {
-  return mapLinear(clamp(v, minIn, maxIn), minIn, maxIn, minOut, maxOut)
+  return MathUtils.mapLinear(MathUtils.clamp(v, minIn, maxIn), minIn, maxIn, minOut, maxOut)
 }
 
 function GradientTresColorRenderToCanvasGradient(
diff --git a/src/core/staging/useEnvironment/index.ts b/src/core/staging/useEnvironment/index.ts
index 2ada6fa23..f6e7a45ba 100644
--- a/src/core/staging/useEnvironment/index.ts
+++ b/src/core/staging/useEnvironment/index.ts
@@ -6,7 +6,7 @@ import {
 } from 'three'
 import { RGBELoader } from 'three-stdlib'
 import { computed, ref, toRefs, unref, watch } from 'vue'
-import type { LoaderProto, TresLoader } from '@tresjs/core'
+import type { LoaderProto } from '@tresjs/core'
 import type {
   CubeTexture,
   Texture,
@@ -16,22 +16,22 @@ import type { Ref } from 'vue'
 import { environmentPresets } from './const'
 import type { EnvironmentOptions } from './const'
 
+const PRESET_ROOT = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
+
 /**
  * Component that loads an environment map and sets it as the scene's background and environment.
  *
  * @export
- * @param {Partial<EnvironmentOptions>} {
+ * @param {Partial<EnvironmentOptions>} options - The options for the environment map
  *   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
  *   blur = 0,
  *   background = false,
  *   path = undefined,
  *   preset = undefined,
  *   colorSpace = undefined,
- * }
- * @return {*}  {(Promise<Ref<Texture | CubeTexture | undefined>>)}
+ * @param {Ref<WebGLCubeRenderTarget | null>} fbo - The framebuffer object
+ * @return {Promise<Ref<Texture | CubeTexture | null>>} The loaded texture
  */
-
-const PRESET_ROOT = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
 export async function useEnvironment(
   options: Partial<EnvironmentOptions>,
   fbo: Ref<WebGLCubeRenderTarget | null>,
@@ -52,20 +52,20 @@ export async function useEnvironment(
 
   const texture: Ref<Texture | CubeTexture | null> = ref(null)
   const isCubeMap = computed(() => Array.isArray((files as Ref<string[]>).value))
-  const loader = computed(() => isCubeMap.value ? CubeTextureLoader as unknown as LoaderProto<CubeTexture | RGBELoader> : RGBELoader as unknown as LoaderProto<CubeTexture | RGBELoader>)
+  const loader = computed(() => isCubeMap.value ? CubeTextureLoader : RGBELoader)
 
   watch([files, path], async ([files, path]) => {
     if (!files) { return }
     if (files.length > 0 && !preset?.value) {
       try {
-        texture.value = await useLoader<CubeTexture | RGBELoader>(
-          loader.value,
+        const result = await useLoader(
+          loader.value as unknown as LoaderProto<Texture | CubeTexture>,
           isCubeMap.value ? [...unref(files)] : unref(files),
           (loader: any) => {
             if (path) { loader.setPath(unref(path)) }
-            /* if (colorSpace) loader.colorSpace = colorSpace */
           },
         )
+        texture.value = Array.isArray(result) ? result[0] : result
       }
       catch (error) {
         throw new Error(`Failed to load environment map: ${error}`)
@@ -111,22 +111,20 @@ export async function useEnvironment(
       const _files = environmentPresets[value as unknown as keyof typeof environmentPresets]
 
       try {
-        texture.value = await useLoader<RGBELoader>(
-          RGBELoader as unknown as LoaderProto<RGBELoader>,
+        const result = await useLoader(
+          RGBELoader as unknown as LoaderProto<Texture>,
           _files,
-          (loader: TresLoader<RGBELoader>) => {
+          (loader) => {
             if (_path) { loader.setPath(_path) }
-            /* if (colorSpace) loader.colorSpace = colorSpace */
           },
         )
+        texture.value = Array.isArray(result) ? result[0] : result
       }
       catch (error) {
         throw new Error(`Failed to load environment map: ${error}`)
       }
       if (texture.value) {
-        if (texture.value) {
-          texture.value.mapping = EquirectangularReflectionMapping
-        }
+        texture.value.mapping = EquirectangularReflectionMapping
       }
       invalidate()
     }
diff --git a/tsconfig.json b/tsconfig.json
index 15ef2215c..eda0e0929 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,16 +6,20 @@
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "types": ["vite/client", "node"],
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
     "strict": true,
-    "strictNullChecks": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
-    "declaration": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "isolatedModules": true,
     "skipLibCheck": true
   },
   "references": [{ "path": "./tsconfig.node.json" }],