Dynamic 3D Rectangle

ThreeJS

by Samuel Price

HTML

<script src="https://rscedit.io/assets/client/js/core/libraries/jquery.min.js"></script>
<script src="https://rscedit.io/assets/client/js/threejs/three.min.js"></script>
<script src="https://rscedit.io/assets/client/js/threejs/Detector.js"></script>
<script src="https://rscedit.io/assets/client/js/threejs/controls/OrbitControls.js"></script>
<script src="https://rscedit.io/assets/client/js/threejs/Projector.js"></script>
<script src="https://rscedit.io/assets/client/js/threejs/dat.gui.min.js"></script>
<div class="container">
  <canvas id="main"></canvas>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  margin: 0;
}

JavaScript

var canvas = document.getElementById('main');

				var renderer = new THREE.WebGLRenderer({
				  canvas: canvas
				});

				var scene = new THREE.Scene();

			//	var camera = new THREE.OrthographicCamera(10, canvas.clientWidth / canvas.clientHeight, 1, 100000);
        
        var camera = new THREE.OrthographicCamera( canvas.clientWidth / - 20, canvas.clientWidth  / 20, canvas.clientHeight / 20, canvas.clientHeight / - 20, 1, 1000 );

				var geometry = new THREE.Geometry();

				var rayCaster = new THREE.Raycaster();

				var controls;

				var dragging = false;

				var startPosition = {
				  x: 0,
				  y: 0
				};

				var vertexSize = 0;

				onLoad();

				function onLoad() {

				  canvas.onmousedown = onMouseDown;
				  canvas.onmousemove = onDrag;
				  canvas.onmouseup = onMouseUp;

				  renderer.setSize(canvas.clientWidth, canvas.clientHeight);

				  camera.position.set(0, 20, 30);
				  scene.add(camera);

				  /*
				   * Create a Rectangle
				   */
				  geometry.vertices.push(new THREE.Vector3(-vertexSize, vertexSize, 0.0));
				  geometry.vertices.push(new THREE.Vector3(vertexSize, vertexSize, 0.0));
				  geometry.vertices.push(new THREE.Vector3(vertexSize, -vertexSize, 0.0));
				  geometry.vertices.push(new THREE.Vector3(-vertexSize, -vertexSize, 0.0));
				  geometry.faces.push(new THREE.Face3(0, 1, 2));
				  geometry.faces.push(new THREE.Face3(0, 2, 3));

				  var material = new THREE.MeshBasicMaterial({
				    color: 0xDB1E1E,
				    wireframe: true
				  });

				  var mesh = new THREE.Mesh(geometry, material);
				  mesh.rotation.x = Math.PI / 2;
				  scene.add(mesh);

				  var gridSize = 20;
				  var divisions = 20;
				  var gridHelper = new THREE.GridHelper(gridSize, divisions);
				  scene.add(gridHelper);

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

				  render();
				}

				function update(index, x, y) {
				  geometry.vertices[index].set(x, y, 0);
				  geometry.verticesNeedUpdate =...