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

Loader draco model

Tips

Need to download Draco repository storage with local static folder of your project, download url: Draco decoder or download on CDN,Unzip it and place it in the public/assets directory of your local project. The draco default path is:"assets/draco/gltf/",if you want to change it, you can modify the dracoDir property. Example:if the dracoDir directory is public/draco/gltf/ ,you can modify the dracoDir property to public/draco/gltf/, the last / is not required.

<template>
  <vue3dLoader
    filePath="/models/gltf/LittlestTokyo.glb"
    :cameraPosition="{ x: 10, y: 700, z: 1000 }"
    :enableDraco="true"
    outputEncoding="sRGB"
    :height="350"
    backgroundColor="#F2F2F2"
    dracoDir="../../assets/draco/gltf/"
  />
</template>
<script lang="ts" setup>
import { vue3dLoader } from "vue-3d-loader";
</script>
Edit this page on Github
Last Updated: 10/30/22, 9:09 PM
Contributors: Tony Tao
Prev
Load json 3D model
Next
Set width and height