GLTFModel not updating displayed model on reactive property change

71371D commented 1 year ago

Describe the bug

I'm currently using @tresjs/cientos to render 3D models in a Nuxt.js application. When I attempt to change the model's source file using Vue's reactivity system, the displayed model does not update, even though other parts of my logic (e.g., console.log statements) indicate that the reactive changes have been recognized.

Reproduction

/

Steps to reproduce

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { GLTFModel } from '@tresjs/cientos'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore();
let selectedEquipmentFilePath = ref("OBJ.glb")

function selectEquipment() {
    selectedEquipmentFilePath.value = "nuxt-stones.glb"
    console.log("Function executed.")
}

watch(
    () => store.selectedEquipmentIndex,
    () => {
        selectEquipment();
    }
);
</script>

<template>
    <GLTFModel :path="selectedEquipmentFilePath" :key="selectedEquipmentFilePath" />
</template>

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 3.44 GB / 15.71 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.5 - ~\Documents\NubesLofoten DEV\VueAttempt\my-app\node_modules\.bin\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.2283.0), Chromium (116.0.1938.81)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @tresjs/cientos: ^3.3.0 => 3.3.0
    @tresjs/nuxt: ^1.1.6 => 1.1.6
    @tresjs/post-processing: ^0.4.0 => 0.4.0

Used Package Manager

pnpm

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[x] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

hawk86104 commented 1 year ago

me too Using useLoader && Using useGLTF are not working but only Using GLTFModel way can go

hawk86104 commented 1 year ago

Thank you very much. This library is excellent to use, and the approach is clear. The asynchronous issue has been resolved now, mainly by wrapping the appropriate sections with the tag. <Suspense>

alvarosabu commented 11 months ago

Hi @NubesLofoten Im gonna move this to the proper repository

JaimeTorrealba commented 5 months ago

This issue should be solved with the v4 of Tres/core.

I'm going to close this one but if after the v4 it doesn't work, feel free to re-open it again

Tresjs / cientos