KVYKPY

index.html

<div ng-app='myApp' ng-controller='myCtrl'>
  <div id='gameArea'></div>
  <canvas id='canv' width='32' height='32'></canvas>
  <img id='image' style='display:none;' src='http://manassehpierce.github.io/images/tizona.png'/>
</div>

KVYKPY.markdown

KVYKPY

A Pen by Manasseh Pierce on CodePen.

License.

script.js

"use strict";
var gameArea = document.getElementById('gameArea');
var canvas = document.getElementById('canv');
var widthToHeight = 4/3;
var newWidth, newHeight, newWidthToHeight;
var scene, camera, renderer;
var img = document.getElementById('image');

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
  init();
});

function init() {
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog(0xcccccc, 0.008);
	
	camera = new THREE.PerspectiveCamera(60, widthToHeight, 0.01, 1000);
	camera.position.set(0, 3, 3);
	camera.lookAt(scene.position);
	
  img.onload = function() {
    drawCanvas();
    extendCanvas(canvas, 0.05);
  };
  
	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setClearColor(scene.fog.color);
	gameArea.appendChild(renderer.domElement);
	
	var light = new THREE.PointLight(0xdddddd, 1, 100);
	light.position.set(8, 10, 9);
	scene.add(light);
	
	resizeArea();
	window.addEventListener('resize', function(){resizeArea();}, false);
	render();
}

function resizeArea() {
	newWidth = window.innerWidth;
	newHeight = window.innerHeight;
	newWidthToHeight = newWidth / newHeight;
	if (newWidthToHeight > widthToHeight) {
		newWidth = newHeight * widthToHeight;
		gameArea.style.height = newHeight + 'px';
		gameArea.style.width = newWidth + 'px';
	} else {
		newHeight = newWidth / widthToHeight;
		gameArea.style.width = newWidth + 'px';
		gameArea.style.height = newHeight + 'px';
	}
	gameArea.style.marginTop = (-newHeight / 2) + 'px';
	gameArea.style.marginLeft = (-newWidth / 2) + 'px';
	renderer.setSize(newWidth, newHeight);
	camera.aspect = newWidth / newHeight;
	camera.updateProjectionMatrix()
}

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

function drawCanvas() {
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, img.width, img.height);
}

function extendCanvas(canvas, depth) {
  var group = new THREE.Group();
  var geo = new THREE.BoxGeometry(1/canvas.width, 1/canvas.height, depth);
  var ctx = canvas.getContext('2d');
  for(var x=0;x<canvas.width;x++) {
    for(var y=0;y<canvas.height;y++) {
      var data = ctx.getImageData(x, y, x+1, y+1).data;
      var color = "rgb("+data[0]+","+data[1]+","+data[2]+")"
      if(data[3] !== 0) {
        var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color: new THREE.Color(color), transparent: true, opacity: data[3]/255}));
        mesh.position.set(x/canvas.width, y/canvas.height, 0);
        scene.add(mesh);
      }
    }
  }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

style.css

body {margin:0;}
#gameArea {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
}