Bilinear interpolation

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>
<div id="info">
  drag the corners | rotate the scene
</div>

CSS

body {
  font-family: Monospace;
  font-weight: bold;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#info {
  position: absolute;
  color: maroon;
  width: 100%;
  text-align: center;
}

JavaScript

// nice background is just for fun

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 0, window.innerHeight);
grd.addColorStop(0, "pink");
grd.addColorStop(.5, "lightyellow");
grd.addColorStop(1, "pink");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

var texture = new THREE.CanvasTexture(canvas);

// main part
var scene = new THREE.Scene();
scene.background = texture;

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 15);
camera.lookAt(scene.position);

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

var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);

var controlPoints = []
var dragControls = new THREE.DragControls(controlPoints, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function(event) {
  orbitControls.enabled = false;
});
dragControls.addEventListener('dragend', function(event) {
  orbitControls.enabled = true;
});

var planeWidth = 15;
var planeHeight = 15;
var planeWidthSegments = 20;
var planeHeightSegments = 20;

function createControlPoint(posX, posY, color) {
  var pointGeometry = new THREE.BoxGeometry(1, 1, 1);
  var pointMaterial = new THREE.MeshBasicMaterial({
    color: color,
    transparent: true,
    opacity: .5
  });
  var controlPoint = new THREE.Mesh(pointGeometry, pointMaterial);
  controlPoint.position.set(posX, posY, 0);
  controlPoints.push(controlPoint);
  scene.add(controlPoint);
}
// create control points
createControlPoint(-planeWidth / 2, planeHeight / 2, "red");
createControlPoint(planeWidth / 2, planeHeight / 2, "green");
createControlPoint(planeWidth / 2, -planeHeight / 2, "blue");
createControlPoint(-planeWidth...