Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.27k stars 107 forks source link

useTres doesnt get updated on subcomponent #209

Closed alvarosabu closed 1 year ago

alvarosabu commented 1 year ago

Describe the bug When use useTres composable inside a sub-component to obtain the state, this state never gets updated. Curiously it does get updated when accessed from cientos or any other package

Reproduction Please provide a link using this template on Stackblitz

Steps Steps to reproduce the behavior:

  1. Go to reproduction link
  2. Open console.
  3. See that the console inside of the sphere gives a default state with mostly all undefined, but the console on the parent using templateRef context is updated with the correct value of state

Expected behavior State using useTres should provide correct updated state

Screenshots If applicable, add screenshots to help explain your problem.

System Info Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

 System:
    OS: Linux 5.0 undefined
    CPU: (3) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @tresjs/cientos: ^2.0.0-beta.3 => 2.0.0-beta.3 
    @tresjs/core: ^2.0.0-beta.9 => 2.0.0-beta.9 
    vite: ^4.2.2 => 4.2.2 

Additional context Add any other context about the problem here.

Tinoooo commented 1 year ago

The cause for this problem is that useTres is not provided to components below TresScene. That is the case, because the context is lost when the scene is mounted here. It works in cientos, because cientos does not use the symbol but the string 'useTres'. I think we should make it use the symbol, for better typing and to avoid potential collisions.