Frustrum Box

three.js

by steveow

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<!--- Using latest THREE.js (r70+) -->

<script src="http://threejs.org/build/three.min.js"></script>


<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>


<!--
<h1 id="title_A">Camera Frustrum Box</h1>

<input type="submit" id="byBtn" value="Switch Camera" onclick="F_change()" />


<input type="text" id="myTextField" value="camera" />
-->




<!--<div id="canvas"> </div> -->

<input type="submit" id="byBtn" value="Invert Camera2 (VP2)" onclick="F_change()" />

<input type="text" id="myTextField" value="LEFT" />

<div id="container"></div>

CSS

/*body {
    background-color: #eeeeee;
    margin: 0px;
    overflow: hidden;
}
#canvas {
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
}
*/

JavaScript

// Variables
var cameraDistance      = 500;
var cameraFOV           = 45;
var lightD              = 20;
var sphereRadius         = 20;

var SelectedCameraString = "camera" ;
var camera, camera2;
var controls, controls2;

// Scene
  var scene = new THREE.Scene();
  //scene.fog = new THREE.Fog(0x2FB3D1);

// Renderer
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor( 0x008888 ); //scene.fog.color ); 
   renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;

  document.getElementById('container').appendChild( renderer.domElement );

// Light
          /*
          var light = new THREE.DirectionalLight( 0xffffff, 1 );
          light.position.set( lightD, lightD, lightD ).normalize();
          light.castShadow = true;

          light.shadow.mapSize.width = 1024;
          light.shadow.mapSize.height = 1024;

          light.shadow.camera.left = -lightD;
          light.shadow.camera.right = lightD;
          light.shadow.camera.top = lightD;
          light.shadow.camera.bottom = -lightD;

          light.shadow.camera.far = 3*lightD;
          light.shadow.camera.near = lightD;
          light.shadow.camera.visible = true;

          scene.add( light );
          */
scene.add( new THREE.AmbientLight( 0xffffff ) );

    var light1 = new THREE.PointLight(0xffffff);
    light1.position.set(-400, 400, 400);

// camera
  camera = new THREE.PerspectiveCamera( cameraFOV, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set(0,0,cameraDistance);
  //camera.quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/2);
  scene.add(camera);
  controls = new THREE.OrbitControls(camera, renderer.domElement);


SelectedCameraString = "camera";

camera_Helper = new THREE.CameraHelper( camera );
camera_Helper.update();
scene.add(camera_Helper);


// camera2
  camera2 = new THREE.PerspectiveCamera( cameraFOV, window.innerWidth / window.innerHeight,...