fix: fbxModel inherit props

playground/src/components/AkuAku.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { useTweakPane, useGLTF, OrbitControls, GLTFModel } from '@cientos'
+import { useGLTF, OrbitControls, GLTFModel, useFBX, FBXModel  } from '@cientos'
 import { sRGBEncoding, NoToneMapping } from 'three'
 
-useTweakPane()
-
 const modelPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
+const modelPathFbx = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'
 
 const { scene: model } = await useGLTF(
   modelPath,
@@ -15,7 +14,10 @@ const { scene: model } = await useGLTF(
   },
 )
 
+const modelFbx = await useFBX(modelPathFbx)
+
 const akuAkuRef = ref(null)
+const jeepRef = ref(null)
 
 const gl = {
   clearColor: '#333',
@@ -24,20 +26,27 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-
 watch(akuAkuRef, value => {
   console.log('akuAkuRef', value)
 })
+watch(jeepRef, value => {
+  console.log('jeepRef', value)
+})
 </script>
 
 <template>
   <TresCanvas v-bind="gl" ref="canvas">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresPerspectiveCamera :position="[0, 2, 10]" />
     <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-    <primitive :object="model" :position="[-3, -2, 0]"> </primitive>
+    <OrbitControls make-default />
+    <primitive :object="model" :position="[-3, -2, 0]" />
     <Suspense>
-        <GLTFModel ref="akuAkuRef" :path=modelPath draco :position="[0, -2, 0]" name="Aku_aku" />
+      <GLTFModel ref="akuAkuRef" :path=modelPath draco :position="[0, -2, 0]" name="Aku_aku" />
+    </Suspense>
+    <!-- FBX MODELS -->
+    <primitive :object="modelFbx" :position="[6, 0, 0]" :scale="[0.01, 0.01, 0.01]" />
+      <Suspense>
+      <FBXModel ref="jeepRef" :path="modelPathFbx" :scale="0.01" :position="[0, -4, 0]" name="jeep_model" />
     </Suspense>
     <TresAmbientLight />
     <TresDirectionalLight />

src/core/useFBX/component.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useFBX } from '.'
+
+export interface FBXModelProps {
+  /**
+   * Path to the FBX file.
+   *
+   * @type {string}
+   * @memberof FBXModelProps
+   * @required
+   */
+  path: string
+}
+
+const props = defineProps<{
+    path: string
+  }>()
+
+const modelRef = ref()
+
+defineExpose({
+  value: modelRef,
+})
+
+const model = await useFBX(props.path as string)
+
+</script>
+<template>
+  <primitive ref="modelRef" :object="model" v-bind="$attrs" />
+</template>

src/index.ts

@@ -5,7 +5,7 @@ import { PamCameraMouse } from './core/usePamCameraMouse/component'
 import { useTweakPane } from './core/useTweakPane'
 import { useAnimations } from './core/useAnimations'
 import GLTFModel from './core/useGLTF/component.vue'
-import { FBXModel } from './core/useFBX/component'
+import FBXModel from './core/useFBX/component.vue'
 import Stars from './core/Stars.vue'
 import Text3D from './core/Text3D.vue'
 import Plane from './core/Plane.vue'