Three.js resolution
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
<script src="https://s3.amazonaws.com/public-bucket-vzi0CDPFDE4ywJfvfylfpnDW/OrbitControls.js"></script>
<div id="animation"
style="width: 1024px; height: 768px; ">
</div>
<script>
$(function(){
// Generated by CoffeeScript 1.4.0
(function() {
var AnimController, MockAnimController,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
AnimController = (function() {
function AnimController(element_name) {
this.element_name = element_name;
this.update_scene = false;
}
AnimController.prototype.load_frame = function(frame, callback) {
var _this = this;
if (callback == null) {
callback = function(data) {
return null;
};
}
return $.getJSON("/frame", {
"frame": frame
}, function(data) {
_this.curr_event = data;
return callback(data);
});
};
AnimController.prototype.display_frame = function(frame) {
var _this = this;
return this.load_frame(frame, function(data) {
_this.update_scene = true;
return _this.render();
});
};
AnimController.prototype.set_up_scene = function() {
var controls, el, renderer,
_this = this;
this.scene = new THREE.Scene();
el = $(this.element_name);
this.camera = new THREE.PerspectiveCamera(45, el.width() / el.height(), 1, 20000);
this.camera.position.set(100, 100, 0);
this.scene.add(new THREE.AmbientLight(0x111111));
this.renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(el.width(),...
CSS
canvas { width:100%; height: width:100% }