如何在 react-three-fiber 中获取对象的 id

Question

我正在尝试获取我在 react-three-fiber 中创建的对象的 id。我尝试使用 document.getElementById 但没有成功。

这是我创建的对象：

 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>;

为简洁起见，我没有包括 three.js 代码的其余部分，但本质上我正在为我的每个 Cells 设置一个 id，我想访问这些 3D Cells 基于他们的 ID，所以我可以运行 click 函数。

我发现了一个类似的问题 here 但看不到如何将其翻译成 react

Answer 1

发布这篇文章后不久，我发现了一些关于在我的群组中使用 useRef 挂钩的答案。

此实现有效，但不确定它是否是最合适的实现方式。不管怎样，到目前为止这个方法有效

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>
  )
}

Answer 2

Three.js 对象有这个可选的 property called .name。您可以为您的网格指定名称，然后您可以使用 .getObjectByName() 访问它们。这是一个干净的替代方案，可以让您摆脱 React 草率的 useRef 方法：

// 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");

我想你可以用 <Cell name="mySpecialMesh" />

做类似的事情

如何在 react-three-fiber 中获取对象的 id

How to get the id of an object in react-three-fiber

javascript

three.js

react-three-fiber