Send THREEjs instance from node.js

Questions
1

Is it possible to sendTHREEjs instance from server ?
i am using node.js with socket.io
and i want to send THREE.PerspectiveCamera

server side code:
let camera = new THREE.PerspectiveCamera( 75, 400, 0.1, 1000 );
camera.position.z = 5;
io.on(“connection”, function(socket){
console.log(camera instanceof THREE.Camera); //true
socket.emit(“camera”,camera);
});
http.listen(5000);

front side code:
socket.on(“camera”,(camera)=>{
console.log(camera instanceof THREE.Camera); // false
})

2

I have created a threejs boilerplate that is also written in TypeScript and served from NodeJS.
It demonstrates serving the threejs and orbitcontrols scripts through the included nodejs server.

Accompanying documentation is also at https://sbcode.net/threejs/threejs-typescript-boilerplate/

I have also created a video showing how to install it and what you should see.

All of this is part of my larger threejs course, so If you want more context on how I built this then there are videos showing that as well.

3

thank you for you help, but this does not solve the issue !
your demo serves static files from node.js.

4

It wont be an instance of THREE.Camera until you tell your client that it is.
It will be an instance of object.

socket.on(“camera”,(camera)=>{
console.log(typeof(camera));
console.dir(camera);
})

You will need to take the properties from your object you received from the socket, eg camera.position, frustum, etc, and manually set them on your local copy of the camera that you’ve already instantiated client side.

By the way, I also have a SocketIO in TypeScript course if your interested.
It demonstrates assigning types to incoming socket data. It still wouldn’t be an actual instance of camera, if you used typescript, but it would conform to the camera type and you could copy properties from it to an already instantiated camera.

1 Like
5

@seanwasere is there something in your boilerplate that is serializing and deserializing the three.js objects? I think that may be the part that @extremety1989 is misunderstanding — you can’t actually transfer an instance of an object between two machines directly, just a JSON representation of it. The easiest way is to call .toJSON() on the object on the server, send that to the client, and then use THREE.ObjectLoader to reconstruct the object from the JSON.

If you only need to update a few properties of an object, it would be more efficient to send only those.

1 Like
6

in my first response, I misunderstood the context of the original question.
In my second response I got it.

1 Like
7

i will try your solution, my point is that i want control camera from server side.

8

Im not sure what would be the reason for this, but you could always create a camera client-side and then just send position+rotation from the server.

9

for first person shooter game, you can hack camera to see from far enemies

10

Client side camera can always be hacked. Security by obfuscation is especially hard with dynamic languages like JS, where everyone can just check your code.

Sending new camera instances every message is not the correct solution. A better one is for the server to limit information the player receives BASED on his camera/character position/orientation (all depending on your game requirements and dedication level).

A simple example might be a situation like:

image
image1018×768 50 KB

There are 3 enemies:

  • B is outside of the player’s view range. His position should NOT be send to the player’s client.
  • C is inside of player’s view range, but the player cannot see him, because he’s sneaking up behind him. His position also should NOT be sent to the player’s client.
  • A is both in the view range, as well as view frustum. His position (and all other game data you need) SHOULD be sent to the player’s client.
3 Likes