Are geometries and meshes being recreated every time?

[andersonjoseph]

Hi! I'm currently experimenting with this amazing library, but I have some doubts regard creation of meshes.

If I'm running a code like this:

function Picture(props) {

    return (
        <mesh position={props.position} >
            <planeBufferGeometry args={[4.5, 4.5]} />
            <meshBasicMaterial wireframe />
        </mesh>
    )
}

const arr = [];
for (let i = 0; i < 50; i++) {
    arr.push(<Picture position={[x, y, z ]} />)
}

The geometry and material are being recreated 50 times? Because I would like to have same geometry and material for every Mesh. Thanks in advance.

[drcmda]

they are. and that will quickly become a problem. if you want to share geometries and materials you can put them in global space, or into a state manager. for instance: https://codesandbox.io/s/zxpv7?file=/src/App.js

everything you load via useloader is cached and can be re-used without problem. you can also use use-asset directly (a caching library) in order to cache and re-use resources.

another thing that will become important is instancing. each mesh, even if you re-use geometries and materials means a draw call. you can have maybe a 100 of those if they're reasonably complex. if you can't instance look into this: https://twitter.com/0xca0a/status/1413600110177574915

[andersonjoseph]

Thanks for your answer! it's clear now,.Currently I can't instance and that solution is brilliant.

[Kinatzo]

Just to verify... Is it correct that I could add geometries that I would resuse in my scene hundreds of times in a store (zustand) like this?

import create from "zustand";
import * as THREE from "three";

export type Store = {
  box: THREE.BoxGeometry;
  plane: THREE.PlaneGeometry;
};

export const useStore= create<Store>(() => ({
  box: new THREE.BoxGeometry(),
  plane: new THREE.PlaneGeometry(),
}));

[drcmda]

sure, why not. the jsx you write is pure threejs in the end. that <mesh> can have a geometry property, and if threejs docs says it can take a boxgeometry that wouldn't change. where you define it, global state, state manager, module state, local state, that's up to you.