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

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

      • Wave Circle Mesh
    • Effect

      • Bloom

type

Class

Default Usage

Click me to view the codes
<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/perseverance.glb', true)
  model.scale.set(0.8, 0.8, 0.8)
  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>

Props

NameTypeDescription
sceneTHREE.GroupThe model to be displayed and moved.

Methods

NameParametersDescription
constructor(model: THREE.Group, position: [number, number, number]) => void
Edit this page on GitHub
Last Updated:
Contributors: Shing Rui
Prev
Popup
Next
Animation