In Three.js, how can I give my shapes custom edge colors? ( not just setting wireframe:true )

Question

I am making a 3d bar graph, and I would like my bars to have custom-colored edges. Anyone have any ideas? My shapes are created like this

var threeWidth = 400,
  threeHeight = 300;
var viewAngle = 45,
  aspect = threeWidth / threeHeight,
  near = 0.1,
  far = 10000;

var $chart = $('#chart');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(viewAngle, aspect, near, far);
var scene = new THREE.Scene();
scene.add(camera);

renderer.setSize(threeWidth, threeHeight);
$chart.append(renderer.domElement);

var geometry = new THREE.BoxGeometry( 10, 100, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xCC0000} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

You could create a THREE.Line for each edge. – Bob Woodley Jan 09 '15 at 15:32 — Bob Woodley, Jan 09 '15 at 15:32

score 7 · Answer 1 · answered Nov 29 '16 at 06:07

As of r81, EdgesHelper has been deprecated in favor of:

// edges geometry
var geometry = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var material = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 2 } );
var edges = new THREE.LineSegments( geometry, material );
mesh.add( edges ); // add wireframe as a child of the parent mesh

See the issue on Github

score 6 · Answer 2 · answered Feb 02 '16 at 04:25

6

This is rather old, but I just stumbled across this...

var edges = new THREE.EdgesHelper( cube, 0x0000ff);
edges.material.linewidth = 2;
scene.add(edges);

Here's a fiddle that helped me.
EdgesHelper docs are here.

answered Feb 02 '16 at 04:25

escapedcat

726
10
31

1

update jsfiddle sample for ThreeJSr85 http://jsfiddle.net/ebeit303/grr308Lx/115/ – Iam Coder Jul 21 '17 at 05:57

In Three.js, how can I give my shapes custom edge colors? ( not just setting wireframe:true )

2 Answers2