How to use same filename in only one vue3dLoader component ?

Kudoh1966 commented 2 months ago

I want to use like below, but show 1st model only.

<vue3dLoader
  :height="200"
  :filePath="['1.fbx', '1.fbx', '1.fbx']"
  :position="[{ x: 0, y: 0, z: 0 },{ x: 1, y: 0, z: 0 },{ x: 2, y: 0, z: 0 }]"
></vue3dLoader>

Copy and rename model files, done well.

<vue3dLoader
  :height="200"
  :filePath="['1[0].fbx', '1[1].fbx', '1[2].fbx']"
  :position="[{ x: 0, y: 0, z: 0 },{ x: 1, y: 0, z: 0 },{ x: 2, y: 0, z: 0 }]"
></vue3dLoader>

How to use same filenames in only one vue3dLoader component ?

＃Thanks for this useful tool !

king2088 commented 2 months ago

In ThreeJS, it is recommended that you use the clone method to clone the same model, if will clone new same model, you need use vue-3d-loader latest version(vue2 use 1.3.7, vue3 use 2.2.4). Example code:

<template>
    <vue3dLoader 
        :filePath="filePath" 
        backgroundColor="#cccccc" 
        :cameraPosition="positon" 
        ref="vue3dLoaderRef"
        @load="copyObj" 
        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 positon = ref();
const filePath = '/models/gltf/DamagedHelmet.gltf'
const vue3dLoaderRef = ref();

positon.value = {
    x: 0,
    y: 0,
    z: 0,
};

const copyObj = () => {
    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>

Kudoh1966 commented 2 months ago

Oh! Tnx very quick responce, got it.

king2088 / vue-3d-loader

How to use same filename in only one vue3dLoader component ? #116