如何使用WebGL与Three.js创建带箭头的轴辅助器并放置在指定位置

我想在场景的左上角和中间位置，做出一个类似下图样式的轴辅助器。但我用THREE.AxesHelper的时候，线条不仅很细，末端还没有箭头。我目前使用的代码是这样的：

// Create and add axis helpers
const axesHelper = new THREE.AxesHelper(10); // Adjust length as needed
scene.add(axesHelper);

现在得到的输出效果是这样的：

而我想要的是类似下面这种带箭头的轴辅助器，同时还要在左上角也放置一个：

备注：内容来源于stack exchange，提问作者Itis Me