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

Clone same model

<template>
    <vue3dLoader 
        :filePath="filePath" 
        backgroundColor="#cccccc" 
        :cameraPosition="{x:0, y:0, z:0}" 
        ref="vue3dLoaderRef"
        @load="cloneObj" 
        outputEncoding="sRGB" 
        :scale="{ x: 1, y: 1, z: 1 }" 
        :enableAxesHelper="true"
        :axesHelperSize="20" 
        :enableGridHelper="true" 
    />
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const filePath = '/models/gltf/DamagedHelmet.gltf'
const vue3dLoaderRef = ref();

const cloneObj = () => {
    const { children } = vue3dLoaderRef.value.scene
    if (children) {
        const fileName = filePath.split('/').pop()
        children.forEach((item: any) => {
            // same fileName obj
            if (item.fileName === fileName) {
                const cloneItem = item.clone()
                // Set new obj fileName
                cloneItem.fileName = 'clone_' + fileName
                // Set new obj position
                cloneItem.position.set(5, 0, 0)
                // add new obj to scene
                vue3dLoaderRef.value.scene.add(cloneItem)
            }
        })
    }
}
</script>
Edit this page on Github
Last Updated: 4/12/24, 11:28 AM
Contributors: king2088
Prev
Point light follow camera