Three. Js - How to Draw Simple Arrows

I am currently attempting to draw arrows in Three.js. In fact, I succeeded in doing so using the most commonly suggested method I could find on the internet. My code looks as follows:

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
}

The arrows that this code draws look as follows:

As you can see, the cone on the arrows is rather big and also scales with the length. This does not look nice. As such, my question: How can I make these cones smaller and not scale with length?

I am open to working with something else than THREE.ArrowHelper if that achieves better results.

1
Chloe Bennett

Chloe Bennett

Culture, Media & Entertainment Columnist

Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.

Share this article