Three Vue3Three Vue3
Guide
  • English
  • 简体中文
GitHub
Guide
  • English
  • 简体中文
GitHub
    • Getting Started
    • Scene
    • SkyBox
    • Model Loader

      • Component Loader
        • GLTF Loader
          • Default Usage
        • FBX Loader
          • Default Usage
        • OBJ Loader
          • Default Usage
        • Props
        • Methods
      • Function Loader
    • Popup
    • Movable Element
    • Animation
    • Mesh

      • Wave Circle Mesh
    • Effect

      • Bloom

type

Component

GLTF Loader

Default Usage

Click me to view the codes
<template>
  <tv-scene class="scene" @created="created">
    <tv-gltf-loader v-model="gltfUrl" :scale="[0.8, 0.8, 0.8]"></tv-gltf-loader>
  </tv-scene>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const gltfUrl = ref('/models/perseverance.glb')

const created = (scene, { camera }) => {
  camera.position.set(0, 1.5, 3)
}
</script>

<style>
.scene {
  margin-top: 10px;
  width: 100%;
  height: 300px;
}
</style>

FBX Loader

Default Usage

Click me to view the codes
<template>
  <tv-scene class="scene" @created="created">
    <tv-fbx-loader v-model="fbxUrl" :scale="[0.8, 0.8, 0.8]"></tv-fbx-loader>
  </tv-scene>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const fbxUrl = ref('/models/perseverance.fbx')

const created = (scene, { camera }) => {
  camera.position.set(0, 1.5, 3)
}
</script>

<style>
.scene {
  margin-top: 10px;
  width: 100%;
  height: 300px;
}
</style>

OBJ Loader

Default Usage

Click me to view the codes
<template>
  <tv-scene class="scene" @created="created">
    <tv-obj-loader v-model="objUrl" :mtl="mtlUrl" :scale="[0.8, 0.8, 0.8]"></tv-obj-loader>
  </tv-scene>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const objUrl = ref('/models/obj/perseverance.obj')
const mtlUrl = ref('/models/obj/perseverance.mtl')

const created = (scene, { camera }) => {
  camera.position.set(0, 1.5, 3)
}
</script>

<style>
.scene {
  margin-top: 10px;
  width: 100%;
  height: 300px;
}
</style>

Props

NameTypeDefaultDescription
v-modelstringstringrequired The model url.
sceneTHREE.SceneTHREE.Scenerequired The Scene where the model will be rendered.
scale[number, number, number][1.0, 1.0, 1.0]optional The scale of the model.
cachebooleantrueoptional The model will be cached into the indexDB.
mtlstringoptional When using OBJLoader, the mtl file url.

Methods

NameParametersDescription
onProgress(event: {type: string, progress: number}) => voidThe callback function when loading the model.
loaded(model: THREE.Mesh) => voidThe callback function that will be called when the model is loaded.
Edit this page on GitHub
Last Updated:
Contributors: Shing, Shing Rui
Next
Function Loader