<div id="render" style="width:100%; height: 100%"></div>    
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);

camera.position.z = 200;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight, false );

renderer.setClearColor(0xffffff, 1);
document.getElementById('render').appendChild( renderer.domElement );

var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', function (font) {
 createText(font);
});
var text;
function createText(font) {
  container = document.createElement( 'div' );
  document.body.appendChild( container );

  var geometry = new THREE.TextGeometry( "C", {
    font: font,
    size: 100,
    height: 50,
    curveSegments: 15,
    bevelEnabled: false
  });


  geometry.computeBoundingBox();
  var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );

  var materials = [
    new THREE.MeshBasicMaterial( { color: '#ECECEE', overdraw: 0.5 } ),
    new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } )
  ];
                  var faceIndices = [ 'a', 'b', 'c'];

                var bbox = geometry.boundingBox;
                var size = new THREE.Vector3().subVectors(bbox.max, bbox.min);
                var length = geometry.faces.length;
                var face, vertex, normalized = new THREE.Vector3(), normalizedY = 0;
                var lightblue = new THREE.Color(0x77c8db), cyan = new THREE.Color(0x007dae), violet = new THREE.Color(0x622b85), yellow = new THREE.Color("yellow"), purple = new THREE.Color(0xdd0080), magenta = new THREE.Color("magenta");
                var red = new THREE.Color("red"), blue = new THREE.Color("blue");

                for ( var i = 0; i < length; i++ ) 
                {
                    face = geometry.faces[i];
                    var j = i/length;
                    for (var v = 0; v < 3; v++){
                        vertex = geometry.vertices[face[faceIndices[v]]];
                        normalizedY = normalized.subVectors(vertex, bbox.min).divide(size).y;
                        if (normalizedY < 0.35) {
                            face.vertexColors[v] = yellow.clone().lerp(purple, normalizedY);
                        }
                        else if (normalizedY >= 0.35 && normalizedY < 0.5) {
                            face.vertexColors[v] = purple.clone().lerp(violet, normalizedY);
                        }
                        else if (normalizedY >= 0.5 && normalizedY < 0.65) {
                            face.vertexColors[v] = violet.clone().lerp(cyan, normalizedY);
                        }
                        else if (normalizedY >= 0.65) {
                            face.vertexColors[v] = cyan.clone().lerp(lightblue, normalizedY);
                        }
                    }
                }
  text = new THREE.Mesh( geometry, materials );
  text.position.x = -70;
  text.position.y = -50;
  text.position.z = 0;
  scene.add(text);
}

var animate = function () {
  requestAnimationFrame( animate );
  text.rotation.y += 0.001;
  renderer.render(scene, camera);
};
animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js