Large number of polygons with react-three-fiber
I need to display thousands of polygons (2d) of different shapes with react-three-fiber.
I thought the best option would be to use instances of the same polygon with, let's say 100 vertices. And then to move the vertices of each instances in its vertex shader according to its shape.
I'm able to show triangles with react-three-drei Instances, but I cannot change the position of the vertices of each of those triangles.
While the approach you're describing (use instancing, and in the vertex shader use the instance ID or other data to procedurally rearrange vertices) is possible, it could be fairly complex depending on the topologies of the shapes.
I think that THREE.BatchedMesh is probably a better option here. It allows you to draw any number of distinct geometries with different vertices in a single draw call, as long as they share a single material. For an example using BatchedMesh in R3F, see:
https://codesandbox.io/p/sandbox/batchedmesh-3pf9d2
The example uses a custom material, but if you only need per-instance color (and not per-instance values of other PBR properties) then the built-in MeshStandardMaterial would be fine.
- Problem reading generated texture from fragment shader using ThreeJS
- Move object along spline(circle) in Three.js
- Cannot get a simple cube to load using React-Three-Fiber
- Three js line thickness
- Large number of polygons with react-three-fiber
- How to modify UV coordinates with three.js
- Is there a way to only have one instance of THREE when using Threebox
- Error message "Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null"
- GLTF 3D model isn't animated when it should be
- How i can make the object steady 180 degrees?
- how to import THREE.InfiniteGridHelper
- Changing three.js background to transparent or other color
- What’s the difference between linear depth, perspective depth, and orthographic depth?
- Three.js breaks when trying to import OrbitControls.js
- How to make a three.js cube have different colors on different sides?
- How to Hide/Show Objects using Three.js release 54?
- Three.js FirstPersonControls camera rotation jumps back after GSAP tween / restart controls
- 3d object should always "fit" inside the window with Orthographic Camera
- Import camera from gltf
- Three Js when rotation and Scalling then mesh object psotion changes
- The React Three Fiber mesh tag is unrecognized in this browser
- Why does not the ambient light work in this example?
- WebGL z-buffer artifacts?
- With Instancing, I am not able to change the transparency/opacity of the individual child geometries
- How do I set colors for three js instanced objects?
- Draw a basic triangle with Three.js
- How to use Three.js InstancedBufferGeometry & InstancedBufferAttribute?
- Transparency within instanced shapes
- three.js color changes don't revert on instanceColor set
- Load models from remote URL with ThreeJS/FIber