Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.ejs

Last active August 29, 2015 14:10
Show Gist options
  • Save naeluh/a8dd90bca6cadcfd604b to your computer and use it in GitHub Desktop.
Save naeluh/a8dd90bca6cadcfd604b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.ejs
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/convo.css">
</head>
<body>
<div id="container">
<div id="info">
"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br>
Press "Q" twice to toggle world/local space
</div>
<aside>
<div id="roomBox">
<a href="#" id="addroom">add room</a>
<b>ROOMS</b>
<div id="rooms"></div>
</div>
<div id="convoBox">
<div id="conversation"></div>
<div id="inputBox">
<input id="data"/>
<input type="button" id="datasend" value="send" />
</div>
</div>
</aside>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/TransformControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<script src="js/ParticleEngine.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://unkkf307dac5.naeluh.koding.io:8095');
socket.on('connect', function () {
socket.emit('adduser', prompt("What's your name?"));
socket.emit('addroom', prompt("What is the name of your room?"));
});
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>' + username + ':</b> ' + data + '<br>');
var objDiv = document.getElementById("convoBox");
objDiv.scrollTop = objDiv.scrollHeight;
console.log('scroll');
});
socket.on('updaterooms', function (rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function (key, value) {
if (value == current_room) {
$('#rooms').append('<div>' + value + '</div>');
} else {
$('#rooms').append('<div><a href="#" onclick="switchRoom(\'' + value + '\')">' + value + '</a></div>');
}
});
});
function switchRoom(room) {
socket.emit('switchRoom', room);
}
$(function () {
$('#addroom').on('click',function(e){
e.preventDefault;
socket.emit('switchRoom', prompt("What is the name of your room?"));
})
$('#datasend').on('click',function () {
var message = $('#data').val();
$('#data').val('');
socket.emit('sendchat', message);
});
$('#data').on('keypress', function (e) {
if (e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
});
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae, skin;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('./files/new.dae', function (collada) {
dae = collada.scene;
skin = collada.skins[0];
dae.scale.x = dae.scale.y = dae.scale.z = 0.125;
dae.updateMatrix();
init();
animate();
render();
});
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(2, 2, 3);
scene = new THREE.Scene();
// Grid
var size = 14,
step = 1;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({
color: 0x303030
});
for (var i = -size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(-size, -0.04, i));
geometry.vertices.push(new THREE.Vector3(size, -0.04, i));
geometry.vertices.push(new THREE.Vector3(i, -0.04, -size));
geometry.vertices.push(new THREE.Vector3(i, -0.04, size));
}
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Add the COLLADA
scene.add(dae);
particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({
color: 0xffffff
}));
scene.add(particleLight);
// Lights
scene.add(new THREE.AmbientLight(0xcccccc));
var directionalLight = new THREE.DirectionalLight( /*Math.random() * 0xffffff*/ 0xeeeeee);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
pointLight = new THREE.PointLight(0xffffff, 4);
pointLight.position = particleLight.position;
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.attach( dae );
scene.add( control );
console.log(control);
//
window.addEventListener('resize', onWindowResize, false);
window.addEventListener( 'keydown', function ( event ) {
//console.log(event.which);
switch ( event.keyCode ) {
case 81: // Q
control.setSpace( control.space == "local" ? "world" : "local" );
break;
case 87: // W
control.setMode( "translate" );
break;
case 69: // E
control.setMode( "rotate" );
break;
case 82: // R
control.setMode( "scale" );
break;
case 187:
case 107: // +,=,num+
control.setSize( control.size + 0.1 );
break;
case 189:
case 10: // -,_,num-
control.setSize( Math.max(control.size - 0.1, 0.1 ) );
break;
}
});
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
var t = 0;
var clock = new THREE.Clock();
function animate() {
var delta = clock.getDelta();
requestAnimationFrame(animate);
if (t > 1) t = 0;
if (skin) {
// guess this can be done smarter...
// (Indeed, there are way more frames than needed and interpolation is not used at all
// could be something like - one morph per each skinning pose keyframe, or even less,
// animation could be resampled, morphing interpolation handles sparse keyframes quite well.
// Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
for (var i = 0; i < skin.morphTargetInfluences.length; i++) {
skin.morphTargetInfluences[i] = 0;
}
skin.morphTargetInfluences[Math.floor(t * 30)] = 1;
t += delta;
}
//render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0005;
//camera.position.x = Math.cos(timer) * 10;
//camera.position.y = 2;
camera.position.z = 10;
camera.lookAt(scene.position);
particleLight.position.x = Math.sin(timer * 4) * 3009;
particleLight.position.y = Math.cos(timer * 5) * 4000;
particleLight.position.z = Math.cos(timer * 4) * 3009;
renderer.render(scene, camera);
control.update();
emitPos( control.position.x, control.position.y, control.position.z );
console.log(control);
//console.log(control);
}
function emitPos( x, y, z ) {
// Each Socket.IO connection has a unique session id
var sessionId = socket.socket.sessionid;
// An object to describe the circle's draw data
var data = {
x: x,
y: y,
z: z
};
// send a 'drawCircle' event with data and sessionId to the server
socket.emit( 'draw', data, sessionId );
// Lets have a look at the data we're sending
//console.log( data );
}
</script>
</body>
</html>
Raw
server.js
var express = require('express')
, app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
server.listen(8095);
app.use(express.cookieParser())
.use(express.bodyParser())
.use(express.cookieSession({
secret: "stupid"
}))
.use(express.static(__dirname + '/static'));
app.get('/', function(req, res) {
res.render('index.ejs', { email: req.session.email || null });
});
// usernames which are currently connected to the chat
var usernames = {};
// rooms which are currently available in chat
var rooms = {};
app.get('/:room', function (req, res, next) {
if (rooms[req.params.room]){
console.log('Sent');
res.render('room.ejs', { email: req.session.email || null });
} else {
console.log('Redirected');
res.redirect('/');
}
});
io.sockets.on('connection', function (socket) {
// when the client emits 'adduser', this listens and executes
socket.on('adduser', function(username){
socket.username = username;
usernames[username] = username;
});
socket.on('addroom', function(room){
socket.join(room);
socket.emit('updatechat', 'SERVER', 'you have connected to '+ room);
socket.rooms = room;
rooms[room] = room;
socket.broadcast.to(room).emit('updatechat', 'SERVER', socket.username+' has joined this room');
socket.emit('updaterooms', rooms, room);
});
// when the client emits 'sendchat', this listens and executes
socket.on('sendchat', function (data) {
// we tell the client to execute 'updatechat' with 2 parameters
io.sockets.in(socket.room).emit('updatechat', socket.username, data);
});
socket.on('switchRoom', function(newroom){
socket.leave(socket.room);
socket.join(newroom);
socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
// sent message to OLD room
socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
// update socket session room title
socket.room = newroom;
rooms[newroom] = newroom;
socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
socket.emit('updaterooms', rooms, newroom);
});
// when the user disconnects.. perform this
socket.on('disconnect', function(){
// remove the username from global usernames list
delete usernames[socket.username];
// update list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
// echo globally that this client has left
socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
socket.leave(socket.room);
});
socket.on( 'draw', function( data, session ) {
console.log( "session " + session);
socket.broadcast.emit( 'draw', data );
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment