Good day. I’m trying to implement the view as in the RTS. That is, so that the cursor can move the camera around the scene (by swiping to the side, the position and the target of the camera move). You can do this with the right mouse button with this camera, but it doesn’t quite work, so I’m trying to come up with
While the implementation looks like this, there are three confusing points:
I don’t understand how to smoothly move the camera, at the moment it teleports to the desired point (although this is not scary)
I can’t combine movement with rotation, my attempts can be seen in the commented out lines. For example: the focus point and position have moved, then with the mouse we rotate the scene along the axis and again try to move the focus point and camera position.
How can the conditions BABYLON.PointerEventTypes.POINTERDOWN be separated
and
BABYLON.PointerEventTypes.POINTERTAP?
When using POINTERTAP - POINTERDOWN is applied anyway, two places with the log are also commented out in the attached site, in order to understand what I mean.
I read this article several times, and unfortunately it didn’t help me, or I just don’t understand how it can be used in what I want to get. For a free camera, you can use the left / right / up / down buttons to move the camera around the scene, but I don’t know how this can be redone to do the same with the mouse held down with swipes, including the oblique swipe.
https://playground.babylonjs.com/#1VU7V5#4
it was very difficult to come up with, but I did it. I went the other way and used a rough approach. Now I can move the camera around the stage as I need !!!
The code is very crude, please help to clean it up and optimize it.
I also have a problem when I move the camera close to the edge of the earth, then after a while freezes begin, at first small, then more and more. And in the center of the earth did not notice this.
It looks like you’ve got a pretty good solution here but the one thing that I’m seeing here is that you’re moving using a picked point. While this works fine when you’re in the center, if you click on the scene where there isn’t a mesh, there will be no movement and if your cursor is no longer overtop of the mesh (green plane in this case) during a click-drag, there will be errors and movement will stop because there’s no pick data to use. Based on what I’m seeing, you’re moving the camera on the X and Z axes so you might be able to do something like:
var pointerActive = false;
...
scene.onPointerObservable.add((eventData) => {
if (eventData.type === BABYLON.PointerEventTypes.POINTERDOWN) {
pointerActive = true;
}
else if (eventData.type === BABYLON.PointerEventTypes.POINTERUP) {
pointerActive = false;
}
else if (pointerActive && eventData.type === BABYLON.PointerEventTypes.POINTERMOVE) {
let evt = eventData.event;
// Take delta of mouse movement from last event and create movement vector
// You may want to factor in some kind of speed factor into this as well
var movementVector = new BABYLON.Vector3(evt.movementX, 0, evt.movementY);
camera.position.addInPlace(movementVector);
camera.target.addInPlace(movementVector);
}
});
This might be a crude code snippet but could be another approach for camera movement.
Thank you very much, just now I tried it (there was no time to go back to the camera, I was busy with the backend), it is really much better. My version becomes problematic due to the large number of meshes in the scene, when there are many of them, the target slows down when it hits the mesh.
I reduced the scrolling speed and it became very pleasant and smooth, I also had to invert Y, but… I initially envisaged switching the camera mode (that’s why I had to make such a difficult option, simpler version broke immediately when rotating the camera) when using this version after turning the camera all messes up… Maybe there is a simple improvement to this code that will take this into account?
I’ve updated the sandbox and added a camera control button to make it clear what I mean.
Thanks in advance for the hints and help. https://playground.babylonjs.com/#1VU7V5#5
Heya, here’s a way to fix the dragging direction when the camera is turned, by rotating the movementVector about the y-axis using the camera’s starting alpha as a reference point to compute the unwinding angle. https://playground.babylonjs.com/#1VU7V5#9
