Merge pull request #11 from sunquakes/development

Add fbx and obj loader.

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [0.0.4] - 2025-02-14
+
+### Add
+
+- Add FBX model loader.
+- Add OBJ model loader.
+- Add onProgress callback for model loader.
+
+---
+
 ## [0.0.3] - 2025-02-12
 
 ### Add

docs/docs/.vuepress/client.js

@@ -4,8 +4,14 @@ import Scene from './components/Scene.vue'
 import SceneBgImage from './components/SceneBgImage.vue'
 import SceneClearColor from './components/SceneClearColor.vue'
 import SkyBox from './components/SkyBox.vue'
-import GLTFLoader from './components/GLTFLoader.vue'
+import GLTFLoaderComponent from './components/GLTFLoaderComponent.vue'
+import GLTFLoaderFunction from './components/GLTFLoaderFunction.vue'
+import FBXLoaderComponent from './components/FBXLoaderComponent.vue'
+import FBXLoaderFunction from './components/FBXLoaderFunction.vue'
+import OBJLoaderComponent from './components/OBJLoaderComponent.vue'
+import OBJLoaderFunction from './components/OBJLoaderFunction.vue'
 import Popup from './components/Popup.vue'
+import MovableElement from './components/MovableElement.vue'
 
 export default defineClientConfig({
   enhance({ app }) {
@@ -14,7 +20,13 @@ export default defineClientConfig({
     app.component('SceneBgImage', SceneBgImage)
     app.component('SceneClearColor', SceneClearColor)
     app.component('SkyBox', SkyBox)
-    app.component('GLTFLoader', GLTFLoader)
+    app.component('GLTFLoaderComponent', GLTFLoaderComponent)
+    app.component('GLTFLoaderFunction', GLTFLoaderFunction)
+    app.component('FBXLoaderComponent', FBXLoaderComponent)
+    app.component('FBXLoaderFunction', FBXLoaderFunction)
+    app.component('OBJLoaderComponent', OBJLoaderComponent)
+    app.component('OBJLoaderFunction', OBJLoaderFunction)
     app.component('Popup', Popup)
+    app.component('MovableElement', MovableElement)
   }
 })

docs/docs/.vuepress/components/FBXLoaderComponent.vue

@@ -0,0 +1,24 @@
+<template>
+  <tv-scene class="scene" v-model="sceneValue" @created="created">
+    <tv-fbx-loader v-model="fbxUrl" :scene="sceneValue"></tv-fbx-loader>
+  </tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const fbxUrl = ref('/models/girl.fbx')
+const sceneValue = ref(null)
+
+const created = (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/components/FBXLoaderFunction.vue

@@ -0,0 +1,23 @@
+<template>
+  <tv-scene class="scene" @created="created"></tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { FBXLoader } from 'three-vue3'
+
+const created = async (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+
+  // Load model to scene.
+  const model = await FBXLoader('/models/girl.fbx')
+  scene.add(model)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/components/GLTFLoaderFunction.vue

@@ -0,0 +1,23 @@
+<template>
+  <tv-scene class="scene" @created="created"></tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { GLTFLoader } from 'three-vue3'
+
+const created = async (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+
+  // Load model to scene.
+  const model = await GLTFLoader('/models/girl.glb')
+  scene.add(model)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/components/MovableElement.vue

@@ -0,0 +1,29 @@
+<template>
+  <tv-scene class="scene" @created="created"></tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { ME, GLTFLoader } from 'three-vue3'
+
+const created = async (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+
+  // Load model to scene.
+  const model = await GLTFLoader('/models/girl.glb', true)
+  scene.add(model)
+
+  // Create movable element.
+  const element = new ME(model, [0, 0, -1])
+
+  // Move to [0, 0, 0] from [0, 0, -1] in 10 seconds.
+  element.moveTo([0, 0, 0], 10000)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/components/OBJLoaderComponent.vue

@@ -0,0 +1,25 @@
+<template>
+  <tv-scene class="scene" v-model="sceneValue" @created="created">
+    <tv-obj-loader v-model="objUrl" :mtl="mtlUrl" :scene="sceneValue"></tv-obj-loader>
+  </tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const objUrl = ref('/models/obj/girl.obj')
+const mtlUrl = ref('/models/obj/girl.mtl')
+const sceneValue = ref(null)
+
+const created = (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/components/OBJLoaderFunction.vue

@@ -0,0 +1,23 @@
+<template>
+  <tv-scene class="scene" @created="created"></tv-scene>
+</template>
+
+<script lang="ts" setup>
+import { OBJLoader } from 'three-vue3'
+
+const created = async (scene, { camera }) => {
+  camera.position.set(0, 1.5, 3)
+
+  // Load model to scene.
+  const model = await OBJLoader('/models/obj/girl.obj', '/models/obj/girl.mtl')
+  scene.add(model)
+}
+</script>
+
+<style>
+.scene {
+  margin-top: 10px;
+  width: 100%;
+  height: 300px;
+}
+</style>

docs/docs/.vuepress/config.js

@@ -2,7 +2,19 @@ import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress/cli'
 import { viteBundler } from '@vuepress/bundler-vite'
 
-const children = ['getting-started', 'scene', 'sky-box', 'model-loader', 'popup']
+const getChildren = (options) => {
+  return [
+    'getting-started',
+    'scene',
+    'sky-box',
+    {
+      text: options.modelLoaderText,
+      children: ['model-loader-component', 'model-loader-function']
+    },
+    'popup',
+    'movable-element'
+  ]
+}
 
 export default defineUserConfig({
   lang: 'en-US',
@@ -27,7 +39,9 @@ export default defineUserConfig({
         sidebar: {
           '/guide/': [
             {
-              children: children
+              children: getChildren({
+                modelLoaderText: 'Model Loader'
+              })
             }
           ]
         }
@@ -41,7 +55,9 @@ export default defineUserConfig({
         sidebar: {
           '/zh/guide/': [
             {
-              children: children
+              children: getChildren({
+                modelLoaderText: '模型加载器'
+              })
             }
           ]
         }