Gradient on Plane

by orion_prime

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(1, 1, 1);

  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);



  // axes
  scene.add(new THREE.AxesHelper(1));


  // Gradient plane
  const width = 1
  const height = 0.1
  const widthSeg = 10
  const heightSeg = 1

  let planeGeo = new THREE.PlaneBufferGeometry(width, height, widthSeg, heightSeg)


  const color = new THREE.Color()
  const colors = []
  const count = planeGeo.attributes.position.count


  for (let index = 0; index < count; index++) {
    const t = index / count

    color.setHSL(t, 1.0, 0.5);

    colors.push(color.r, color.g, color.b);

  }



  planeGeo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

  const planeMat = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: true
  })
  const gradientPlane = new THREE.Mesh(planeGeo, planeMat)
  scene.add(gradientPlane)


}

function animate() {

  requestAnimationFrame(animate);

  //controls.update();

  renderer.render(scene, camera);

}