<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, canvas);

var l = 10;
var geom = new THREE.PlaneBufferGeometry(15, 15);
geom.addAttribute("color", new THREE.BufferAttribute(new Float32Array([
  0, 0, 1,
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
]), 3));


var mesh = new THREE.Mesh(geom, new THREE.ShaderMaterial({
  vertexShader: `
      varying vec3 vColor;
			
			void main()	{
			
				vColor = color;
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
				
			}
  `,
  fragmentShader: `
      varying vec3 vColor;
			
			void main()	{
        vec3 c = vec3(vColor.r >= vColor.g && vColor.r >= vColor.b, vColor.g >= vColor.r && vColor.g >= vColor.b, vColor.b >=vColor.r && vColor.b >= vColor.g);
        gl_FragColor = vec4( c, 1.0 );

			}
  `,
  vertexColors: THREE.VertexColors
}));
scene.add(mesh);

var lines = new THREE.LineSegments(new THREE.WireframeGeometry(geom), new THREE.LineBasicMaterial({color: "white"}));
scene.add(lines);

render();

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.