Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
oleg
/
Tresjs
mirror of https://github.com/Tresjs/tres.git
1
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

poc round two :)

Tino Koch 5 tháng trước cách đây
mục cha
cf2917a013
commit
8f2a322f86
4 tập tin đã thay đổi với 57 bổ sung và 18 xóa
Split View Hiển thị tình trạng sai khác
  1. 14 12
      playground/vue/src/pages/composables/useTexture/ObjectASyncMultipleTexture.vue
  2. 7 0
      playground/vue/src/pages/composables/useTexture/ObjectAsyncSimpleTexture.vue
  3. 16 1
      playground/vue/src/pages/composables/useTexture/index.vue
  4. 20 5
      src/composables/useTexture/index.ts

+ 14 - 12
playground/vue/src/pages/composables/useTexture/ObjectASyncMultipleTexture.vue
Xem Tập Tin 

@@ -6,18 +6,14 @@ import { useTexture2 } from '@tresjs/core'
 
 const [texture1, texture2] = useTexture2([
 
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
 
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
 
-])
 
-
 
-const { state: texture1State, isLoading: texture1IsLoading, then } = texture1
 
-const { state: texture2State, isLoading: texture2IsLoading } = texture2
 
-
 
-then(() => {
 
-  console.log('texture1 loaded')
 
+], {
 
+  asyncOptions: {
 
+    immediate: false,
 
+  },
 
 })
 
 
-const promise = new Promise(then) // TODO remove
 
-
 
-await promise // TODO remove
 
+const { state: texture1State, isLoading: texture1IsLoading, execute: executeTexture1 } = texture1
 
+const { state: texture2State, isLoading: texture2IsLoading, execute: executeTexture2 } = texture2
 
 
 const isLoading = computed(() => texture1IsLoading.value || texture2IsLoading.value) // TODO remove
 
 
@@ -34,12 +30,18 @@ watch(textures, (newVal) => {
 
   <TresMesh :position="[9, 1, 0]">
 
     <Html transform position-y="1.5">
 
       <span class="text-xs bg-white p-2 rounded-md">
 
-        Multiple (async)
 
+        Multiple (async) {{ isLoading }}
 
+        <button
 
+          @click="() => {
 
+            executeTexture1()
 
+            executeTexture2()
 
+          }"
 
+        >a</button>
 
       </span>
 
     </Html>
 
     <TresSphereGeometry :args="[1, 32, 32]" />
 
     <TresMeshStandardMaterial
 
-      v-if="textures.length && textures[0] && textures[1]"
 
+      v-if="textures?.length && textures[0] && textures[1]"
 
       :map="textures[0]"
 
       :displacement-map="textures[1]"
 
       :displacement-scale="0.1"

+ 7 - 0
playground/vue/src/pages/composables/useTexture/ObjectAsyncSimpleTexture.vue
Xem Tập Tin 

@@ -9,6 +9,13 @@ watch(texture, (newVal) => {
 
   console.log('Simple texture async', newVal)
 
 }, { immediate: true })
 
 
+const promise = new Promise((resolve) => {
 
+  setTimeout(() => {
 
+    resolve(texture.value)
 
+  }, 1000)
 
+})
 
+
 
+await promise
 
 // eslint-enable no-console
 
 </script>

+ 16 - 1
playground/vue/src/pages/composables/useTexture/index.vue
Xem Tập Tin 

@@ -25,14 +25,29 @@ const gl = {
 
   <TresCanvas v-bind="gl">
 
     <TresPerspectiveCamera :position="[8, 8, 8]" />
 
     <OrbitControls />
 
+
 
     <TresGridHelper :args="[100, 100]" />
 
     <TresAmbientLight :intensity="1" />
 
     <ObjectSyncSimpleTexture />
 
     <ObjectSyncMultipleTexture />
 
     <Suspense>
 
       <ObjectAsyncSimpleTexture />
 
+      <template #fallback>
 
+        <TresMesh>
 
+          <TresBoxGeometry />
 
+          <TresMeshBasicMaterial color="green" />
 
+        </TresMesh>
 
+      </template>
 
+    </Suspense>
 
+    <Suspense>
 
+      <ObjectAsyncMultipleTexture />
 
+      <template #fallback>
 
+        <TresMesh>
 
+          <TresBoxGeometry />
 
+          <TresMeshBasicMaterial color="red" />
 
+        </TresMesh>
 
+      </template>
 
     </Suspense>
 
-    <ObjectAsyncMultipleTexture />
 
     <ObjectUseTextureComponent />
 
     <ObjectSyncLoadSimpleTexture />
 
     <ObjectSyncLoadMultipleTexture />

+ 20 - 5
src/composables/useTexture/index.ts
Xem Tập Tin 

@@ -1,7 +1,7 @@
 
 import { ref, type Ref, shallowRef } from 'vue'
 
 import type { LoadingManager, Texture } from 'three'
 
 import { TextureLoader } from 'three'
 
-import type { UseAsyncStateReturn } from '@vueuse/core'
 
+import type { UseAsyncStateOptions, UseAsyncStateReturn } from '@vueuse/core'
 
 import { useAsyncState } from '@vueuse/core'
 
 
 export interface UseTextureReturn<T> {
 
@@ -30,6 +30,8 @@ export interface UseTextureReturn<T> {
 
   }
 
 }
 
 
+// TODO update jsdoc
 
+
 
 /**
 
  * Vue composable for loading textures with THREE.js
 
  * Can be used with or without await/Suspense
 
@@ -57,8 +59,21 @@ export interface UseTextureReturn<T> {
 
  * @param manager - Optional THREE.js LoadingManager
 
  */
 
 
-export function useTexture2<T extends string | string[]>(path: T, manager?: LoadingManager):
 
-T extends string ? UseAsyncStateReturn<Texture, [], true> : UseAsyncStateReturn<Texture, [], true>[] {
 
+export function useTexture2<T extends string | string[], Shallow extends boolean>(
 
+  path: T,
 
+  {
 
+    manager,
 
+    asyncOptions,
 
+  }: {
 
+    manager?: LoadingManager
 
+    asyncOptions?: UseAsyncStateOptions<Shallow, Texture | null>
 
+  } = {},
 
+):
 
+  T extends string ?
 
+    UseAsyncStateReturn<Texture | null, [], Shallow> :
 
+    UseAsyncStateReturn<Texture | null, [], Shallow>[] {
 
+  const immediate = asyncOptions?.immediate ?? true
 
+
 
   const textureLoader = new TextureLoader(manager)
 
 
   const makeComposable = (path: string) => useAsyncState(
 
@@ -71,8 +86,8 @@ T extends string ? UseAsyncStateReturn<Texture, [], true> : UseAsyncStateReturn<
 
       )),
 
     null,
 
     {
 
-      // TODO make argument
 
-      immediate: true,
 
+      ...asyncOptions,
 
+      immediate,
 
     },
 
   )