如何在React Three Fiber中增大LineBasicMaterial的线条宽度？

Three.js的LineBasicMaterial的linewidth参数在WebGL渲染器环境下几乎不支持大于1的值——这是WebGL底层的限制，和React Three Fiber无关。想要实现加厚的几何体边缘，有以下几种可行方案：

方案1：使用Line2（支持宽线条） #

Three.js的Line2扩展专门解决了WebGL线条宽度受限的问题，在React Three Fiber中可以这样实现：

import { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'
import { Line2, LineGeometry, LineMaterial } from 'three/addons/lines/Line2.js'
import * as THREE from 'three'

const ThickSquareEdges = ({ geometry }) => {
  const meshRef = useRef()
  const lineMatRef = useRef()

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01
    }
  })

  // 创建基于边缘的LineGeometry
  const lineGeo = new LineGeometry().setFromEdgesGeometry(new THREE.EdgesGeometry(geometry))
  // 创建支持宽线条的LineMaterial
  lineMatRef.current = new LineMaterial({
    color: 0xffffff,
    linewidth: 5, // 可设置任意宽度
    dashed: false
  })
  lineMatRef.current.resolution.set(window.innerWidth, window.innerHeight)

  // 监听窗口大小变化，更新分辨率避免线条变形
  useEffect(() => {
    const handleResize = () => {
      lineMatRef.current.resolution.set(window.innerWidth, window.innerHeight)
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <primitive object={new Line2(lineGeo, lineMatRef.current)} ref={meshRef} position={[0, 0, 0]} />
  )
}

方案2：用Mesh模拟边框 #

如果不想依赖扩展，可以将边缘线段拉伸成有厚度的网格，适合简单几何体：

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js'

const ThickMeshEdges = ({ geometry, thickness = 0.1 }) => {
  const meshRef = useRef()

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y += 0.01
    }
  })

  const edgesGeo = new THREE.EdgesGeometry(geometry)
  const shapeList = []
  // 遍历每条边缘线段，生成带厚度的拉伸几何体
  for (let i = 0; i < edgesGeo.attributes.position.count; i += 2) {
    const start = new THREE.Vector3().fromBufferAttribute(edgesGeo.attributes.position, i)
    const end = new THREE.Vector3().fromBufferAttribute(edgesGeo.attributes.position, i + 1)
    const path = new THREE.Path()
    path.moveTo(start.x, start.y, start.z)
    path.lineTo(end.x, end.y, end.z)

    // 定义拉伸的截面（矩形）
    const sectionShape = new THREE.Shape()
    const halfThick = thickness / 2
    sectionShape.moveTo(-halfThick, -halfThick)
    sectionShape.lineTo(halfThick, -halfThick)
    sectionShape.lineTo(halfThick, halfThick)
    sectionShape.lineTo(-halfThick, halfThick)
    sectionShape.closePath()

    const extrudeGeo = new THREE.ExtrudeGeometry(sectionShape, {
      steps: 1,
      extrudePath: path,
      bevelEnabled: false
    })
    shapeList.push(extrudeGeo)
  }

  // 合并所有几何体，减少绘制调用
  const mergedGeo = BufferGeometryUtils.mergeGeometries(shapeList)
  const mat = new THREE.MeshBasicMaterial({ color: 0xffffff })

  return (
    <mesh ref={meshRef} geometry={mergedGeo} material={mat} position={[0, 0, 0]} />
  )
}

方案3：使用OutlineEffect（整体外边框） #

如果只需给整个几何体加外边框，可直接使用Three.js的OutlineEffect：

import { Canvas } from '@react-three/fiber'
import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js'
import * as THREE from 'three'

function App() {
  return (
    <Canvas gl={{ antialias: true }}>
      {/* 你的目标几何体 */}
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color="#ff4444" />
      </mesh>
      {/* 添加外边框效果 */}
      <effects>
        <OutlineEffect
          edgeStrength={3}
          edgeGlow={0.3}
          edgeThickness={2}
          color={0xffffff}
        />
      </effects>
    </Canvas>
  )
}

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