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 multiple models in parallel

<template>
  <vue3dLoader
    :filePath="filePath"
    :scale="scale"
    :position="position"
    :rotation="rotation"
    :cameraPosition="{ x: 100, y: 200, z: 3000 }"
    :parallelLoad="true"
  ></vue3dLoader>
</template>
<script setup lang="ts">
import { vue3dLoader } from "vue-3d-loader";
import { ref } from "vue";
const filePath = ref();
filePath.value = [
  "/models/fbx/Samba Dancing.fbx",
  "/models/collada/pump/pump.dae",
  "/models/ply/Lucy100k.ply",
];
const position = ref();
position.value = [
  { x: 100, y: 100, z: 100 },
  { x: 300, y: 300, z: 300 },
];
const rotation = ref();
rotation.value = [
  { x: 0, y: 0, z: 0 },
  { x: 10, y: 1, z: 1 },
];
const scale = ref();
scale.value = [
  { x: 5, y: 5, z: 5 },
  { x: 3, y: 3, z: 3 },
];
</script>
Edit this page on Github
Last Updated: 10/30/22, 9:09 PM
Contributors: Tony Tao
Prev
Camera position and rotation
Next
Add label