`moveWithCollisions` on Camera?

Questions
1

I’m trying to create a solution to the device orientation camera. Where you will have a on screen joystick and the y axis will move the camera in the forward direction (the way it’s looking) and the x axis of the joystick will move right and left (from the way you’re looking) I’ve got this to kind of work using camera.positon but then I run into walking through walls as physics are not taken into account.

So can someone help me with a solution to two problems? Updating the camera position with collisions and also solving the joystick issue to always move the camera along it’s local transforms. This is what I have so far:

this.scene.registerAfterRender(() => {
    ThumbArea.translateTransform = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(ThumbArea.xAddPos / 3000, 0, ThumbArea.yAddPos / 3000), BABYLON.Matrix.RotationY(scene.activeCamera.position.y));
    scene.activeCamera.position.addInPlace(ThumbArea.translateTransform);

As you can see there’s no moveWithCollisions on a camera so what would be a suggestion?

Also this is the joystick rendered on screen: https://www.babylonjs-playground.com/#6BQ3Q4#1

2

Hi I73. There’s always the down’n’dirty “proxy” method. This is where you parent the cam… to an invisible sphere (with .checkCollisions=true). Then, when joystick moves, use moveWithCollisions on the invisble sphere, and perhaps the camera will ride-along?

Or… (instead of parenting) you can set camera.position = invisisphere.position… onBeforeRenderObservable.add(here)
(in other words, constantly)

Either way, make the cam go where the invisi-sphere is located, and make the joystick do invisi-sphere.moveWithCollisions()… maybe? Just some early ideas. Stay tuned for others. :slight_smile:

Late thought: There is one other STRANGE possibility. IF you are using a freeCam with applyGravity = true… then your joystick COULD set scene.gravity X and Z values… which are normally set to zero. IN THEORY… if your joystick LEFT action… sets scene.gravity.x = -5… the camera SHOULD slide to the left. Release joystick, return scene.gravity.x to zero… camera should stop… maybe after a bit of inertia scrub-off. :slight_smile: No moveWithCollisions or proxy invisi-spheres… with this goofy idea. :slight_smile:

3

You’ll never guess what I found: https://www.babylonjs-playground.com/#KX33X8#105
lol!
I updated line 219 box.moveWithCollisions(new BABYLON.Vector3(diffX/20, 0, diffY/20)); how would you suggest to update that to continue to move it every frame and not just by the coords of the 2D texture?

4

Jesus, a few posts down and someone made it…

5

Oh man, virtualJoysticks are SO 2017! Nah, avoid virtualJoysticks. Convert to Babylon GUI… then a-ok. (my opinion). :slight_smile:

6

Thank you for all your help wing! but this is the solution: Babylon.js Playground

7

Is that solution I just posted good? I can’t use VJ because it locks the cursor click for me.

8

Oh, yeah, a GUI version of VJ. (sorry, I’m slow). :slight_smile: Yeah, that thing smokes! Good find!

I’m bookmarking that puppy.

That first URL you sent… is GUI, too. At first sight, I thought it was old virtual joysticks thing. But no… and I’m the one that coded the damned thing (105) using stolen code. Memory fail. :slight_smile:

9

Last question, I’m trying to use that script but a bunch of refrences are not to be found.

image
image.png1288×299 21.9 KB

any ideas off the top of your head? Following this: Babylon.js Playground

class makeThumbArea extends BABYLON.GUI.Ellipse {

10

Came across the same problem myself. I did this hack:

player class looks like this:

class Player{
    constructor(scene){
        this.velocity = scene.gravity;
        this.acceleration = new BABYLON.Vector3(0, 0, 0);
    }
    update(){
        this.velocity.addInPlace(this.acceleration);
        this.acceleration.scaleInPlace(0);
    }
    applyAcceleration(acceleration){
        this.acceleration.addInPlace(acceleration);
    }
}

notice how when you apply a force to the player the scenes gravity will change. this way you can use scene.gravity as the velocity variable for the player/camera. for meshes, you can make and use a separate variable as .moveWithCollisions() is available for them.