Merge pull request #74 from Tresjs/feature/67-usefbx-composable-and-component-for-cientos

Feature/67 usefbx composable and component for cientos

docs/.vitepress/config.ts

@@ -77,6 +77,8 @@ export default defineConfig({
             items: [
               { text: 'useGLTF', link: '/cientos/loaders/use-gltf' },
               { text: 'GLTFModel', link: '/cientos/loaders/gltf-model' },
+              { text: 'useFBX', link: '/cientos/loaders/use-fbx' },
+              { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
             ],
           },
           {
@@ -88,8 +90,8 @@ export default defineConfig({
     ],
     nav: [
       { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' },
+      /*       { text: 'API', link: '/api/' },
+      { text: 'Config', link: '/config/' }, */
       {
         text: 'Ecosystem',
         activeMatch: `^/ecosystem/`,

docs/cientos/loaders/fbx-model.md

@@ -0,0 +1,27 @@
+# Using `FBXModel`
+
+The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
+
+```vue{2,10}
+<script setup lang="ts">
+import { OrbitControls, FBXModel } from '@tresjs/cientos'
+</script>
+<template>
+  <Suspense>
+    <TresCanvas clear-color="#82DBC5" shadows alpha>
+      <TresPerspectiveCamera :position="[11, 11, 11]" />
+      <OrbitControls />
+      <TresScene>
+        <FBXModel path="/models/AkuAku.fbx" />
+        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>
+```
+
+## Props
+
+| Prop   | Description             | Default     |
+| :----- | :---------------------- | ----------- |
+| `path` | Path to the model file. | `undefined` |

docs/cientos/loaders/use-fbx.md

@@ -0,0 +1,23 @@
+# useFBX
+
+A composable that allows you to easily load glTF models into your **TresJS** scene.
+
+## Usage
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+const model = await useFBX('/models/AkuAku.fbx')
+```
+
+Then is as straightforward as adding the scene to your scene:
+
+```html{4}
+<Suspense>
+  <TresCanvas shadows alpha>
+    <TresScene>
+      <TresMesh v-bind="scene" />
+    </TresScene>
+  </TresCanvas>
+</Suspense>
+```

docs/examples/load-models.md

@@ -78,3 +78,47 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 ```
 
 This particular approach is more straightforward but gives you less control over the model.
+
+## useFBX
+
+The `useFBX` composable is available from [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+const model = await useFBX('/models/AkuAku.fbx')
+```
+
+Then is as straightforward as adding the scene to your scene:
+
+```html{4}
+<Suspense>
+  <TresCanvas shadows alpha>
+    <TresScene>
+      <TresMesh v-bind="scene" />
+    </TresScene>
+  </TresCanvas>
+</Suspense>
+```
+
+## FBXModel
+
+The `FBXModel` component is a wrapper around `useFBX` that's available from [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar usage to `GLTFModel`:
+
+```vue{2,10}
+<script setup lang="ts">
+import { OrbitControls, FBXModel } from '@tresjs/cientos'
+</script>
+<template>
+  <Suspense>
+    <TresCanvas clear-color="#82DBC5" shadows alpha>
+      <TresPerspectiveCamera :position="[11, 11, 11]" />
+      <OrbitControls />
+      <TresScene>
+        <FBXModel path="/models/AkuAku.fbx" />
+        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>
+```

docs/index.md

@@ -7,7 +7,7 @@ titleTemplate: The solution for 3D on VueJS
 hero:
   name: TresJS
   text: Bring ThreeJS to VueJS ecosystem
-  tagline: Think of it as a R3F or Lunchboxjs but without the need of a custom render.
+  tagline: Create awesome 3D experience with the framework you love.
   image:
     src: /hero.png
     alt: Tresjs
@@ -18,9 +18,6 @@ hero:
     - theme: alt
       text: Why Tres?
       link: /guide/#motivation
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/tresjs/tres
 
 features:
   - icon: 💡

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

@@ -0,0 +1,31 @@
+import { Object3D, Scene } from 'three'
+import { defineComponent, inject, Ref } 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: Object3D | null = 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/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-import TheGroups from '/@/components/TheGroups.vue'
+import FBXModels from '/@/components/FBXModels.vue'
 
 useTweakPane()
 </script>
 
 <template>
   <Suspense>
-    <TheGroups />
+    <FBXModels />
   </Suspense>
 </template>

packages/tres/src/components/FBXModels.vue

@@ -0,0 +1,43 @@
+<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()
+
+const model = await useFBX('/models/low-poly-truck/Jeep_done.fbx')
+model.position.set(0, 4, 0)
+model.scale.set(0.01, 0.01, 0.01)
+model.updateMatrixWorld()
+
+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" />
+        <TresMesh v-bind="model" />
+        <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>