Merge pull request #172 from Tresjs/feature/alphaMap-useTexture

add alphaMap in useTexture

docs/api/composables.md

@@ -109,17 +109,19 @@ const texture = await useTexture(['path/to/texture.png'])
 - `roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
 - `metalnessMap`: a texture that is used to add a metallic effect to the object's surface
 - `aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
+- `alphaMap`: a texture that is used to add alpha (the black part render as transparent) to the object. It's necessary to set :trasparent="true" on the material to use this map
 
 In that case it will return an object with the loaded textures.
 
 ```ts
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap } = await useTexture({
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap } = await useTexture({
   map: 'path/to/albedo.png',
   displacementMap: 'path/to/height.png',
   normalMap: 'path/to/normal.png',
   roughnessMap: 'path/to/roughness.png',
   metalnessMap: 'path/to/metalness.png',
   aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
 })
 ```
 
@@ -137,6 +139,7 @@ Then you can bind the textures to the material.
         :roughnessMap="roughnessMap"
         :metalnessMap="metalnessMap"
         :aoMap="aoMap"
+        :alphaMap="alphaMap"
       />
     </TresMesh>
   </TresCanvas>

playground/src/components/TheBasic.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { sRGBEncoding, BasicShadowMap, NoToneMapping, Vector3 } from 'three'
+import { sRGBEncoding, BasicShadowMap, NoToneMapping  } from 'three'
 import { reactive, ref } from 'vue'
 import { TresCanvas } from '/@/components/TresCanvas'
-import { OrbitControls, TransformControls } from '@tresjs/cientos'
+import { OrbitControls, TransformControls  } from '@tresjs/cientos'
 import { useRenderLoop } from '/@/'
-/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
 const state = reactive({
   clearColor: '#201919',
@@ -27,15 +26,16 @@ onLoop(({ elapsed }) => {
 </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" />
 
     <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
       <TresSphereGeometry :args="[2,32,32]"/>
       <TresMeshToonMaterial color="cyan" />
-      <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
     </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,
     }
   }
 }