Merge pull request #114 from Tresjs/bugfix/environment-typing-issues

packages/cientos/package.json

@@ -50,12 +50,12 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "tweakpane": "^3.1.4",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "vite": "^4.1.2",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^1.7.2"
+    "vite-plugin-dts": "2.0.0-beta.1"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.6.0",
+    "@tresjs/core": "workspace:^1.6.3",
     "three-stdlib": "^2.21.8"
   }
 }

packages/cientos/src/core/OrbitControls.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Camera, Vector3 } from 'three'
 import { OrbitControls } from 'three-stdlib'
-import { ref, watch, watchEffect, unref, type Ref } from 'vue'
+import { ref, watch, unref, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 

packages/cientos/src/core/Text3D.vue

@@ -1,4 +1,4 @@
-<script async setup lang="ts">
+<script setup lang="ts">
 import { TextGeometry, FontLoader } from 'three-stdlib'
 
 import { computed, useSlots } from 'vue'
@@ -34,7 +34,7 @@ const props = withDefaults(
     bevelThickness?: number
     bevelSize?: number
     bevelOffset?: number
-    bevelSegments?: number,
+    bevelSegments?: number
     center?: boolean
   }>(),
   {
@@ -46,9 +46,9 @@ const props = withDefaults(
     bevelSize: 0.02,
     bevelOffset: 0,
     bevelSegments: 4,
-    center:false
+    center: false,
   },
-  )
+)
 
 const { extend } = useCientos()
 

packages/cientos/src/core/TransformControls.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useTres } from '@tresjs/core'
-import { Camera, Object3D, Scene, WebGLRenderer, type Event } from 'three'
+import { Object3D, type Event } from 'three'
 import { TransformControls as TransformControlsImp } from 'three-stdlib'
-import { inject, computed, type Ref, unref, watch, shallowRef, ShallowRef, onUnmounted } from 'vue'
+import { computed, unref, watch, shallowRef, ShallowRef, onUnmounted } from 'vue'
 import { pick, hasSetter } from '../utils'
 import { useCientos } from './useCientos'
 

packages/cientos/src/core/useEnvironment/index.ts

@@ -33,10 +33,15 @@ export async function useEnvironment({
 
   const loader = isCubeMap ? CubeTextureLoader : RGBELoader
 
-  const result = await useLoader(loader, isCubeMap ? [files] : files, (loader: any) => {
-    if (path) loader.setPath(path)
-    if (encoding) loader.encoding = encoding
-  })
+  const result = await useLoader(
+    // @ts-expect-error There is a bug in the types for useLoader
+    loader,
+    isCubeMap ? [files] : files,
+    (loader: any) => {
+      if (path) loader.setPath(path)
+      if (encoding) loader.encoding = encoding
+    },
+  )
 
   const texture: Texture | CubeTexture = isCubeMap ? result[0] : result
 

packages/cientos/src/core/useFBX/component.ts

@@ -1,5 +1,5 @@
-import { Object3D, Scene } from 'three'
-import { defineComponent, inject, Ref } from 'vue'
+import { Object3D } from 'three'
+import { defineComponent } from 'vue'
 import { useFBX } from '.'
 import { useCientos } from '../useCientos'
 

packages/cientos/src/core/useGLTF/index.ts

@@ -1,6 +1,6 @@
 import { GLTFLoader, DRACOLoader } from 'three-stdlib'
 import { useLoader } from '@tresjs/core'
-import { TresObject } from '/@/types'
+import { Object3D } from 'three'
 
 export interface GLTFLoaderOptions {
   draco?: boolean
@@ -9,7 +9,7 @@ export interface GLTFLoaderOptions {
 
 export interface GLTFResult {
   animations: Array<THREE.AnimationClip>
-  nodes: Array<TresObject>
+  nodes: Array<Object3D>
   materials: Array<THREE.Material>
   scene: THREE.Scene
 }

packages/cientos/src/index.ts

@@ -23,7 +23,6 @@ import { Environment } from './core/useEnvironment/component'
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './core/useEnvironment'
-export * from './types'
 export {
   OrbitControls,
   TransformControls,

packages/cientos/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare module '*.glsl' {}

packages/cientos/tsconfig.json

@@ -10,7 +10,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "node", "@tresjs/core"],
+    "types": ["vite/client", "node"],
     "incremental": false,
     "skipLibCheck": true,
     "noUnusedLocals": false,
@@ -21,7 +21,7 @@
       "/@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "histoire.setup.ts", "histoire.setup.ts"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["dist", "node_modules", "src/**/*.cy.ts", "src/**/*.test.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/tres/package.json

@@ -16,6 +16,10 @@
       "import": "./dist/tres.js",
       "require": "./dist/tres.umd.cjs"
     },
+    "./types": {
+      "require": "./dist/index.d.ts",
+      "import": "./dist/index.d.ts"
+    },
     "./styles": "./dist/style.css",
     "./*": "./dist/tres.js"
   },
@@ -45,8 +49,8 @@
     "vue": "^3.2.47"
   },
   "dependencies": {
-    "@alvarosabu/utils": "^2.2.0",
-    "@vueuse/core": "^9.12.0"
+    "@alvarosabu/utils": "^2.3.0",
+    "@vueuse/core": "^9.13.0"
   },
   "devDependencies": {
     "@tresjs/cientos": "workspace:^1.6.0",
@@ -58,14 +62,12 @@
     "happy-dom": "^8.2.6",
     "kolorist": "^1.7.0",
     "pathe": "^1.1.0",
-    "release-it": "^15.6.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "latest",
-    "unplugin-vue-components": "^0.23.0",
-    "vite": "^4.1.1",
+    "vite": "^4.1.2",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^1.7.2",
+    "vite-plugin-dts": "2.0.0-beta.1",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.15",
     "vite-plugin-require-transform": "^1.0.9",

packages/tres/src/components/Shapes.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, sRGBEncoding, Vector3 } from 'three'
-import { reactive, ref, shallowRef, watch } from 'vue'
+import { reactive, shallowRef, watch } from 'vue'
 import {
   Plane,
   Tube,

packages/tres/src/components/TestSphere.vue

@@ -7,7 +7,7 @@ const sphereRef: Ref<TresInstance | null> = ref(null)
 
 const { onLoop, resume } = useRenderLoop()
 resume()
-onLoop(({ _delta, elapsed }) => {
+onLoop(({ elapsed }) => {
   if (sphereRef.value) {
     sphereRef.value.position.y = Math.sin(elapsed * 0.2) * 2.0
   }

packages/tres/src/components/TheBasic.vue

@@ -1,18 +1,5 @@
 <script setup lang="ts">
-import {
-  sRGBEncoding,
-  LinearEncoding,
-  BasicShadowMap,
-  PCFShadowMap,
-  PCFSoftShadowMap,
-  VSMShadowMap,
-  NoToneMapping,
-  LinearToneMapping,
-  ReinhardToneMapping,
-  CineonToneMapping,
-  ACESFilmicToneMapping,
-  CustomToneMapping,
-} from 'three'
+import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
 import { reactive, ref } from 'vue'
 
 import { OrbitControls, TransformControls } from '@tresjs/cientos'
@@ -33,7 +20,7 @@ const sphereRef = ref()
 
 const { onLoop } = useRenderLoop()
 
-onLoop(({ delta, elapsed, state }) => {
+onLoop(({ elapsed }) => {
   sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
 })
 </script>

packages/tres/src/core/useInstanceCreator/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable new-cap */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { BufferAttribute, FogBase, OrthographicCamera, PerspectiveCamera } from 'three'
+import { BufferAttribute, Fog, FogBase, Mesh, OrthographicCamera, PerspectiveCamera } from 'three'
 import { defineComponent, inject, onUnmounted, Ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 
@@ -179,7 +179,7 @@ export function useInstanceCreator(prefix: string) {
 
               let prevInstance: TresEvent | null = null
               let currentInstance: TresEvent | null = null
-              if (instance.isMesh) {
+              if (instance instanceof Mesh) {
                 onLoop(() => {
                   if (instance && raycaster && scene?.children) {
                     const intersects = raycaster.intersectObjects(scene?.children)
@@ -212,7 +212,7 @@ export function useInstanceCreator(prefix: string) {
                 })
               }
 
-              if (scene && instance.isFog) {
+              if (scene && instance instanceof Fog) {
                 scene.fog = instance as unknown as FogBase
               }
 

packages/tres/src/core/useLoader/index.ts

@@ -9,6 +9,7 @@ export interface TresLoader<T> extends THREE.Loader {
     onProgress?: (event: ProgressEvent) => void,
     onError?: (event: ErrorEvent) => void,
   ): unknown
+  loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>
 }
 
 export type LoaderProto<T> = new (...args: any) => TresLoader<T extends unknown ? any : T>

packages/tres/src/core/useTres/index.ts

@@ -1,5 +1,5 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
-import { ComputedRef, shallowReactive, ShallowRef, toRefs } from 'vue'
+import { ComputedRef, shallowReactive, toRefs } from 'vue'
 import { Camera } from '/@/core'
 
 export interface TresState {
@@ -11,7 +11,7 @@ export interface TresState {
   clock?: Clock
   pointer?: Vector2
   currentInstance?: any
-  controls?: EventDispatcher | null
+  controls?: (EventDispatcher & { enabled: boolean }) | null
   [key: string]: any
 }
 

packages/tres/src/index.ts

@@ -4,7 +4,8 @@ import { Scene } from '/@/core/useScene/component'
 import { useCatalogue, useInstanceCreator, useTres } from '/@/core'
 export * from '/@/core'
 export * from './keys'
-import { version } from '../package.json'
+export * from './types'
+
 export interface TresOptions {
   prefix?: string
   extends?: Record<string, unknown>
@@ -35,11 +36,6 @@ const plugin: TresPlugin = {
     components.forEach(([key, cmp]) => {
       app.component(key as string, cmp as Component)
     })
-
-    window.__TRES__ = {
-      app,
-      version,
-    }
   },
 }
 

packages/tres/src/types/index.d.ts → packages/tres/src/types/index.ts

@@ -1,4 +1,4 @@
-import { Object3D } from 'three'
+import { Color, Intersection, Object3D, Vector2, Vector3, Event } from 'three'
 import { VNode, VNodeTypes } from 'vue'
 
 export type TresInstance = Object3D<Event> & { [key: string]: any }
@@ -17,19 +17,7 @@ export type TresColor = string | number | Color | number[]
 export interface TresEvent extends Intersection<Object3D<Event>> {
   object: Object3D
   distance: number
-  face?: Face3
   faceIndex?: number | undefined
   point: Vector3
   uv?: Vector2
 }
-
-declare global {
-  // Define the window interface, with type annotations for the properties and methods of the window object
-  interface Window {
-    // Define the location property, with a type of Location
-    __TRES__: {
-      app: App
-      version: string
-    }
-  }
-}