请求将Three.js带边缘线方块代码转换为React Three Fiber实现

以下是对应原Three.js代码的R3F实现，修复了你代码中的几个问题：

import { useRef } from 'react'
import { Group, Mesh, BoxGeometry, MeshBasicMaterial, LineSegments, EdgesGeometry, LineBasicMaterial } from '@react-three/fiber'

const Block = ({ x, y, z }) => {
  // 引用立方体几何体，让边缘线复用它
  const boxRef = useRef()

  return (
    <Group position={[x, y - 10, z]}>
      {/* 实心绿色立方体 */}
      <Mesh>
        <BoxGeometry ref={boxRef} args={[5, 5, 5]} />
        <MeshBasicMaterial color="green" />
      </Mesh>

      {/* 黑色边缘线 */}
      <LineSegments>
        <EdgesGeometry args={[boxRef.current]} />
        <LineBasicMaterial color="black" />
      </LineSegments>
    </Group>
  )
}

关键修改说明： #

• 用<Group>包裹立方体和边缘线，只需要设置一次位置，和原代码中给两个对象分别设位置的效果一致，更简洁。
• 给<BoxGeometry>添加args={[5,5,5]}，对应原代码中BoxBufferGeometry(5,5,5)的尺寸设置。
• 移除wireframe属性，原Three.js代码是实心立方体，并非线框样式。
• 将<LineSegments>从<Mesh>内部移出，Three.js中Mesh和LineSegments是独立对象，不能嵌套。
• 通过useRef获取立方体几何体实例，传递给<EdgesGeometry>的args，确保边缘线基于正确的立方体几何体生成。
• 位置设置为[x, y - 10, z]，和原代码中block.position.y = this.y -10的偏移逻辑一致。

内容的提问来源于stack exchange，提问作者Deepto