Browse Source

Merge pull request #90 from Tresjs/feature/get-model-gltf

Feature/get model gltf
Alvaro Saburido 2 years ago
parent
commit
118dcd2e39

+ 23 - 0
docs/cientos/loaders/gltf-model.md

@@ -20,6 +20,29 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 </template>
 </template>
 ```
 ```
 
 
+## Model reference
+
+You can access the model reference by pasing a `ref` to the `model` prop and then using the method `getModel()` to get the object.
+
+```vue{3,6}
+<script setup lang="ts">
+import { OrbitControls, GLTFModel } from '@tresjs/cientos'
+
+const modelRef = shallowRef<THREE.Object3D>()
+
+watch(modelRef, ({getModel}) => {
+  const model = getModel()
+
+  model.traverse((child) => {
+    if (child.isMesh) {
+      child.castShadow = true
+      child.receiveShadow = true
+    }
+  })
+})
+</script>
+```
+
 ## Props
 ## Props
 
 
 | Prop          | Description                                                                                                           | Default     |
 | Prop          | Description                                                                                                           | Default     |

+ 8 - 2
packages/cientos/src/core/useGLTF/component.ts

@@ -10,13 +10,19 @@ export const GLTFModel = defineComponent({
     decoderPath: String,
     decoderPath: String,
   },
   },
 
 
-  async setup(props) {
+  async setup(props, { expose }) {
     const scene = inject<Ref<Scene>>('local-scene')
     const scene = inject<Ref<Scene>>('local-scene')
 
 
+    function getModel() {
+      return model
+    }
+    expose({ getModel })
     const { scene: model } = await useGLTF(props.path as string, { draco: props.draco, decoderPath: props.decoderPath })
     const { scene: model } = await useGLTF(props.path as string, { draco: props.draco, decoderPath: props.decoderPath })
     if (scene?.value) {
     if (scene?.value) {
       scene.value.add(model)
       scene.value.add(model)
     }
     }
-    return () => null
+    return () => {
+      model
+    }
   },
   },
 })
 })