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

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

      • Wave Circle Mesh
    • Effect

      • Bloom

type

Function

GLTF Loader

Default Usage

Click me to view the codes
<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/perseverance.glb')
  model.scale.set(0.8, 0.8, 0.8)
  scene.add(model)
}
</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-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/perseverance.fbx')
  model.scale.set(0.8, 0.8, 0.8)
  scene.add(model)
}
</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-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/perseverance.obj', '/models/obj/perseverance.mtl')
  model.scale.set(0.8, 0.8, 0.8)
  scene.add(model)
}
</script>

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

Parametersa

NameTypeDefaultDescription
urlstringrequired The model url.
mtlUrlstring?required The model material url. Only OBJLoader need this parameter.
cachebooleantrueoptional The model will be cached into the indexDB. Default is true.
onProgressfunctionoptional The callback function when loading the model. (event: {type: string, progress: number}) => void.
Edit this page on GitHub
Last Updated:
Contributors: Shing Rui
Prev
Component Loader