Estoy tratando de obtener la id de un objeto que creé en react-three-fiber . Intenté usar document.getElementById pero no tuve éxito.
Aquí está mi objeto que creé:
const createFace = () => { let face = []; let size = props.cubeArr[0].length; for (let row = 0; row < size; row++) { let rowArr = []; for (let col = 0; col < size; col++) { let position = [col - 1, size - 2 - row, 0]; rowArr[col] = ( <Cell key={`${props.side}-${row}-${col}`} id={`${props.side}-${row}-${col}`} position={position} /> ); } face[row] = <group key={`${props.side}-${row}`}>{rowArr}</group>; No incluí el resto del código three.js por razones de brevedad, pero esencialmente estoy configurando una id para cada una de mis Cells y me gustaría acceder a estas Cells 3D en función de su identificación para poder ejecutar funciones de click .
Encontré una pregunta similar aquí pero no puedo ver cómo traducirla para reaccionar
Los objetos Three.js tienen esta propiedad opcional llamada .name . Puede asignar nombres a sus mallas y luego puede acceder a ellas con .getObjectByName() . Es una alternativa limpia que lo libera del enfoque descuidado useRef de React:
// First you assign a name to the object const mesh = new THREE.Mesh(geometry, material); mesh.name = "mySpecialMesh"; // ... // Then later on you can find this object by the name you assigned const sameMesh = scene.getObjectByName("mySpecialMesh"); Supongo que podrías hacer algo similar con <Cell name="mySpecialMesh" />
Poco después de publicar esto, encontré algunas respuestas que se refieren al uso del useRef en mis grupos.
Esta implementación funciona, pero no estoy seguro de si es la forma más adecuada de hacerlo. De todos modos, a partir de ahora este método funciona.
import React, {useRef} from 'react' const Cell = (props) => { let cellRef = useRef(); const clickSurroundingCell = (e) => { e.stopPropagation() let cubeObject = cellRef.current.parent.parent.parent // get main parent to check all objects // clicking on the cell reference here let cellToClick = cubeObject.children[0].children[0].children[0] cellToClick.__r3f.handlers.onClick(event) // this executes the referenced cell onClick function } return ( <Plane onClick={clickSurroundingCell}> </Plane> ) }