React can't access another ref with this Three project

Questions
,
1

Hi,

I would like to play with multiple box and compare their position with tween.
My problem is in the line 24 in Box.js i can’t access boxesRef, why ?

Thanks for yout help

2

change line 8 from

export const Box = (props, { index, boxesRef }) => {

to

export const Box = ({ index, boxesRef, ...props }) => {

The way you had it originally, you would need to reference boxesRef like

console.log(props.boxesRef)
3

to add to what @seanwasere said, react has forwardref

const Foo = forwardRef((props, ref) => <mesh ref={ref} />)
...
const ref = useRef()
<Foo ref={ref}

you can always use groups, why messing with multiple refs when you have parent.children?

const parent = useRef()
return (
  <group ref={parent}>
    {array.map(el => <Bar parent={ref} {...el} />
...
function Bar({ parent }) {
  useEffect(() => {
    console.log(parent.current.children)

and last but absolutely not least, you should do none of this. a child that grabs into other siblings is an anti pattern, it is against separation of concern and it will continue to trip your app up.

the parent should control logic that affects children, not the individual child. i am 100% sure that a refactor will remove unwanted code and bring some clarity.

4

Hello to both of you and thank you, this solves my problem…however, I agree with @drcmda’s position.

But how to create for example:
A parent group with 10 boxes and when a child box is at the same height as another child box => create for example a console.log with the position of both children? I created my initial code like that because I didn’t know how to do it. I always created children with an index to interact with them and I don’t know how to do the opposite…

5

what you describe is essentially a state problem, like mostly everything is. i would create a provider/parent component for this that manages and tracks its children. this parent can now add/remove children at will and under whatever premise or condition.

if you try to put this logic into the child you’ll immediately notice the struggle, something won’t feel right as you’re forced to reach up and down the tree graph.

6

Is this approach better and corresponds better to what you described above?

7

In a React project that uses Three.js, you may encounter a situation where you want to access a Three.js object that is created using a different ref than the current component. One possible solution to this problem is to use React’s useImperativeHandle hook in combination with Three.js’s Object3D class.

Here is an example of how you could use this approach:

import React, { useRef, useImperativeHandle } from ‘react’;
import * as THREE from ‘three’;

const MyComponent = React.forwardRef((props, ref) => {
const otherRef = useRef();
const cubeRef = useRef();

// Create a cube and add it to the scene using the other ref
useImperativeHandle(ref, () => ({
cube: cubeRef.current,
}));

// This hook will be called once the other ref has been set
useImperativeHandle(otherRef, () => {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cubeRef.current = cube;
otherRef.current.add(cube);
});

return (

);
});