ThreeJS, Websockets, and NodeJS Client/Server Experiment

Question

I was toying with socket.io, ThreeJS, Javascript, and NodeJS to create a simple client/server using ThreeJS's graphics. I wasn't sure if all of these frameworks would even work together, but I decided to give it a shot since I've seen similar examples online before even though I cannot find a simple one to dissect or experiment with. It's mainly to experiment with, but I also wanted to make a small little concept-game as proof of what I've learned so far.

I posted my code here: https://gist.github.com/netsider/63c414d83bd806b4e7eb

Sorry if it's a little untidy, but I did my best to make it as readable as possible.

Basically, right now the server-side NodeJS script seems to run fine (Run with "node server-alpha.js"), and the client script (client-alpha.html, which you can just open in a browser) connects to the server, and displays a list of users (who are also connected). However, my intention was for each user to be able to move his/her own cube around, and right now each cube only gets added to the screen (rather than being added, subtracted, and then added again - to give the illusion of movement). If you run both pieces of code and connected one or two users and move the arrow keys a few times for each, you'll see what I'm talking about.

Can anybody help me with this? I tried several different ways to remove the cube (and remembered to call render(), after each)... but everything I tried didn't seem to work. It always resulted in the cubes just being added to the screen, and never subtracted.

I added comments in the code to make things a little easier, as I know this is quite a bit of code to go through (if it's not your own, anyway).

Thanks, any help would be greatly appreciated... as I'm really stuck trying to make the cubes just move.

Also, I'm having trouble adding the Fly-Controls (FlyControls.js - it's commented out ATM), so if someone could tell me where I went wrong I'd appreciate that a lot also.

Answer 1

Ok so you don't want to keep remaking the cubes, all you need to do is change the position.

Also in game development, it is almost a requirement to use object oriented design, a good way to go about this would be to make a player object, so..

 CPlayerList = new Array(); // an array of player objects function ClientPlayer() { this.Cube; this.Name = "unnamed"; this.Id = 0; this.Create = function(name,pos,id) { this.Name = name; this.Id = id; var cubeGeometry = new THREE.BoxGeometry(10, 10, 10); var cubeMaterial = new THREE.MeshLambertMaterial({color: 'red', transparent:false, opacity:1.0}); this.Cube = new THREE.Mesh(cubeGeometry, cubeMaterial); this.Cube.position.x = pos.x; this.Cube.position.y = pos.y; this.Cube.position.z = 20; // don't know why this is 20, remember y axis is up & down in opengl/threejs scene.add(this.Cube); } this.Move = function(vector) { this.Cube.position.set(this.Cube.position.x + vector.x, this.Cube.position.y + vector.y, 20); } } 

So on the server you need a ServerPlayer object which holds similar data, and assign ids on the server before sending them to the clients. So when you send it to the client you want to make a new ClientPlayer, call player.Create() and then push it to the CPlayerList, like so:

 function newCPlayer(data) { var newPly = new ClientPlayer(); newPly.Create(data.name,data.pos,data.id); CPlayerList.push(newPly); } 

Then when you call your movePlayer() function, you can simply loop through your players array

 function movePlayer(keyStroke, clientID) { if (keyStroke == 39) { CPlayerList.forEach(function(player,i,a) { if(player.Id === clientID) { player.Move(new THREE.Vector3(1,0,0)); } } } } 

This is just the client code, but this should help you get started, let me know if there's anything you're unclear on.

Also here's an example of a game using a similar design: http://82.199.155.77:3000/ (ctrl+shift+j in chrome to view client sources) and server code: http://pastebin.com/PRPaimG9