Skip to content

Commit 09584be

Browse files
alvarosabualvarosabu
authored
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
1 parent c16c6e5 commit 09584be

File tree

25 files changed

+469
-269
lines changed

25 files changed

+469
-269
lines changed

‎playground/vue/components.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ export {}
77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10-
AkuAku: typeof import('./src/components/AkuAku.vue')['default']
10+
AkuAku: typeof import('./src/components/gltf/BlenderCube.vue')['default']
11+
BlenderCube: typeof import('./src/components/gltf/BlenderCube.vue')['default']
1112
FboCube: typeof import('./src/components/FboCube.vue')['default']
1213
Gltf: typeof import('./src/components/gltf/index.vue')['default']
1314
GraphPane: typeof import('./src/components/GraphPane.vue')['default']
15+
Jeep: typeof import('./src/components/fbx/Jeep.vue')['default']
1416
ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
1517
OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
1618
RouterLink: typeof import('vue-router')['RouterLink']

‎playground/vue/src/components/AkuAku.vue

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎playground/vue/src/components/ModelsDemo.vue

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎playground/vue/src/components/fbx/Jeep.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { useFBX } from '@tresjs/cientos'
3+
import { type Group, Mesh } from 'three'
4+
5+
const model = await useFBX(
6+
'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',
7+
)
8+
9+
const truckRef = shallowRef<Group | null>(null)
10+
11+
watch(truckRef, (truck) => {
12+
if (truck) {
13+
truck.scale.set(0.01, 0.01, 0.01)
14+
truck.position.set(0, -1.6, 0)
15+
truck.rotation.y = -Math.PI * 0.5
16+
truck.traverse((child) => {
17+
if (child instanceof Mesh) {
18+
child.castShadow = true
19+
}
20+
})
21+
}
22+
})
23+
</script>
24+
25+
<template>
26+
<primitive ref="truckRef" :object="model" />
27+
</template>

‎playground/vue/src/components/gltf/BlenderCube.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import { useGLTF } from '@tresjs/cientos'
3+
import type { TresObject } from '@tresjs/core'
4+
import { Mesh } from 'three'
5+
6+
const { nodes } = await useGLTF(
7+
'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
8+
{ draco: true },
9+
)
10+
11+
const modelRef = shallowRef<TresObject | null>(null)
12+
13+
const model = nodes.Cube
14+
15+
watch(modelRef, (model) => {
16+
if (model) {
17+
model.traverse((child: Mesh) => {
18+
if (child instanceof Mesh) {
19+
child.castShadow = true
20+
}
21+
})
22+
}
23+
})
24+
</script>
25+
26+
<template>
27+
<primitive ref="modelRef" :object="model" />
28+
</template>

‎playground/vue/src/components/gltf/index.vue

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎playground/vue/src/pages/loaders/FBXModelDemo.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup lang="ts">
2+
import { FBXModel, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
5+
6+
const gl = {
7+
clearColor: '#82DBC5',
8+
shadows: true,
9+
alpha: false,
10+
shadowMapType: BasicShadowMap,
11+
outputColorSpace: SRGBColorSpace,
12+
toneMapping: NoToneMapping,
13+
}
14+
</script>
15+
16+
<template>
17+
<TresCanvas v-bind="gl">
18+
<TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
19+
<OrbitControls />
20+
<Suspense>
21+
<FBXModel
22+
scale="0.01"
23+
:position="[0, -1.6, 0]"
24+
:rotation-y="-Math.PI * 0.5"
25+
cast-shadow
26+
path="https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx"
27+
/>
28+
</Suspense>
29+
<TresMesh
30+
:rotate-x="Math.PI * -0.5"
31+
:position-y="-2"
32+
receive-shadow
33+
>
34+
<TresPlaneGeometry :args="[40, 40]" />
35+
<TresMeshStandardMaterial :color="0xF7F7F7" />
36+
</TresMesh>
37+
<TresAmbientLight :intensity="1" />
38+
<TresDirectionalLight
39+
:intensity="1"
40+
cast-shadow
41+
:position="[5, 10, 5]"
42+
/>
43+
</TresCanvas>
44+
</template>

‎playground/vue/src/pages/loaders/GLTFModelDemo.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
import { GLTFModel, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
5+
6+
const gl = {
7+
clearColor: '#82DBC5',
8+
shadows: true,
9+
alpha: false,
10+
shadowMapType: BasicShadowMap,
11+
outputColorSpace: SRGBColorSpace,
12+
toneMapping: NoToneMapping,
13+
}
14+
</script>
15+
16+
<template>
17+
<TresCanvas v-bind="gl">
18+
<TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
19+
<OrbitControls />
20+
<Suspense>
21+
<GLTFModel
22+
path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
23+
cast-shadow
24+
:position="[0, 1, 0]"
25+
/>
26+
</Suspense>
27+
<TresMesh
28+
:rotate-x="Math.PI * -0.5"
29+
receive-shadow
30+
>
31+
<TresPlaneGeometry :args="[40, 40]" />
32+
<TresMeshStandardMaterial :color="0xF7F7F7" />
33+
</TresMesh>
34+
<TresAmbientLight :intensity="1" />
35+
<TresDirectionalLight
36+
:intensity="1"
37+
cast-shadow
38+
:position="[5, 10, 5]"
39+
/>
40+
</TresCanvas>
41+
</template>

‎playground/vue/src/pages/loaders/UseFBXDemo.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
import { OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
5+
import Jeep from '../../components/fbx/Jeep.vue'
6+
7+
const gl = {
8+
clearColor: '#82DBC5',
9+
shadows: true,
10+
alpha: false,
11+
shadowMapType: BasicShadowMap,
12+
outputColorSpace: SRGBColorSpace,
13+
toneMapping: NoToneMapping,
14+
}
15+
</script>
16+
17+
<template>
18+
<TresCanvas v-bind="gl">
19+
<TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
20+
<OrbitControls />
21+
<Suspense>
22+
<Jeep />
23+
</Suspense>
24+
<TresMesh
25+
:rotate-x="Math.PI * -0.5"
26+
:position-y="-2"
27+
receive-shadow
28+
>
29+
<TresPlaneGeometry :args="[40, 40]" />
30+
<TresMeshStandardMaterial :color="0xF7F7F7" />
31+
</TresMesh>
32+
<TresAmbientLight :intensity="1" />
33+
<TresDirectionalLight
34+
:intensity="1"
35+
cast-shadow
36+
:position="[5, 10, 5]"
37+
/>
38+
</TresCanvas>
39+
</template>

‎playground/vue/src/pages/loaders/UseGLTFDemo.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import { CameraControls } from '@tresjs/cientos'
2+
import { OrbitControls } from '@tresjs/cientos'
33
import { TresCanvas } from '@tresjs/core'
44
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
5-
import ModelsDemo from '../../components/ModelsDemo.vue'
5+
import BlenderCube from '../../components/gltf/BlenderCube.vue'
66
77
const gl = {
88
clearColor: '#82DBC5',
@@ -16,14 +16,15 @@ const gl = {
1616

1717
<template>
1818
<TresCanvas v-bind="gl">
19-
<TresPerspectiveCamera :position="[3, 3, 3]" />
20-
<CameraControls />
19+
<TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
20+
<OrbitControls />
2121
<Suspense>
22-
<ModelsDemo />
22+
<TresGroup :position="[0, 1, 0]">
23+
<BlenderCube />
24+
</TresGroup>
2325
</Suspense>
2426
<TresMesh
2527
:rotate-x="Math.PI * -0.5"
26-
:position-y="-2"
2728
receive-shadow
2829
>
2930
<TresPlaneGeometry :args="[40, 40]" />
@@ -33,7 +34,7 @@ const gl = {
3334
<TresDirectionalLight
3435
:intensity="1"
3536
cast-shadow
36-
:position="[0, 10, 0]"
37+
:position="[5, 10, 5]"
3738
/>
3839
</TresCanvas>
3940
</template>

0 commit comments

Comments
 (0)