Three.js中ArrowHelper不显示问题排查求助

我花费数小时尝试使用THREE.ArrowHelper绘制箭头，但始终无法成功显示。以下是我的代码：

function draw_an_arrow(name, from, to, color, layer) {
    let direction = to.clone().sub(from)
    let length = direction.length()
    let obj = new THREE.ArrowHelper(direction.normalize(), from, length, color)
    obj.name = name
    obj.layers.set(layer)  
    scene.add(obj)
    return obj
}

已确认name、from、to、color、layer参数格式正确，layer和scene也能正常工作。同一函数内绘制平面、圆形、线条均能正常显示。场景为2D可视化，所有对象z坐标均为0，相机采用正交模式俯视xy平面。代码与网上示例几乎一致，但箭头就是无法显示。

补充说明：函数末尾执行console.log(obj)后，输出如下截图：

核心问题：箭头锥体的材质依赖灯光 #

THREE.ArrowHelper由两部分组成：

• 线段部分：使用LineBasicMaterial，无需灯光即可显示（这也是普通线条能正常绘制的原因）
• 箭头锥体部分：默认使用MeshLambertMaterial，这种材质必须依赖场景中的灯光才能呈现颜色，如果场景未添加灯光，锥体就会显示为黑色，和背景色重合后自然无法看到。

解决方法 #

方法1：给场景添加基础灯光

如果场景允许添加灯光，直接添加方向光即可：

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 10); // 从xy平面上方照射
scene.add(light);

方法2：替换锥体材质为无灯光依赖类型

要是不想添加灯光（纯2D场景常用），手动将锥体的材质替换为MeshBasicMaterial：

function draw_an_arrow(name, from, to, color, layer) {
    let direction = to.clone().sub(from)
    let length = direction.length()
    let obj = new THREE.ArrowHelper(direction.normalize(), from, length, color)
    // 替换锥体材质，去除灯光依赖
    obj.cone.material = new THREE.MeshBasicMaterial({ color: color })
    obj.name = name
    obj.layers.set(layer)  
    scene.add(obj)
    return obj
}

其他排查方向 #

• 检查相机的near和far参数：确保z=0在相机的可视范围内（比如相机位于z=100位置，near设为1、far设为200，即可覆盖z=0区域）
• 排除遮挡问题：暂时隐藏其他物体，测试箭头是否能显示
• 调整箭头尺寸：如果length过小，锥体可能因尺寸太小难以察觉，可以在创建ArrowHelper时手动指定头部长度和宽度：

  let headLength = length * 0.3; // 头部长度设为总长度的30%
  let headWidth = headLength * 0.5;
  let obj = new THREE.ArrowHelper(direction.normalize(), from, length, color, headLength, headWidth)
  

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