Vue 3d loaderVue 3d loader
Guide
  • English
  • 简体中文
GitHub
Guide
  • English
  • 简体中文
GitHub
  • Guide

    • Introduce
    • Get started
    • Event
    • API
    • Donation
  • Example

    • Load a 3D model
    • Loading multiple models in the same scene
    • Load json 3D model
    • Loader draco model
    • Set width and height
    • Material and texture
    • Background color and transparency
    • Interactive control
    • Rotate 3D model
    • Events
    • Lights
    • Camera position and rotation
    • Load multiple models in parallel
    • Add label
    • Play/stop animation
    • Enable damping
    • Loading progress
    • Set camera vertical/horizontal rotation
    • Enable axes helper and grid helper
    • Set min or max distance
    • Point light follow camera
    • Clone same model

Play/stop animation

Play
<template>
  <div class="check-box">
    <input type="checkbox" @change="change()" checked />
    {{ autoPlay ? "Play" : "Stop" }}
  </div>
  <vue3dLoader
    filePath="/models/collada/stormtrooper/stormtrooper.dae"
    :cameraPosition="{ x: 20, y: 0, z: -10 }"
    :autoPlay="autoPlay"
    :height="350"
    backgroundColor="#F2F2F2"
  />
</template>
<script setup lang="ts">
import { vue3dLoader } from "vue-3d-loader";
import { ref } from "vue";
const autoPlay = ref(true);
function change() {
  if (autoPlay.value) {
    autoPlay.value = false;
  } else {
    autoPlay.value = true;
  }
}
</script>
<style>
.check-box {
  background-color: rgb(13, 6, 103);
  padding: 5px 4px;
  z-index: 100;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
}
</style>

Edit this page on Github
Last Updated: 10/30/22, 9:09 PM
Contributors: Tony Tao
Prev
Add label
Next
Enable damping