THREE.Shape from color Green to Red

Question

I have created a simple circle using THREE.Shape and colored it green.

However I wish to change the color so that it goes from green (middle) to red (border).

I've been looking at an example from this site, but I can't understand how I can implement a similar way for my project.

The code creating the circle:

var arcShape = new THREE.Shape();
arcShape.absarc(100, 100, circleRadius, 0, Math.PI * 2, false);

var geometry = new THREE.ShapeGeometry(arcShape);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff11, overdraw: 0.5, side: THREE.DoubleSide });

var mesh = new THREE.Mesh(geometry, material);
mesh.position = CirclePosition;
mesh.rotation.set(Algorithms.ConvertDegreesToRadians(-90), 0, 0);

Answer 1

The example you cited isn't really relevant here. The easiest way to do it is to just use an image. If you're comfortable using a method that is only compatible with the WebGL renderer, I made a JSFiddle showing a simple example of a GLSL shader: http://jsfiddle.net/2qqdm/

The key bit is the fragment shader:

varying vec2 vUv;
varying vec3 vPosition;
uniform float radius;
void main() {
    vec3 center = vec3(100.0, 100.0, 0.0);
    float redAmount = max(0.0, min(1.0, distance(vPosition, center) / radius));
    gl_FragColor = vec4(redAmount, 1.0 - redAmount, 0.0, 1.0);
}

You could probably also do this fully in JS with vertex colors, which would be compatible with CanvasRenderer as well; you'd just need to figure out where the center vertex is.

Answer 2

Another way to do it is using vertex colors

var colorRed = new THREE.Color (0.9, 0.0, 0.0);
var colorGreen = new THREE.Color (0.0, 0.9, 0.0);

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors});

geometry = new THREE.CircleGeometry(100, 10, 0, 3);

var nmax = geometry.faces.length;
for (var n=0; n<nmax; n++) {
    geometry.faces[n].vertexColors[0] = colorRed;
    geometry.faces[n].vertexColors[1] = colorRed;
    geometry.faces[n].vertexColors[2] = colorGreen;
}