feat(app): 329 Add cast-shadow/receive-shadow to 3D model

docs/guide/loaders/fbx-model.md

@@ -15,3 +15,5 @@ The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable
 | Prop   | Description             | Default     |
 | :----- | :---------------------- | ----------- |
 | `path` | Path to the model file. | `undefined` |
+| `castShadow`  | Apply `cast-shadow` to all meshes inside your model.                                                                  | `false`     |
+| `receiveShadow` | Apply `receive-shadow` to all meshes inside your model.                                                             | `false`     |

docs/guide/loaders/gltf-model.md

@@ -14,13 +14,13 @@ The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composa
 
 You can access the model reference by passing a `ref` to the `model` prop and then using to get the object.
 
-```ts
+```vue
 <script setup lang="ts">
 import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 
 const modelRef = shallowRef<THREE.Object3D>()
 
-watch(modelRef, model => {
+watch(modelRef, (model) => {
   // Do something with the model
   model.position.set(0, 0, 0)
 })
@@ -34,3 +34,5 @@ watch(modelRef, model => {
 | `path`        | Path to the model file.                                                                                               | `undefined` |
 | `draco`       | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false`     |
 | `decoderPath` | Path to a local Draco decoder.                                                                                        | `undefined` |
+| `castShadow`  | Apply `cast-shadow` to all meshes inside your model.                                                                  | `false`     |
+| `receiveShadow` | Apply `receive-shadow` to all meshes inside your model.                                                             | `false`     |

playground/src/components/ModelsDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import { useGLTF, OrbitControls, GLTFModel, useFBX, FBXModel } from '@tresjs/cientos'
+import { useRenderLoop } from '@tresjs/core'
+import { useGLTF, GLTFModel, useFBX, FBXModel } from '@tresjs/cientos'
 import { NoToneMapping } from 'three'
 
 const modelPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
@@ -21,47 +21,51 @@ const gl = {
   alpha: true,
   toneMapping: NoToneMapping,
 }
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (akuAkuRef.value) {
+    akuAkuRef.value.value.rotation.y += 0.01
+  }
+  if (jeepRef.value) {
+    jeepRef.value.value.rotation.y -= 0.01
+  }
+})
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-  >
-    <TresPerspectiveCamera :position="[0, 2, 10]" />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls
-      :keys="{}"
-      :auto-rotate="true"
-    />
+  <TresGroup>
     <primitive
       :object="model"
-      :position="[-3, -2, 0]"
+      :position="[-3, 0, 0]"
     />
     <Suspense>
       <GLTFModel
         ref="akuAkuRef"
         :path="modelPath"
         draco
-        :position="[0, -2, 0]"
+        :position="[0, -2, 2]"
+        :rotation-x="0.5"
         name="Aku_aku"
+        cast-shadow
       />
     </Suspense>
     <!-- FBX MODELS -->
     <primitive
       :object="modelFbx"
-      :position="[6, 0, 0]"
+      :position="[6, 0, 2]"
       :scale="[0.01, 0.01, 0.01]"
     />
     <Suspense>
       <FBXModel
         ref="jeepRef"
         :path="modelPathFbx"
         :scale="0.01"
-        :position="[0, -4, 0]"
+        :position="[0, -1, -2]"
         name="jeep_model"
+        cast-shadow
       />
     </Suspense>
-    <TresAmbientLight />
-    <TresDirectionalLight />
-  </TresCanvas>
+  </TresGroup>
 </template>

playground/src/pages/loaders/UseGLTFDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-
-import { OrbitControls } from '@tresjs/cientos'
+import { CameraControls } from '@tresjs/cientos'
+import ModelsDemo from '../../components/ModelsDemo.vue'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -17,10 +17,23 @@ const gl = {
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
-    <OrbitControls />
+    <CameraControls />
     <Suspense>
-      <AkuAku />
+      <ModelsDemo />
     </Suspense>
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      :position-y="-2"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xf7f7f7" />
+    </TresMesh>
     <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[0, 10, 0]"
+    />
   </TresCanvas>
 </template>

src/core/loaders/useFBX/component.vue

@@ -11,11 +11,36 @@ export interface FBXModelProps {
    * @required
    */
   path: string
+  /**
+   *
+   * Whether to use cast-shadow to the model.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof FBXModelProps
+   *
+   **/
+  castShadow?: boolean
+  /**
+   *
+   * Whether to use receive-shadow to the model.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof FBXModelProps
+   *
+   **/
+  receiveShadow?: boolean
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   path: string
-}>()
+  castShadow?: boolean
+  receiveShadow?: boolean
+}>(), {
+  castShadow: false,
+  receiveShadow: false,
+})
 
 const modelRef = ref()
 
@@ -24,6 +49,15 @@ defineExpose({
 })
 
 const model = await useFBX(props.path as string)
+
+if ( props.castShadow || props.receiveShadow ) {
+  model.traverse((child) => {
+    if (child.isMesh) {
+      child.castShadow = props.castShadow
+      child.receiveShadow = props.receiveShadow
+    }
+  })
+}
 </script>
 
 <template>

src/core/loaders/useGLTF/component.vue

@@ -23,6 +23,26 @@ export interface GLTFModelProps {
    *
    **/
   draco?: boolean
+  /**
+   *
+   * Whether to use cast-shadow to the model.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof GLTFModelProps
+   *
+   **/
+  castShadow?: boolean
+  /**
+   *
+   * Whether to use receive-shadow to the model.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof GLTFModelProps
+   *
+   **/
+  receiveShadow?: boolean
   /**
    *
    * The path to the Draco decoder.
@@ -40,9 +60,13 @@ const props = withDefaults(
     path: string
     draco?: boolean
     decoderPath?: string
+    castShadow?: boolean
+    receiveShadow?: boolean
   }>(),
   {
     draco: false,
+    castShadow: false,
+    receiveShadow: false,
     decoderPath: 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/',
   },
 )
@@ -56,6 +80,14 @@ const { scene: model } = await useGLTF(props.path as string, {
   draco: props.draco,
   decoderPath: props.decoderPath,
 })
+if ( props.castShadow || props.receiveShadow ) {
+  model.traverse((child) => {
+    if (child.isMesh) {
+      child.castShadow = props.castShadow
+      child.receiveShadow = props.receiveShadow
+    }
+  })
+}
 </script>
 
 <template>