texodus/Icon

## Icon
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/49/Three.min.js"></script>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  <script
  src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"
  integrity="sha256-sEFM2aY87nr5kcE4F+RtMBkKxBqHEc2ueHGNptOA5XI="
  crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Orbitron:900|Raleway:800" rel="stylesheet">
  <style>
  .psp_title {
    display: inline-block;
    font-size: 32px;
    color: #555;
    font-family: 'Orbitron', Helvetica;
    margin-top: 17px;
    float: left;
  }
  canvas {
    float:left;
    margin:10px;
    margin-top:4px;
    margin-right: 15px;
  }
  </style>
</head>
<body>
<div id='target'></div>
<script>

  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

window.Icon = (function() {
  function Icon() {
    this.animate = bind(this.animate, this);
    this.render = bind(this.render, this);
  }

  Icon.prototype.initialize = function() {
    var loader;
    $.fx.interval = 30;
    this.scene = new THREE.Scene;
    this.camera = new THREE.OrthographicCamera(-1000, 1000, 1000, -1000, -5000, 2000);
    this.material = new THREE.MeshLambertMaterial({
      color: 0xEFECDD
    });
    this.mesh = new THREE.Object3D;
    loader = new THREE.JSONLoader;
    loader.load('valis.json', (function(_this) {
      return function(geometry) {
        var mesh;
        mesh = new THREE.Mesh(geometry, _this.material);
        mesh.position.x = mesh.position.y = mesh.position.z = 0;
        mesh.rotation.x = mesh.rotation.y = mesh.rotation.z = 0;
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 500;
        mesh.matrixAutoUpdate = false;
        mesh.updateMatrix();
        return _this.mesh.add(mesh);
      };
    })(this));
    this.scene.add(this.mesh);
    this.directional_light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
    this.renderer = (function() {
      var canvas, ctx, e;
      try {
        canvas = document.createElement('canvas');
        ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        if (ctx) {
          return new THREE.WebGLRenderer;
        } else {
          return new THREE.CanvasRenderer;
        }
      } catch (error) {
        e = error;
        return new THREE.CanvasRenderer();
      }
    })();
    this.directional_light.position.set(1.0, 1.0, 1).normalize();
    this.scene.add(this.directional_light);
    this.scene.add(this.mesh);
    this.scene.add(this.camera);
    this.renderer.setSize(55, 55);
    document.getElementById('target').appendChild(this.renderer.domElement);
    this.mesh.rotation.x = 3.14159 / 4;
    return this.mesh.rotation.y = 3.14159 / 4;
  };

  Icon.prototype.render = function() {
    return this.renderer.render(this.scene, this.camera);
  };

  Icon.prototype.animate = function() {
    var mesh, render;
    mesh = this.mesh;
    render = this.render;
    return jQuery({
      angle_x: this.mesh.rotation.x,
      angle_y: this.mesh.rotation.y
    }).animate({
      angle_x: this.mesh.rotation.x + 3.14159,
      angle_y: this.mesh.rotation.y + 3.14158
    }, {
      duration: 4000,
      easing: "easeInOutQuad",
      complete: (function(_this) {
        return function() {
          _this.mesh.rotation.x = 3.14159 / 4;
          _this.mesh.rotation.y = 3.14159 / 4;
          return setTimeout(_this.animate, 6000);
        };
      })(this),
      step: function() {
        mesh.rotation.x = this.angle_x;
        mesh.rotation.y = this.angle_y;
        return render();
      }
    });
  };

  return Icon;

})();


var div = document.createElement('div');
div.innerHTML = "Perspective";
div.className = "psp_title"
document.getElementById('target').appendChild(div);

var x = new Icon();
x.initialize();
x.animate();

var div = document.createElement('div');
div.innerHTML = "js";
div.className = "psp_title"
document.getElementById('target').appendChild(div);
</script>

</body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/49/Three.min.js"></script>
	<script
	src="https://code.jquery.com/jquery-1.12.4.min.js"
	integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
	crossorigin="anonymous"></script>
	<script
	src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"
	integrity="sha256-sEFM2aY87nr5kcE4F+RtMBkKxBqHEc2ueHGNptOA5XI="
	crossorigin="anonymous"></script>
	<link href="https://fonts.googleapis.com/css?family=Orbitron:900\|Raleway:800" rel="stylesheet">
	<style>
	.psp_title {
	display: inline-block;
	font-size: 32px;
	color: #555;
	font-family: 'Orbitron', Helvetica;
	margin-top: 17px;
	float: left;
	}
	canvas {
	float:left;
	margin:10px;
	margin-top:4px;
	margin-right: 15px;
	}
	</style>
	</head>
	<body>
	<div id='target'></div>
	<script>

	var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

	window.Icon = (function() {
	function Icon() {
	this.animate = bind(this.animate, this);
	this.render = bind(this.render, this);
	}

	Icon.prototype.initialize = function() {
	var loader;
	$.fx.interval = 30;
	this.scene = new THREE.Scene;
	this.camera = new THREE.OrthographicCamera(-1000, 1000, 1000, -1000, -5000, 2000);
	this.material = new THREE.MeshLambertMaterial({
	color: 0xEFECDD
	});
	this.mesh = new THREE.Object3D;
	loader = new THREE.JSONLoader;
	loader.load('valis.json', (function(_this) {
	return function(geometry) {
	var mesh;
	mesh = new THREE.Mesh(geometry, _this.material);
	mesh.position.x = mesh.position.y = mesh.position.z = 0;
	mesh.rotation.x = mesh.rotation.y = mesh.rotation.z = 0;
	mesh.scale.x = mesh.scale.y = mesh.scale.z = 500;
	mesh.matrixAutoUpdate = false;
	mesh.updateMatrix();
	return _this.mesh.add(mesh);
	};
	})(this));
	this.scene.add(this.mesh);
	this.directional_light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
	this.renderer = (function() {
	var canvas, ctx, e;
	try {
	canvas = document.createElement('canvas');
	ctx = canvas.getContext('webgl') \|\| canvas.getContext('experimental-webgl');
	if (ctx) {
	return new THREE.WebGLRenderer;
	} else {
	return new THREE.CanvasRenderer;
	}
	} catch (error) {
	e = error;
	return new THREE.CanvasRenderer();
	}
	})();
	this.directional_light.position.set(1.0, 1.0, 1).normalize();
	this.scene.add(this.directional_light);
	this.scene.add(this.mesh);
	this.scene.add(this.camera);
	this.renderer.setSize(55, 55);
	document.getElementById('target').appendChild(this.renderer.domElement);
	this.mesh.rotation.x = 3.14159 / 4;
	return this.mesh.rotation.y = 3.14159 / 4;
	};

	Icon.prototype.render = function() {
	return this.renderer.render(this.scene, this.camera);
	};

	Icon.prototype.animate = function() {
	var mesh, render;
	mesh = this.mesh;
	render = this.render;
	return jQuery({
	angle_x: this.mesh.rotation.x,
	angle_y: this.mesh.rotation.y
	}).animate({
	angle_x: this.mesh.rotation.x + 3.14159,
	angle_y: this.mesh.rotation.y + 3.14158
	}, {
	duration: 4000,
	easing: "easeInOutQuad",
	complete: (function(_this) {
	return function() {
	_this.mesh.rotation.x = 3.14159 / 4;
	_this.mesh.rotation.y = 3.14159 / 4;
	return setTimeout(_this.animate, 6000);
	};
	})(this),
	step: function() {
	mesh.rotation.x = this.angle_x;
	mesh.rotation.y = this.angle_y;
	return render();
	}
	});
	};

	return Icon;

	})();


	var div = document.createElement('div');
	div.innerHTML = "Perspective";
	div.className = "psp_title"
	document.getElementById('target').appendChild(div);

	var x = new Icon();
	x.initialize();
	x.animate();

	var div = document.createElement('div');
	div.innerHTML = "js";
	div.className = "psp_title"
	document.getElementById('target').appendChild(div);
	</script>

	</body>
	</html>