Javascript ThreeJS:将边几何图形应用于箭头辅助对象

我正在尝试使用ThreeJS中的ArrowHelper创建箭头：

let arrow = new THREE.ArrowHelper(direction.normalize(), new THREE.Vector3(), length, color, headLength, headWidth);

此外，我想使用一个单独的边缘颜色。我意识到我需要使用三边几何，但如何应用它我不太明白。有人能帮我吗

更新 抱歉搞混了，我以为箭头用的是金字塔，不是圆锥体。有没有办法将圆锥体替换为棱锥体，并对边缘使用不同的颜色

更新

谢谢你们的回答，他们真的很有帮助。我最终创建了自定义arrow类（从ArrowHelper复制了大部分代码）：

class CustomArrow扩展了三个.Object3D{
构造器（方向、原点、长度、颜色、边缘颜色、头长、头宽）{
超级（）；
//假设dir是标准化的
this.type='CustomArrow'；
如果（dir===未定义）dir=new-THREE.Vector3（0，0，1）；
如果（原点===未定义）原点=新的三个向量3（0，0，0）；
如果（长度===未定义）长度=1；
如果（颜色===未定义）颜色=0xffff00；
如果（头长===未定义）头长=0.2*长度；
如果（头宽===未定义）头宽=0.2*头长；
如果（此._lineGeometry==未定义）{
这个._lineGeometry=new THREE.BufferGeometry（）；
这个.u lineGeometry.setAttribute（'position'，新的三个.Float32BufferAttribute（[0,0,0,0,1,0]，3））；
这个._conegometry=新的三个.ConeBufferGeometry（0.5,1,6）；
这是计量学翻译（0，-0.5,0）；
这个。_轴=新的3.Vector3（）；
}
本.位置.副本（原件）；
this.line=new THREE.line（this._lineGeometry，new THREE.LineBasicMaterial（{color:color，toneMapped:false，linewidth:4}））；
this.line.matrixAutoUpdate=false；
this.add（this.line）
//基材
this.cone=new THREE.Mesh（this.u conegometry，new THREE.MeshBasicMaterial（{color:color，toneMapped:false}））；
this.add（this.cone）；
//线框
this.wireframe=新的三点网格（此._几何，新的三点网格基本材质（{
颜色：edgeColor，
色调映射：假，
线框：对，
线框线宽：2}）；
this.add（this.wireframe）；
这是设置方向（dir）；
此设置长度（长度、头长、头宽）；
}
设置方向（dir）{
//假设dir是标准化的
如果（y方向>0.99999）{
这个四元数集合（0,0,0,1）；
}否则如果（y方向<-0.99999）{
这个四元数集合（1,0,0,0）；
}否则{
这个.u轴集合（dir.z，0，-dir.x）.normalize（）；
常数弧度=数学acos（方向y）；
this.quaternion.setFromAxisAngle（this.\u轴，弧度）；
}
}
设置长度（长度、头长、头宽）{
如果（头长===未定义）头长=0.2*长度；
如果（头宽===未定义）头宽=0.2*头长；
this.line.scale.set（1，Math.max（0.0001，长度-头长），1）；//参见#17458
this.line.updateMatrix（）；
此.cone.scale.set（头宽、头长、头宽）；
此.cone.position.y=长度；
this.cone.updateMatrix（）；
此.wireframe.scale.set（头宽、头长、头宽）；
此.wireframe.position.y=长度；
this.wireframe.updateMatrix（）；
}
设置颜色（颜色）{
此.line.material.color.set（颜色）；
//这个。圆锥。材质。颜色。设置（颜色）；
//此.线框.材质.颜色.设置（颜色）；
}
副本（来源）{
超级副本（来源，错误）；
此.line.copy（source.line）；
此.cone.copy（source.cone）；
此.wireframe.copy（source.wireframe）；
归还这个；
}
}

---

出于某些原因，线宽和线框线宽不影响线宽。知道为什么吗？

您可以像这样更改箭头圆锥体的颜色：

正文{
溢出：隐藏；
保证金：0；
}

从“导入*为三”https://threejs.org/build/three.module.js";     
从导入{OrbitControls}”https://threejs.org/examples/jsm/controls/OrbitControls.js"; 
让场景=新的三个。场景（）；
让摄像头=新的三个透视摄像头（60，内宽/内高，
1, 100); 
摄像机位置设置（0,5,10）；
让renderer=new THREE.WebGLRenderer（）；
设置大小（innerWidth，innerHeight）；
document.body.appendChild（renderer.doElement）；
新的轨道控件（摄影机、渲染器、DomeElement）；
scene.add（新的THREE.GridHelper（））；
//不同颜色
设ah=新的三个。箭头辅助对象（
新的三个向量3（0，1，0），
新的三矢量3（-4,0,0），
5.
“洋红”/*默认颜色*/）；
啊。圆锥体。材质。颜色。套装（“红色”）；//改变圆锥体的颜色
场景。添加（啊）；
//彩色金字塔
设cg=new-THREE.SphereBufferGeometry（0.5,4,2）.toNonIndexed（）；
设pos=cg.attributes.position；
for（设i=0；i{
颜色。推送（c.r、c.g、c.b）；
颜色。推送（c.r、c.g、c.b）；
颜色。推送（c.r、c.g、c.b）；
});
}
cg.setAttribute（“color”，新的三个属性（colors，3））；
设cm=新的3.MeshBasicMaterial（{vertexColors:true}）；
设co=新的三网格（cg，cm）；
co刻度盘组（1,5,1）；
场景。添加（co）；
renderer.setAnimationLoop（（）=>{
渲染器。渲染（场景、摄影机）；
});

您可以如下更改箭头圆锥体的颜色：

正文{
溢出：隐藏；
保证金：0；
}

进口
class CustomArrow extends THREE.Object3D {

    constructor( dir, origin, length, color, edgeColor, headLength, headWidth ) {

        super();
        // dir is assumed to be normalized

        this.type = 'CustomArrow';

        if ( dir === undefined ) dir = new THREE.Vector3( 0, 0, 1 );
        if ( origin === undefined ) origin = new THREE.Vector3( 0, 0, 0 );
        if ( length === undefined ) length = 1;
        if ( color === undefined ) color = 0xffff00;
        if ( headLength === undefined ) headLength = 0.2 * length;
        if ( headWidth === undefined ) headWidth = 0.2 * headLength;

        if ( this._lineGeometry === undefined ) {
            this._lineGeometry = new THREE.BufferGeometry();
            this._lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) );
            this._coneGeometry = new THREE.ConeBufferGeometry( 0.5, 1, 6);
            this._coneGeometry.translate( 0, - 0.5, 0 );
            this._axis = new THREE.Vector3();
        }

        this.position.copy( origin );

        this.line = new THREE.Line( this._lineGeometry, new THREE.LineBasicMaterial( { color: color, toneMapped: false, linewidth: 4 } ) );
        this.line.matrixAutoUpdate = false;
        this.add( this.line )

        // base material        
        this.cone = new THREE.Mesh( this._coneGeometry, new THREE.MeshBasicMaterial( { color: color, toneMapped: false } ) );
        this.add(this.cone);

        // wire frame
        this.wireframe = new THREE.Mesh( this._coneGeometry, new THREE.MeshBasicMaterial( { 
            color: edgeColor, 
            toneMapped: false, 
            wireframe: true,
            wireframeLinewidth: 2 } ) );
        this.add(this.wireframe);

        this.setDirection( dir );
        this.setLength( length, headLength, headWidth );
    }

    setDirection( dir ) {

        // dir is assumed to be normalized

        if ( dir.y > 0.99999 ) {

            this.quaternion.set( 0, 0, 0, 1 );

        } else if ( dir.y < - 0.99999 ) {

            this.quaternion.set( 1, 0, 0, 0 );

        } else {

            this._axis.set( dir.z, 0, - dir.x ).normalize();

            const radians = Math.acos( dir.y );

            this.quaternion.setFromAxisAngle( this._axis, radians );

        }

    }

    setLength( length, headLength, headWidth ) {

        if ( headLength === undefined ) headLength = 0.2 * length;
        if ( headWidth === undefined ) headWidth = 0.2 * headLength;

        this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
        this.line.updateMatrix();
        
        this.cone.scale.set( headWidth, headLength, headWidth );
        this.cone.position.y = length;
        this.cone.updateMatrix();
        
        this.wireframe.scale.set( headWidth, headLength, headWidth );
        this.wireframe.position.y = length;
        this.wireframe.updateMatrix();
    }

    setColor( color ) {
        this.line.material.color.set( color );
        // this.cone.material.color.set( color );
        // this.wireframe.material.color.set( color );
    }

    copy( source ) {
        super.copy( source, false );
        this.line.copy( source.line );
        this.cone.copy( source.cone );
        this.wireframe.copy( source.wireframe );
        return this;
    }
}

_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );

_coneGeometry = new ConeBufferGeometry( 0.5, 1, 4);

let wireframeMaterial = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});

let coneEdgeMesh = new THREE.Mesh(_coneGeometry, wireframeMaterial);

let coneEdgeGeometry = new THREE.EdgesGeometry(arrow.cone.geometry);

let line = new THREE.LineSegments( coneEdgeGeometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
arrow.add(line);