How to merge items with React Three Fiber

Questions
,
1

I am currently trying to merge boxes in Three JS Fiber. I tried merging the boxes, but I get the error:

TypeError: (0 , _react.useMemo) is not a function

import "./styles.css";
import React, {useMemo} from "react";
import { Canvas, merge } from "@react-three/fiber";

const Box = (props) => {
  return (
    <mesh {...props}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
};
export default function App() {
  var box1 = Box({ positon: [1, 1, 1] });
  var box2 = Box({ positon: [2, 2, 2] });
  let list = [box1, box2];
  var merged = useMemo((...list) => merge([...list]));
  return merged;
}

I feel as if my knowledge of Three.js is lacking. Is there any good series that do a complete walk-through of Three.js that you guys recommend? I wouldn’t mind watching a large multi-part series to understand, but I don’t want a series where the entire series builds 1 big project that is easy to get lost on.

It would be nice if the series started from the ground up to explain howThree.js works behind the scenes (ex difference between box buffer geometry and regular geometry). Some series I have come across just show how to make meshes, but give no explanation of the properties of how they work.

2

im not sure what this is supposed to do? useMemo doesnt have arguments, you’re spreading a blank which imo must crash. the “Box” function is a component that returns a VDOM, a loose json structure describing its contents, not a threejs mesh. you can’t call Box({ positon: [1, 1, 1] }) and assume that you’ll receive a mesh, you won’t. the return values of JSX are for react to interpret not for you. when you need to refer to the actual created objects you want to use useRef and useEffect.

you merge geometry same as you ever did, using

new BufferGeometryUtils().mergeBufferGeometries(geometries)

geometries refers to actual buffergeometries here.

you probably think that with react three isn’t three anymore and rules have changed but that’s not the case. it doesn’t change a single thing. you can (optionally) express some things in JSX but if three has a function that you can call in vanilla, you can call it here the same way.

invest in bruno simons threejs journey, that’s a wonderful course that leads you through all of threejs.

2 Likes
3

they’re the same. “fooBufferGeometry” is obsolete. just use “fooGeometry” these are just naming deprecations masking a harder change that happened a while ago.

1 Like
4

Thank you. I am just going to invest in Simon’s three js courses, as my knowledge of three.js is obviously lacking basics.

5

you can pair it with this right away: http://journey.pmnd.rs the upside is that this will allow you to separate study material into small self-functioning units, which makes it much easier to learn and grasp the concepts. at the same time you’ll get more comfortable with react handling graphics and gameloops.

2 Likes
6

Wow! :heart_eyes: When did that appear?

7

a while ago, but still missing many lessons. i asked bruno back then if he’s okay with that and he was. :smiley:

1 Like