add alphaMap in useTexture

playground/src/components/TheBasic.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { sRGBEncoding, BasicShadowMap, NoToneMapping, Vector3 } from 'three'
+import { sRGBEncoding, BasicShadowMap, NoToneMapping, Vector3  } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas } from '/@/components/TresCanvas'
-import { OrbitControls, TransformControls } from '@tresjs/cientos'
-import { useRenderLoop } from '/@/'
+import { OrbitControls, TransformControls  } from '@tresjs/cientos'
+import { useRenderLoop, useTexture } from '/@/'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
 const state = reactive({
@@ -16,18 +16,25 @@ const state = reactive({
   toneMapping: NoToneMapping,
 })
 
+const { alphaMap } = await useTexture({
+  alphaMap: 'https://assets.codepen.io/4698468/2k_earth_clouds.jpg',
+})
+
 const sphereRef = ref()
+const cloudRef = ref()
 
 const { onLoop } = useRenderLoop()
 
 onLoop(({ elapsed }) => {
   if (!sphereRef.value) return
   sphereRef.value.position.y += Math.sin(elapsed) * 0.01
+  cloudRef.value.position.y += Math.sin(elapsed) * 0.01
 })
 </script>
 <template>
   <TresCanvas v-bind="state">
-    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0,0,0]" />
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000"
+    :look-at="[0,0,0]" />
     <OrbitControls />
     <TresAmbientLight :intensity="0.5" />
 
@@ -36,6 +43,11 @@ onLoop(({ elapsed }) => {
       <TresMeshToonMaterial color="cyan" />
       <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
     </TresMesh>
+      <TresMesh ref="cloudRef" :position="[0, 4, 0]" cast-shadow>
+        <TresSphereGeometry :args="[2.01,32,32]"/>
+        <TresMeshStandardMaterial :transparent="true" :alpha-map="alphaMap" />
+      </TresMesh>
+
     <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
     <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />

playground/src/pages/index.vue

@@ -3,5 +3,7 @@
 </script>
 <template>
     <router-link to="/shapes">Shapes</router-link>
-<TheBasic />
+    <Suspense>
+        <TheBasic />
+    </Suspense>
 </template>

playground/src/pages/shapes.vue

@@ -15,7 +15,6 @@ import {
   Dodecahedron,
   Circle,
   Cone,
-  OrbitControls,
 } from '@tresjs/cientos'
 
 const state = reactive({
@@ -86,8 +85,6 @@ const tubePath = new CubicBezierCurve3(
   <TresCanvas v-bind="state" >
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
 
-    <OrbitControls />
-
     <TresAmbientLight :color="0xffffff" :intensity="1" />
     <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
     <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>

src/composables/useTexture/index.ts

@@ -79,7 +79,8 @@ export async function useTexture(
       return textures[0]
     }
   } else {
-    const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap } = paths as { [key: string]: string }
+    const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap
+     } = paths as { [key: string]: string }
     return {
       map: map ? await loadTexture(map) : null,
       displacementMap: displacementMap ? await loadTexture(displacementMap) : null,
@@ -87,6 +88,7 @@ export async function useTexture(
       roughnessMap: roughnessMap ? await loadTexture(roughnessMap) : null,
       metalnessMap: metalnessMap ? await loadTexture(metalnessMap) : null,
       aoMap: aoMap ? await loadTexture(aoMap) : null,
+      alphaMap: alphaMap ? await loadTexture(alphaMap) : null,
     }
   }
 }