extract position data for panning an object (default cube)

This topic has 11 replies, 2 voices, and was last updated 1 year, 8 months ago by scatman2513.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2022-07-25 at 12:48 pm #54380

scatman2513
Participant

Question short:
How do I receive / Where is the information stored for the positioning when panning the object with middle / right mousehold?

Question long:
I want to synchronize the movement of the object for multiple clients, so for the default cube application I receive the position.xyz of the object ‘persp1’ and pass it to other clients. This works fine except if I’m panning an object, like hold middle/right mouse-click and move the object around, then only the camera angle is going to change for the other client but not the object.

2022-07-25 at 7:14 pm #54392

kdv
Participant

Panning, zooming and rotation don’t move objects on the scene. They move the scene camera. Just disable panning and re-export your model…

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2022-07-26 at 8:44 am #54400

scatman2513
Participant

Is there a way to give the information about the panning position to other players? Panning is kind of required for my project. I thought ‘persp1’ is the scene camera.

2022-07-26 at 9:41 am #54406

kdv
Participant

If your clients have the same interface, you can read the scene camera position and pass it to the clients…

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2022-07-26 at 12:42 pm #54407

scatman2513
Participant

Thats what im trying to do right now.

First im binding the object ‘persp1’ to a variable
var obj = app.scene.getObjectByName('persp1');

On Movement i’m sending the position data (XYZ) of the scene camera to the server
var x = obj.position.x;

The server sends it to all clients and the client will use these position data for the scene camera
obj.position.x = pos.x;

Edit:
Cant attach my project because its 4.95MB as compressed archive.

Edit2:
7zip did the job. Just open the same room like i.e. http://localhost:3000/?room=test (nodeJS required)

2022-07-26 at 2:27 pm #54414
kdv
Participant
So, what’s the problem?
```
    // speichere aktuelle Position auf dem Client
    let x = obj.position.x;
    let y = obj.position.y;
    let z = obj.position.z;
    let _x = obj.rotation._x;
    let _y = obj.rotation._y;
    let _z = obj.rotation._z;
    let pressedButton = 0;
    let buttonPressed = false;

    $(document).mousedown(function(e) {
        pressedButton = e.which;
        buttonPressed = true;
    });

    $(document).mouseup(function(e) {
        buttonPressed = false;
    });

    $(document).mousemove(function(e) {
       if(!buttonPressed)
           return;
       if (pressedButton == 1) {
           if (_x !== obj.rotation._x || _y !== obj.rotation._y || _z !== obj.rotation._z) {
               // send new rotation to the server
               socket.emit('rotation', {
                 _x: obj.rotation._x, _y: obj.rotation._y, _z: obj.rotation._z
               });
           }
           _x = obj.rotation._x;
           _y = obj.rotation._y;
           _z = obj.rotation._z;
           console.log(_x, _y, _z, ' rotation');
       } else {
           if (x !== obj.position.x || y !== obj.position.y || z !== obj.position.z) {
               // send new position to the server
               socket.emit('movement', {
                 x: obj.position.x, y: obj.position.y, z: obj.position.z
               });
           }
           x = obj.position.x;
           y = obj.position.y;
           z = obj.position.z;
           console.log(x, y, z, ' position');		   
       }
    });
```
this code reads the position and rotation of the scene camera (while it rotates and moves) and writes them to the browser console…

p.s. I don’t understand why do you use the code below twice? Why do you check the mousemove event twice? The second variant works only if the middle button is down. Why?
```
          if(x !== obj.position.x || y !== obj.position.y || z !== obj.position.z){
            // send new position to the server
            socket.emit('movement', {
              x: obj.position.x, y: obj.position.y, z: obj.position.z
            });
          }
            x = obj.position.x;
            y = obj.position.y;
            z = obj.position.z;
```
Attachments:
You must be logged in to view attached files.
Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.
2022-07-26 at 3:47 pm #54419

scatman2513
Participant

@kdv77kdv

The problem is that the panning (holding middle / right mouse button and move the mouse) isnt transmitted to the other clients.

The second code block to catch the mouse button is just a temporary code block, you can ignore it. It shouldnt be relevant to the problem itself.

2022-07-26 at 4:01 pm #54420

kdv
Participant

It’s not a problem of Verge3D… Does socket.emit work as supposed to work?
You have this string in the html file
<script src="/socket.io/socket.io.js"></script>
But there is no such folder and socket cannot be initialized. and there is no . before the first slash. This script won’t be accessible even if it’s located there.
As a result you have these errors

socket.io.js is located here
<script src="./node_modules/socket.io/client-dist/socket.io.js"></script>

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2022-07-26 at 4:25 pm #54421

scatman2513
Participant

Yeah, I mean you can see that the x/y/z position of the scene camera is being transmitted without any problems. This has nothing to do with SocketIO.

I can even simulate this without sockets.io :

1. Log x/y/z position of scene camera without moving it (default position). I get the values 4.05/3.03/4.05

2. hold the middle mouse button (mouse wheel) and drag the object out of my view.

3. Log x/y/z position of scene camera. I get the values 0.64 / 2.75 / 7.67

4. Now create a puzzle and set the position of the scene camera to 0.64 / 2.75 / 7.67 after 5 seconds.

5. See the result. The Cube is still in the middle of the window and is not out of the window as it should be.

2022-07-26 at 5:09 pm #54423

kdv
Participant

scatman2513 wrote:

he Cube is still in the middle of the window and is not out of the window as it should be

That’s because the camera is still looking at the cube ))) While panning the scene camera focus also changes, but if you change only the camera position the cube will always be in the field of view…

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2022-07-26 at 5:55 pm #54425

kdv
Participant

You should also read and transmit the position of orbitTarget while panning.

https://v3d.net/9mb

You should read 9 parameters: the scene camera position/rotation and the rotation center position…

Puzzles and JS. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

2022-08-29 at 3:37 pm #55342

scatman2513
Participant

kdv wrote:

You should also read and transmit the position of orbitTarget while panning.

That solved my issue. Now its working for all movements with orbitTarget. Thanks a lot!
Author

Posts