Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created December 8, 2014 04:51
Show Gist options
  • Save naeluh/97a81754081cb1ff30a7 to your computer and use it in GitHub Desktop.
Save naeluh/97a81754081cb1ff30a7 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">
<form id="uploadForm" enctype="multipart/form-data" action="/api" 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="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.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">
$('#uploadForm').submit(function() {
$(this).ajaxSubmit({
error: function(xhr) {
status('Error: ' + xhr.status);
},
success: function(response) {
console.log(response);
addDae('./files/new.dae');
}
});
//Very important line, it disable the page refresh.
return false;
});
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;
function addDae(path){
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(path , function (collada) {
dae = collada.scene;
skin = collada.skins[0];
dae.scale.x = dae.scale.y = dae.scale.z = 0.125;
dae.updateMatrix();
});
scene.add(dae);
}
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
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() {
requestAnimationFrame(animate);
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment