Search code examples
javascriptthree.jsshapesfill

Three.js - Shape fill color

I have the following code which draws a yellow circle:

  var radius = 5,
    segments = 64,
    material = new THREE.LineBasicMaterial( { color: 0xF0C400 } ),
    geometry = new THREE.CircleGeometry( radius, segments );

  geometry.vertices.shift();
  var circle = new THREE.Line(geometry, material);

  circle.position.set(5,5,0);
  circle.rotation.set(1.57,0,0);
  scene.add(circle);

My only question is how do I get this circle filled with color? I tried to change the material but I still only see the outline shape..

Update: I had to change the THREE.Line to THREE.Mesh..!

Solution 
  • material = new THREE.MeshBasicMaterial( { color: 0xF0C400, side: THREE.DoubleSide } );

geometry = new THREE.CircleGeometry( radius, segments );

mesh = new THREE.Mesh( geometry, material );

    For a more general solution, see http://threejs.org/examples/canvas_geometry_shapes.html

    three.js r.66