Skip to content

Commit

Permalink
Merge pull request #30 from nikolas/3d
Browse files Browse the repository at this point in the history 
Add a 3d viewer
  • Loading branch information
@mcfiredrill
mcfiredrill committed Apr 1, 2015
2 parents b191738 + 6151eaf commit b2b6fa1
Show file tree
Hide file tree
Showing 7 changed files with 1,120 additions and 81 deletions.
Binary file added app/assets/images/3d.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/fortchan-funny.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
169 changes: 89 additions & 80 deletions app/assets/javascripts/application.js
View file
@@ -1,107 +1,116 @@
//= require jquery
//= require textinputs_jquery
//= require jquery-cookie/jquery.cookie
//= require three.min
//= require fort-scene

function anim_show(el) {
$(el).fadeIn();
}
(function() {
function insertEmoticon(face) {
var myText = $('#leaf_content').val();
var caretPos = $('#leaf_content').getSelection().end;

function anim_hide(el) {
$(el).fadeOut();
}

function insert_emoticon(face) {
var my_text = $('#leaf_content').val();
var caret_pos = $('#leaf_content').getSelection().end;

$('#leaf_content').val(
my_text.substring(0, caret_pos)
+ face
+ my_text.substring(caret_pos)
$('#leaf_content').val(
myText.substring(0, caretPos) +
face +
myText.substring(caretPos)
);

$('#leaf_content').setSelection(caret_pos + face.length);
}
$('#leaf_content').setSelection(caretPos + face.length);
}

/* yoinked from wakaba */
function set_stylesheet(styletitle) {
var links = document.getElementsByTagName("link");
var found = false;
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute("rel");
var title = links[i].getAttribute("title");
if(rel.indexOf("style") != -1 && title) {
links[i].disabled = true; // IE needs this to work. IE needs to die.
if (styletitle == title) {
links[i].disabled = false;
found = true;
/* yoinked from wakaba */
function setStylesheet(styletitle) {
$('#forttree-3d-content').hide();
$('#forttree-content').show();
var links = document.getElementsByTagName('link');
var found = false;
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute('rel');
var title = links[i].getAttribute('title');
if(rel.indexOf('style') != -1 && title) {
links[i].disabled = true; // IE needs this to work. IE needs to die.
if (styletitle == title) {
links[i].disabled = false;
found = true;
}
}
}
if (!found) {
setPreferredStylsheet();
}
}
if (!found) {
set_preferred_stylesheet();
}
}

function set_preferred_stylesheet() {
var links = document.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute("rel");
var title = links[i].getAttribute("title");
if (rel.indexOf("style") != -1 && title) {
links[i].disabled = (rel.indexOf("alt") != -1);
function setPreferredStylsheet() {
var links = document.getElementsByTagName('link');
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute('rel');
var title = links[i].getAttribute('title');
if (rel.indexOf('style') != -1 && title) {
links[i].disabled = (rel.indexOf('alt') != -1);
}
}
}
}

function get_preferred_stylesheet() {
var links = document.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute("rel");
var title = links[i].getAttribute("title");
if (rel.indexOf("style") != -1 && rel.indexOf("alt") == -1 && title) {
return title;
function getPreferredStylesheet() {
var links = document.getElementsByTagName('link');
for (var i=0; i<links.length; i++) {
var rel = links[i].getAttribute('rel');
var title = links[i].getAttribute('title');
if (rel.indexOf('style') != -1 && rel.indexOf('alt') == -1 && title) {
return title;
}
}
return null;
}
return null;
}

function get_active_stylesheet() {
var links=document.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var rel=links[i].getAttribute("rel");
var title=links[i].getAttribute("title");
if (rel.indexOf("style") != -1 && title && !links[i].disabled) {
return title;
function getActiveStylesheet() {
var links=document.getElementsByTagName('link');
for (var i=0; i<links.length; i++) {
var rel=links[i].getAttribute('rel');
var title=links[i].getAttribute('title');
if (rel.indexOf('style') != -1 && title && !links[i].disabled) {
return title;
}
}
}
}

window.onunload = function(e) {
var title = get_active_stylesheet();
$.cookie('style_cookie', title, 365);
}
window.onunload = function() {
var title = getActiveStylesheet();
$.cookie('style_cookie', title, 365);
};

window.onload = function(e) {
var cookie = $.cookie('style_cookie');
var title = cookie ? cookie : get_preferred_stylesheet();
set_stylesheet(title);
}
window.onload = function() {
var cookie = $.cookie('style_cookie');
var title = cookie ? cookie : getPreferredStylesheet();
setStylesheet(title);
};

$(document).ready(function() {
$(document).ready(function() {

$('.set-theme').click(function(e) {
set_stylesheet($(this).data('theme'));
return false;
});
var fortscene;
$('.set-theme').click(function() {
var theme = $(this).data('theme');
if (theme === '3d') {
var $container = $('#forttree-content-container');
if (typeof fortscene === 'undefined') {
fortscene = new FortScene($container);
}

$('.insert-emoticon').click(function(e) {
insert_emoticon($(this).data('text'));
return false;
});
fortscene.init();
} else {
setStylesheet($(this).data('theme'));
}
return false;
});

$('.insert-emoticon').click(function() {
insertEmoticon($(this).data('text'));
return false;
});

$('#smiley-helper-show').click(function(e) {
$("#smiley_helper").fadeToggle();
return false;
$('#smiley-helper-show').click(function() {
$('#smiley_helper').fadeToggle();
return false;
});
});
});
})();
183 changes: 183 additions & 0 deletions app/assets/javascripts/fort-scene.js
View file
@@ -0,0 +1,183 @@
var FortScene = function($container) {
this.$container = $container;
};

/**
* Returns true if the testUrl is on the same origin as the site.
*/
FortScene.prototype.isSameOrigin = function(testUrl) {
if (testUrl.indexOf('http') !== -1) {
// This is a naive test that catches most situations.
return testUrl.indexOf(document.domain) !== -1;
}
return true;
};

FortScene.prototype.addLighting = function(scene) {
var lights = [];
var strength = 50;
lights[0] = new THREE.PointLight(0xfbff00, 1, strength);
lights[1] = new THREE.PointLight(0xff00fa, 1, strength);
lights[2] = new THREE.PointLight(0x00feff, 1, strength);

lights[0].position.set(0, 1, 0);
lights[1].position.set(0, 0.5, 0.7);
lights[2].position.set(0, 1, -0.1);

scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);

//var light = new THREE.AmbientLight(0xffffff);
//this.scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.position.set(100, 100, 50);
scene.add(directionalLight);
};

/**
* Draw the scene / start the render loop.
*/
FortScene.prototype.draw = function($container) {
// Initialize the 3d crap.
var w = this.$container.innerWidth();
var h = $(window).innerHeight() - $('header').innerHeight() - 50;

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});

this.renderer.setSize(w, h);
$container.append(this.renderer.domElement);

var me = this;
// TODO render text
$('#branches img,#forttree-content img').each(function(k, v) {
// Add a three.js sprite for each img in the board
var url = $(v).attr('src');
if (!me.isSameOrigin(url) || url.indexOf('spinner.gif') !== -1) {
return;
}

var map = THREE.ImageUtils.loadTexture(url, {}, function() {
me.renderer.render(me.scene, me.camera);
});

var material = new THREE.SpriteMaterial({
map: map,
color: 0xffffff,
fog: true
});

var sprite = new THREE.Sprite(material);
sprite.position.set(Math.random(), Math.random(), Math.random());

me.scene.add(sprite);
});

// Draw logo
var map = THREE.ImageUtils.loadTexture('/assets/fortchan-funny.png', {}, function() {
me.renderer.render(me.scene, me.camera);
});

var material = new THREE.SpriteMaterial({
map: map,
color: 0xffffff,
fog: true
});

var sprite = new THREE.Sprite(material);
sprite.position.set(1, 1, 1);

me.scene.add(sprite);

// Draw ground
var groundGeometry = new THREE.PlaneBufferGeometry(44, 130, 0);
var ground = new THREE.Mesh(
groundGeometry,
new THREE.MeshLambertMaterial({
color: 0xd092f0
})
);
ground.position.x = -15;
ground.position.y = -0.61;
ground.rotation.x = -Math.PI / 2;
this.scene.add(ground);

// Draw ground2
var ground2Geometry = new THREE.PlaneBufferGeometry(44, 130, 0);
var ground2 = new THREE.Mesh(
ground2Geometry,
new THREE.MeshPhongMaterial({
color: 0xd0f2e0
})
);
ground2.position.x = -20;
ground2.position.y = -0.61;
ground2.position.z = -25;
this.scene.add(ground2);

this.camera.position.set(3, 1, 1);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));

this.addLighting(this.scene);

var axisHelper = new THREE.AxisHelper(50);
this.scene.add(axisHelper);

this.animate();
};

/**
* This function creates the three.js stage if it's not already there.
*/
FortScene.prototype.init = function() {
this.i = 1;
this.ascending = true;

this.$container.find('#forttree-content').hide();

var $3dContainer = this.$container.find('#forttree-3d-content');
if ($3dContainer.children().length === 0) {
this.draw($3dContainer);
}

$3dContainer.show();

var me = this;
$(window).on('resize', function() {
var w = me.$container.innerWidth();
var h = $(window).innerHeight() - $('header').innerHeight() - 50;
var $canvas = me.$container.find('canvas');
$canvas.width(w);
$canvas.height(h);
});
};

/**
* Animate the three.js scene.
*/
FortScene.prototype.animate = function() {
requestAnimationFrame(this.animate.bind(this));

var n = Math.sin(this.i / 5000);
this.camera.rotation.z -= n;
this.camera.rotation.x -= n / 2;

if (this.ascending) {
this.i = this.i + Math.sqrt(this.i) / 20;
} else {
this.i = this.i - Math.sqrt(this.i / 2) / 20;
}

if (this.i <= 1) {
this.ascending = true;
} else if (this.i >= 10) {
this.ascending = false;
}

this.renderer.render(this.scene, this.camera);
};

0 comments on commit b2b6fa1

Please sign in to comment.