window extremes illuminated

Green dots highlight which corners of the box are closest to the top, bottom, left and right of the window, respectively

by gpolyn

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script  src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">

    attribute float alpha;

    varying float vAlpha;

    void main() {

        vAlpha = alpha;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

        gl_PointSize = 8.0;

        gl_Position = projectionMatrix * mvPosition;

    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

    uniform vec3 color;

    varying float vAlpha;

    void main() {

        gl_FragColor = vec4( color, vAlpha );

    }

</script>

CSS

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

JavaScript

var renderer, scene, camera, controls;
	var object;
  var vertices3;
	var cloud;
	var boxToBufferAlphaMapping = {0:0,2:1,1:2,3:4,6:7,7:10,5:8,4:6}
	var lastAlphas = [];
	var canvasWidth, canvasHeight;
	var windowMatrix;
  var boundingSphere;

	init();
	render();
	afterInit();
	animate();

	function init() {

    canvasWidth = window.innerWidth;
    canvasHeight = window.innerHeight;

		// renderer
		renderer = new THREE.WebGLRenderer({antialias:true});
		renderer.setSize( canvasWidth, canvasHeight );
		document.body.appendChild( renderer.domElement );

		// scene
		scene = new THREE.Scene();
			
		// object
		var geometry = new THREE.BoxGeometry( 4, 4, 6 );
    
    // too lazy to add edges without EdgesHelper...
		var material = new THREE.MeshBasicMaterial( {transparent: true, opacity: 0} );
		var cube = new THREE.Mesh( geometry, material );
		object = cube;
    
    // bounding sphere used for orbiting control in render
    object.geometry.computeBoundingSphere();
    boundingSphere = object.geometry.boundingSphere;
    
    cube.position.set(2,2,3)
    // awkward, but couldn't transfer cube position to sphere...
    boundingSphere.translate(new THREE.Vector3(2,2,3));
    
    // save vertices for subsequent use
		vertices = cube.geometry.vertices;
    
		var edges = new THREE.EdgesHelper(cube)
		scene.add( edges );
		scene.add( cube );
    addGreenDotsToScene(geometry);
			
		// camera
		camera = new THREE.PerspectiveCamera( 17, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 20, 20, 20 );

		// controls
		controls = new THREE.OrbitControls( camera );
		controls.maxPolarAngle = 0.5 * Math.PI;  
		controls.minAzimuthAngle = 0;
		controls.maxAzimuthAngle = 0.5 * Math.PI;
    controls.enableZoom = false;
			
		// ambient
		scene.add( new THREE.AmbientLight( 0x222222 ) );
			
		// axes
		scene.add( new THREE.AxisHelper( 20 ) );
			
	}

	// determine which object points are in the most extreme top-,
  // left-, right- and bottom-most...