Perhaps you’ve already exposed this sort of interface/api, but is there a way to create many instances of the same mesh (they share the same geometry, and optionally share the same materials)
Yes, there is a dedicated section about cloning/instancing: Copies, Clones and Instances | Reactylon, the sugar syntax is the instanceFrom prop.
Going off the example you provided, lets say your group of boxes constitutes a single mesh tree. I want to create many instances that all respond to the same hide/show logic at an individual level. That is each group of boxes can be toggled on/off, and each group of boxes can hide/show individual boxes.
Great example to showcase. As the goal is to share the same materials across the boxes, we will use instances instead of clones and, for simplicity, instead of showing or hiding a single box, we will scale its dimensions.
There are two BoxGroup components (representing your single mesh tree), each accepting the following props:
name: the name of the box groupcount: the number of the boxescolor: the color of the boxespositionY: the Y position of the box group
When you click on a box, its size toggles between 1 and 2. This change is handled acting on the ref the box so it won’t trigger a re-render.
At the top level, the visibility of the two BoxGroup is managed through HTML buttons, controlled by an external context (primary renderer) and React state. When a BoxGroup is shown, it creates new instances, while it is hidden, it disposes all of them.
Note: the visibility of a BoxGroup doesn’t influence the state of the other one (for instance, try to click on some boxes of one BoxGroup and then toggle the visibility of the other one).
The example is pretty simple, but it demonstrates several key-concepts:
- How to sync external updates with the Reactylon rendering context (from primary to secondary renderer)
- How to change a property without trigger a re-render (by using ref)
- How a React component-based approach simplifies managing a unified entity by encapsulating count, color, and events, making updates and interactions more efficient and scalable.
