sharing textures/materials/geometries

Sorry if this is noob question but how do I share textures, materials, and geometry?

In normal three.js I can do this

const texture = loader.load('someurl');
const material = new THREE.MeshBasicMaterial({map: texture});
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);

const m1 = new THREE.Mesh(geometry, material);
const m2 = new THREE.Mesh(geometry, material);
const m3 = new THREE.Mesh(geometry, material);
const m4 = new THREE.Mesh(geometry, material);

m1.position.x = -2;
m2.position.x = -1;
m3.position.x = 1;
m4.position.x = 2;

scene.add(m1);
scene.add(m2);
scene.add(m3);
scene.add(m4);

What’s the equivalent here?

I get the

<group>
    <mesh position=...>
    <mesh position=...>
    <mesh position=...>
    <mesh position=...>
</group>

part but I’m not sure I get the rest.

in normal DOM React heavy resources are referred to by URLs and the browser magically manages them so

<div>
  <img url="sameUrl" />
  <img url="sameUrl" />
  <img url="sameUrl" />
  <img url="sameUrl" />
</div>

Only actually loads one image into the browser. The browser also knows when that image is safe to free.

It feels like texture, geometry, and materials are kind of the equivalent in three.js but here they’re being treated as DOM elements when in fact they are not part of the hierarchy. Like the actual bits of an image they are outside the hierarchy so it seems confusing to me to make them part of the hierarchy.

[greggman]

I get all of that. But it’s a basic tenet of good software design that you don’t mix things that are fundamentally different in the same tree of nodes. Yes, an audio tag might be a strange exception except really not. By default an audio node displays audio controls. An audio node not in the DOM tree is well known wart in the browser and in fact wouldn’t work in react, react will stick in in the tree even though you don’t want it in the tree unless you go to some crazy contortions to prevent it.

A geometry is not a child of a mesh. It’s not, period. It should not be represented as one

[drcmda]

One idea i had would maybe allow them to call into a render child, if they detect one, so you could do

<meshBasicMaterial color={color}>
  {material => (
    <mesh material={material} />
    <mesh material={material} />
    <mesh material={material} />
  )}
</meshBasicMaterial>

That would solve it, and even take care of deeply nested re-use.