From b15935e6a9d680b7e7159f8057493b7c1befb62f Mon Sep 17 00:00:00 2001
From: Jaime A Torrealba C <solucionesinformaticasjtc@gmail.com>
Date: Mon, 24 Apr 2023 13:53:59 -0400
Subject: [PATCH] fix: fbxModel inherit props

---
 playground/src/components/AkuAku.vue | 25 +++++++++++++------
 src/core/useFBX/component.ts         | 37 ----------------------------
 src/core/useFBX/component.vue        | 31 +++++++++++++++++++++++
 src/index.ts                         |  2 +-
 4 files changed, 49 insertions(+), 46 deletions(-)
 delete mode 100644 src/core/useFBX/component.ts
 create mode 100644 src/core/useFBX/component.vue

diff --git a/playground/src/components/AkuAku.vue b/playground/src/components/AkuAku.vue
index 8deddf01..89d12a69 100644
--- a/playground/src/components/AkuAku.vue
+++ b/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 />
diff --git a/src/core/useFBX/component.ts b/src/core/useFBX/component.ts
deleted file mode 100644
index 432f82d0..00000000
--- a/src/core/useFBX/component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Object3D } from 'three'
-import { defineComponent } from 'vue'
-import { useFBX } from '.'
-import { useCientos } from '../useCientos'
-
-export interface FBXModelProps {
-  /**
-   * Path to the FBX file.
-   *
-   * @type {string}
-   * @memberof FBXModelProps
-   * @required
-   */
-  path: string
-}
-export const FBXModel = defineComponent<FBXModelProps>({
-  name: 'FBXModel',
-  props: ['path'] as unknown as undefined,
-  async setup(props, { expose }) {
-    const { state } = useCientos()
-    let model: Object3D | null = null
-
-    function getModel() {
-      return model
-    }
-    expose({ getModel })
-
-    model = await useFBX(props.path as string)
-
-    if (state.scene && model.isObject3D) {
-      state.scene.add(model)
-    }
-    return () => {
-      model
-    }
-  },
-})
diff --git a/src/core/useFBX/component.vue b/src/core/useFBX/component.vue
new file mode 100644
index 00000000..3e0f06d4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 64daaae1..e572e1ca 100644
--- a/src/index.ts
+++ b/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'