CODEWITHSUNDEEP
angularthree.js
PAR
PAR

Reputation: 441

How to change AxesHelper x-y-z line width and add arrow point in Three.js

I am able create axes using AxesHelper

Achieved

Now, I want to increase the width of the axes lines and add arrow point,

I am beginner to three.js, Please help me to work.

Upvotes: 3

Views: 3659

Answers (2)

Travis
Travis

Reputation: 2018

This is a full working example of using ArrowHelper() to make what you're looking for. It uses a second canvas that's locked to the main canvas.

http://jsfiddle.net/b97zd1a3/16/

var arrowPos = new THREE.Vector3( 0,0,0 );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 1,0,0 ), arrowPos, 60, 0x7F2020, 20, 10 ) );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,1,0 ), arrowPos, 60, 0x207F20, 20, 10 ) );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,0,1 ), arrowPos, 60, 0x20207F, 20, 10 ) );

Upvotes: 5

M -
M -

Reputation: 28502

You could use 3 instances of THREE.ArrowHelper and build the axes yourself. Here's how you could do the Y-axis:

// Direction: up
var dir = new THREE.Vector3( 0, 1, 0 );
dir.normalize();
var origin = new THREE.Vector3( 0, 0, 0 );
var length = 1;
var hex = 0x00ff00;

var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper );

The only thing is that WebGL linewidths greater than 1 are not guaranteed to work, so you might want to add a cylinder if you want the stem to have some thickness.

Upvotes: 3

Related Questions