<!doctype html>
<html>
<head>
<title>Triangle interpolation</title>
<style>
body { max-width: 100%; }
/* feel free to style the canvas any way you want. If you want it to
use the entire window, set width: 100% and height: 100%. */
canvas {
width: 80%;
height: 400px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<h1>Triangle interpolation</h1>
<p>Demo of an RGB triangle automatically interpolated by WebGL.
</p>
</body>
</html>
var scene = new THREE.Scene();
// construct geometry for a triangle with three different vertex colors
var vertexA = new THREE.Vector3(0, 0, 0);
var colorA = new THREE.Color( THREE.ColorKeywords.red );
var vertexB = new THREE.Vector3(1, 0, 0);
var colorB = new THREE.Color( THREE.ColorKeywords.lime );
var vertexC = new THREE.Vector3(0.5, 1, 0);
var colorC = new THREE.Color( THREE.ColorKeywords.blue );
var triGeom = new THREE.Geometry();
triGeom.vertices = [ vertexA, vertexB, vertexC ];
triGeom.faces = [ new THREE.Face3(0, 1, 2) ];
// set of possible colors for the vertices
triGeom.vertexColors = [ colorA, colorB, colorC ];
triGeom.computeFaceNormals();
// set particular vertexColors for the individual face
TW.computeFaceColors(triGeom);
// create a material that uses the vertex colors to compute face color
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
var mesh = new THREE.Mesh( triGeom, material );
scene.add(mesh);
// ================================================================
var renderer = new THREE.WebGLRenderer();
TW.mainInit(renderer,scene);
TW.cameraSetup(renderer,
scene,
{minx: 0, maxx: 1,
miny: 0, maxy: 1,
minz: 0, maxz: 0});
TW.viewFromFront();
This Pen doesn't use any external CSS resources.