Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created December 8, 2014 01:15
Show Gist options
  • Save naeluh/853d6204a578efadb582 to your computer and use it in GitHub Desktop.
Save naeluh/853d6204a578efadb582 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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 -->
<form id = "uploadForm" enctype = "multipart/form-data" action = "http://unkkf307dac5.naeluh.koding.io:8095/api/dae" method = "post">
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Model" name="submit">
</form>
</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 userName = null;
var socket = io.connect('http://unkkf307dac5.naeluh.koding.io:8095');
socket.on('connect', function () {
userName = prompt("What's your name?");
socket.emit('adduser', userName);
socket.emit('addroom', prompt("What is the name of your room?"));
});
console.log(userName);
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 emitting = false;
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);
camera.position.z = 10;
//camera.lookAt(scene.position);
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);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.damping = 0.2;
controls.addEventListener( 'change', render );
//
window.addEventListener('resize', onWindowResize, false);
}
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();
controls.update();
}
function render() {
var timer = Date.now() * 0.0005;
//camera.position.x = Math.cos(timer) * 10;
//camera.position.y = 2;
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);
console.log(emitting);
if(emitting){
emitPos(camera.position.x,camera.position.y,camera.position.z);
//console.log(emitting);
}else{
//console.log(emitting);
}
//socket.on('checkSession',function(whichSession){
//if(whichSession === socket.socket.sessionid){
//console.log('a');
// emitPos(camera.position.x,camera.position.y,camera.position.z);
//}else{
//}
//});
//console.log(camera.position.z);
//console.log(controls);
}
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 dataControls = {
u:userName,
x:x,
y:y,
z:z
};
// send a 'drawCircle' event with data and sessionId to the server
socket.emit( 'draw', dataControls );
socket.emit( 'session', sessionId );
// Lets have a look at the data we're sending
//console.log( data );
}
//console.log(socket.socket.username);
//window.addEventListener('mousedown',function(){
//console.log('down');
// emitting = true;
//});
window.addEventListener('mouseup',function(){
console.log('up');
emitting = true;
});
socket.on('updateControls',function(user , dataControls){
console.log('userName: '+userName);
console.log('user: '+dataControls.u);
console.log('userNull: '+(user === null));
if(user === userName){
// console.log('match: '+session);
// console.log('match: '+socket.socket.sessionid);
emitting = true;
}else{
if (user === null){
emitting = true;
}else{
emitting = false;
camera.position.x = dataControls.x;
camera.position.y = dataControls.y;
camera.position.z = dataControls.z;
}
// console.log('other: '+session);
// console.log('other: '+socket.socket.sessionid);
}
});
</script>
</body>
</html>
Raw
server.js
var express = require('express')
, multer = require('multer')
, app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
var done=false;
server.listen(8095);
app.use(express.cookieParser())
.use(express.bodyParser())
.use(express.cookieSession({
secret: "abc"
}))
.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('/');
}
});
app.use(multer({ dest: './models/',
rename: function (fieldname, filename) {
return filename+Date.now();
},
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...');
},
onFileUploadComplete: function (file) {
console.log(file.fieldname + ' uploaded to ' + file.path);
done=true;
}
}));
/*Handling routes.*/
app.post('/api/dae',function(req,res){
if(done===true){
console.log(req.files);
res.end("File uploaded.");
}
});
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( dataControls ) {
//console.log(dataControls.x);
io.sockets.in(socket.room).emit('updateControls', socket.username, dataControls);
//socket.broadcast.to(socket.room).emit('updateControls', dataControls);
//socket.broadcast.emit( 'draw', dataControls );
});
socket.on( 'session', function( whichSession ) {
//console.log(dataControls.x);
io.sockets.in(socket.room).emit('checkSession', whichSession);
//socket.broadcast.to(socket.room).emit('updateControls', dataControls);
//socket.broadcast.emit( 'draw', dataControls );
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment