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

@@ -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']

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>

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>

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>

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>

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>

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>