feat(cientos): useFBX and FBXModel

packages/cientos/src/core/useFBX/component.ts

@@ -0,0 +1,31 @@
+import { Scene } from 'three'
+import { defineComponent, inject, reactive, ref, Ref, shallowRef, toRaw, unref } from 'vue'
+import { useFBX } from '.'
+
+export const FBXModel = defineComponent({
+  name: 'FBXModel',
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  async setup(props, { expose }) {
+    const scene = inject<Ref<Scene>>('local-scene')
+    let model = null
+
+    function getModel() {
+      return model
+    }
+    expose({ getModel })
+
+    model = await useFBX(props.path as string)
+
+    if (scene?.value && model.isObject3D) {
+      scene.value.add(model)
+    }
+    return () => {
+      model
+    }
+  },
+})

packages/cientos/src/core/useFBX/index.ts

@@ -0,0 +1,7 @@
+import { FBXLoader } from 'three-stdlib'
+import { useLoader } from '@tresjs/core'
+import { Object3D } from 'three'
+
+export async function useFBX(path: string | string[]): Promise<Object3D> {
+  return (await useLoader(FBXLoader, path)) as unknown as Object3D
+}

packages/cientos/src/core/useGLTF/index.ts

@@ -1,16 +1,12 @@
 import { GLTFLoader, DRACOLoader } from 'three-stdlib'
 import { useLoader } from '@tresjs/core'
-import { Object3D } from 'three'
+import { TresObject } from '/@/types'
 
 export interface GLTFLoaderOptions {
   draco?: boolean
   decoderPath?: string
 }
 
-export interface TresObject extends Object3D {
-  geometry: THREE.BufferGeometry
-  material: THREE.Material
-}
 export interface GLTFResult {
   nodes: Array<TresObject>
   materials: Array<THREE.Material>

packages/cientos/src/index.ts

@@ -2,8 +2,10 @@ import OrbitControls from './core/OrbitControls.vue'
 import TransformControls from './core/TransformControls.vue'
 import { useTweakPane } from './core/useTweakPane'
 import { GLTFModel } from './core/useGLTF/component'
+import { FBXModel } from './core/useFBX/component'
 import Text3D from './core/Text3D.vue'
 
 export * from './core/useGLTF'
-
-export { OrbitControls, TransformControls, useTweakPane, GLTFModel, Text3D }
+export * from './core/useFBX'
+export * from './types'
+export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D }

packages/cientos/src/types/index.ts

@@ -0,0 +1,6 @@
+import { Object3D } from 'three'
+
+export interface TresObject extends Object3D {
+  geometry: THREE.BufferGeometry
+  material: THREE.Material
+}

packages/tres/src/components/FBXModels.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Color, sRGBEncoding } from 'three'
+
+import { OrbitControls, useTweakPane, FBXModel, useFBX } from '../../../cientos/src/'
+
+const bgColor = new Color('#F78B3D')
+useTweakPane()
+
+const jeepRef = ref()
+
+watch(jeepRef, ({ getModel }) => {
+  const model = getModel()
+  model.scale.set(0.01, 0.01, 0.01)
+  model.rotation.y = -Math.PI / 2
+})
+</script>
+
+<template>
+  <Suspense>
+    <TresCanvas
+      :clear-color="bgColor"
+      shadows
+      alpha
+      window-size
+      power-preference="high-performance"
+      :output-encoding="sRGBEncoding"
+    >
+      <OrbitControls />
+      <TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
+      <TresScene :fog="bgColor">
+        <TresAmbientLight :color="0xffffff" :intensity="0.75" />
+        <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>