Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.27k stars 107 forks source link

useFbx composable and component for cientos #67

Closed alvarosabu closed 1 year ago

alvarosabu commented 1 year ago

Is your feature request related to a problem? Please describe. Since a potential user is interested in using TresJS to load FBX models and to be honest, along with Gltf is one of the most used formats let's add support for it

Describe the solution you'd like Same thing as useGLTFbut for fbx models

Suggested solution

import { useFBX } from '@tresjs/cientos'

const { scene } = await useFBX('/models/AkuAku.fbx')

or

<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>

for the composable import the loader from three-stdlib

alvarosabu commented 1 year ago

Depends on #72 to properly transform groups when using useFBX composable