React Three Fiber中BoxBufferGeometry线宽设置实现示例

不用额外折腾复杂的three.meshlines配置，直接用@react-three/drei内置的Edges组件就能实现，全量代码无多余逻辑。

• 先安装最小依赖：
  npm install three @react-three/fiber @react-three/drei

• 核心实现代码：

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Edges } from '@react-three/drei'

function ThickLineCube() {
  return (
    <mesh rotation={[0.5, 0.5, 0]}>
      <boxGeometry args={[2, 2, 2]} />
      {/* 填充面材质，不需要填充就把opacity设为0 */}
      <meshStandardMaterial color="#f0f0f0" transparent opacity={0.3} />
      {/* 粗边线配置 */}
      <Edges 
        color="#ff4d4f" 
        linewidth={4} 
        threshold={1}
      />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas camera={{ position: [4, 3, 4] }}>
      <ambientLight intensity={1} />
      <ThickLineCube />
      <OrbitControls enableDamping />
    </Canvas>
  )
}

• 参数调整说明：
  • 修改linewidth的数值可以直接调整边线粗细，支持1-10区间的常用粗度配置
  • 不需要实体填充面时，把<meshStandardMaterial>的opacity属性设为0，就能得到纯粗线框的立方体
  • threshold参数控制边线渲染的角度阈值，设为1时会显示立方体所有棱边
  • 直接修改color属性就能改边线颜色

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