Simple examples of Merged and Instances?

[joshon]

I love 0xca0a's examples but I was wondering if there were some more simple implementations of both Instances and Merged.

I tried to implement a very basic example of Merged and failed here:
https://codesandbox.io/s/magical-hopper-9pgvo?file=/src/App.jsx

import React from "react";
import { Canvas } from "@react-three/fiber";
import { Merged, OrthographicCamera, OrbitControls } from "@react-three/drei";
import * as THREE from "three";

function Box(props) {
  return (
    <mesh {...props}>
      <boxGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  );
}

export default function App() {
  return (
    <>
      <Canvas style={{ background: "white" }} shadows dpr={[1, 2]}>
        <ambientLight intensity={0.5} />
        <directionalLight
          intensity={0.5}
          castShadow
          shadow-mapSize-height={512}
          shadow-mapSize-width={512}
        />

        <Merged meshes={[box]}>.     <<<<<<. I know this is wrong - but I don't know what the array should/could consist of
          {(Box) => (
            <>
              <Box position={[-2, -2, 0]} color="red" />
              <Box position={[-3, -3, 0]} color="tomato" />
            </>
          )}
        </Merged>
        <OrthographicCamera makeDefault zoom={50} position={[0, 40, 200]} />

        <OrbitControls
          minZoom={10}
          maxZoom={50}
          target={[0, 0, 0]}
          enableDamping={true}
        />
      </Canvas>
    </>
  );
}

I was basing it on the example in the docs: https://github.com/pmndrs/drei#merged

And maybe this should be a separate question but I was wondering if there were other patterns for manipulating instances than the one in the shoes example - where there is a useFrame on each instance.
https://codesandbox.io/s/floating-instanced-shoes-h8o2d

Thanks!

[drcmda]

meshes is an array or an object collection of THREE.Mesh. not components rendering a three.mesh, but the real thing, existing meshes. for instance the output of "nodes" when you load a gltf.

here's a pretty simple instances example: https://codesandbox.io/s/floating-instanced-shoes-h8o2d

[joshon]

Thank you, that helps, but I am still failing on the Merged.

I changed the Box function in the example to return a Three.js mesh, but I am still doing something wrong:

https://codesandbox.io/s/angry-lovelace-1qmim?file=/src/App.jsx

import React from "react";
import { Canvas } from "@react-three/fiber";
import { Merged, OrthographicCamera, OrbitControls } from "@react-three/drei";
import * as THREE from "three";

function Box({ position, ...props }) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
  object.position.x = position[0];
  object.position.y = position[1];
  object.position.z = position[2];
  return object;
}

export default function App() {
  return (
    <>
      <Canvas style={{ background: "white" }} shadows dpr={[1, 2]}>
        <ambientLight intensity={0.5} />
        <directionalLight
          intensity={0.5}
          castShadow
          shadow-mapSize-height={512}
          shadow-mapSize-width={512}
        />

        <Merged meshes={[Box]}>
          {(Box) => (
            <>
              <Box position={[-2, -2, 0]} color="red" />
              <Box position={[-3, -3, 0]} color="tomato" />
            </>
          )}
        </Merged>
        <OrthographicCamera makeDefault zoom={50} position={[0, 40, 200]} />

        <OrbitControls
          minZoom={10}
          maxZoom={50}
          target={[0, 0, 0]}
          enableDamping={true}
        />
      </Canvas>
    </>
  );
}

[joshon]

As for the instances example. I love your floating shoes example, and have spent a lot of time with it! I really appreciate the beautiful examples that you provide. I actually mentioned it in the original question too, because I was looking for some other patterns of how both <Instances> and <Instance> might be used. In the floating shoes example you have the useFrame logic in the Instance - which seems compelling.

When I compare that with most of the R3F InstancedMesh examples - (e.g. Jon Palin's gorgeous factorization visualization and Peter Beshai's incredibly helpful tutorial - both of whom rightfully credit you!) - I see layout logic is often contained in the array of data being passed into instanced mesh - which also seems useful for maintaining a more centralized set of data.

I was looking for examples of <Instances> that use similar ways of parsing the data. Maybe a port would be simple - but I don't understand how <Instances> and <Instance> work well enough to do that myself without a lot of trial and error right now. All the examples I see are variations on your shoes demo. And that might just be because it is so new!

Looking back at the Instanced Vertex-Colors example would there be any difference in using <InstancedMesh> vs <Instances>? I think <Instances> might allow more versatility - but I can't understand or explain why.

Thanks!

[drcmda]

meshes wants an array of meshes, not functions that return meshes.

[joshon]

Thanks.
https://codesandbox.io/s/angry-goodall-99upv

[TeoAvignon]

Hello,

I would like to create an Instance from the Merged geometry in your codesandbox. And then, in each instance, I would like to control the size of the cube and the sphere independly.

How would you proceed please?