Tresjs / tres

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

TresInstancedMesh breaks with a dynamic instance count #746

Open darkvertex opened 4 days ago

darkvertex commented 4 days ago

Describe the bug

I took a stackblitz from @alvarosabu demonstrating TresJS with an InstancedMesh with a bunch of ondulating Suzanne monkey heads, and then I edited the code so it starts with a ref() count of 3, and on each @click of the InstancedMesh, it is SUPPOSED to increment the count by 1 but then breaks.

I am developing something with a realtime floor map showing people markers, and the number of people changes dynamically as they enter the room, potentially every few seconds. Everything worked great with static count values but breaks when it changes dynamically. :/

It errors like this:

image

(and no, I'm not setting .position on the InstancedMesh, so not sure what that's about.)

Reproduction

https://stackblitz.com/edit/tresjs-instanced-mesh-fklgmc?file=src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

  1. npm install pnpm
  2. pnpm install
  3. pnpm run dev
  4. Wait for the animated Suzanne heads to appear. (It will be 3 at first.)
  5. Click on one of the monkey heads while Chrome Devtools console is open. (It should increment the instance count by +1, but breaks.)

System Info

Ran from Stackblitz:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 9.4.0 - ~/projects/tresjs-instanced-mesh-fklgmc/node_modules/.bin/pnpm
  npmPackages:
    @tresjs/cientos: 3.9.0 => 3.9.0 
    @tresjs/core: ^4.0.2 => 4.0.2 
    vite: ^4.1.4 => 4.5.3 


### Used Package Manager

pnpm

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://tresjs.org/guide).
- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
darkvertex commented 4 days ago

Also to be clear, I don't believe this is an issue with threejs as there is an official example showing dynamically changing instance counts on the same InstancedMesh working no problem:

https://threejs.org/examples/?q=inst#webgl_instancing_dynamic