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

Load a 3D model

Tips

If the loaded URL does not contain the filetype (file name extension), you need to manually specify the filetype by setting fileType

The load URL contains the file name extension

<template>
  <vue3dLoader
    filePath="/models/collada/stormtrooper/stormtrooper.dae"
    :cameraPosition="{ x: 1, y: -5, z: -20 }"
    :height="350"
  />
</template>
<script lang="ts" setup>
import { vue3dLoader } from "vue-3d-loader";
</script>

The loading URL does not contain the file name extension

<template>
  <vue3dLoader
    filePath="/models/collada/stormtrooper/3asd-y83j-okdl-e58y"
    fileType="dae"
    :cameraPosition="{ x: 1, y: -5, z: -20 }"
    :height="350"
  />
</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
Next
Loading multiple models in the same scene