Threejs - Orbital Control - Ortho Rotatate

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin:0;
}

JavaScript

var scene = new THREE.Scene();

var width = window.innerWidth;
// don't use the full window height
// allow bottom space room for UI button
var height = window.innerHeight * .75;

// renderer and canvas size setup
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );

// perspective camera - toggle only one on
//camera = new THREE.PerspectiveCamera(45, window.innerWidth / height, 1, 10000);
//camera.position.set(0, 0, 200);

// ortho camera
camera = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 1200);


orthoOrbit = new THREE.OrbitControls(camera, renderer.domElement);
orthoOrbit.screenSpacePanning = true;
scene.add(camera);

// create the scene
createScene();
createUI();

function createUI(){
	var rotateCamBtn = document.createElement('button');
  document.body.appendChild(rotateCamBtn);
  rotateCamBtn.innerHTML = 'rotateCam90';
  rotateCamBtn.addEventListener('mousedown', () => {
  	rotateCamera90();
  });
}

function rotateCamera90(){
	var m = new THREE.Matrix4().makeRotationZ(Math.PI / 2);
  camera.up.applyMatrix4(m);
  orthoOrbit.update();
}

function createScene(){
	var axisHelper = new THREE.AxesHelper();
  scene.add(axisHelper);

  var grid = new THREE.GridHelper(fti(24), 24);
  grid.rotateX(Math.PI / 2);
  scene.add(grid);

  var vec2s = [
    new THREE.Vector2(),
    new THREE.Vector2(0,1),
    new THREE.Vector2(.5,2),
    new THREE.Vector2(1,1),
    new THREE.Vector2(1,0)
  ];
  vec2s.reverse();
  console.log(vec2s)
  

  var shape = new THREE.Shape(vec2s);
  var geo = new THREE.ShapeGeometry(shape);
  console.log(geo.vertices);
  var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color:0xff0000}));
  mesh.scale.set(30,30,30);	// scale up the mesh size
  scene.add(mesh);
}

var render = function () {
  requestAnimationFrame( render );
  renderer.render( scene, camera );
};

function fti(feet){
	return feet...