How to stop Object rotation on cursor movements in y axis with Follow camera

Questions
1

Actually, I want to use follow camera so that i should follow the object. But, when I press & hold on mouse movements, the whole object along with ground is rotating in Y- axis or you can call it as the misplacing from its position.

I just want to know to stop rotating the total ground along with object in y-axis on press and hold with mouse movements

Here is the reference:

2

Do you mean stop camera following and/or object rotation while dragging (pointer pressed & moving)?

PG:

1 Like
3

I want to stop the object rotation along with ground in y axis while dragging with mouse in both top & bottom movements. But camera should follow the object when its spinning…

Actually, I want to do something like this in my code:
Reference: https://www.kodeclubs.com/
Click and drag for path direction to character

But while click & drag in my code with follow camera the object totally rotating in y - axis

4

Not sure what you want just exactly but from initial post and the first PG above, you can stop the rotation through the pointer event in a number of ways. Here’s for a very basic one:

Edit: OK, just saw the reference example and it looks like you want to lock the height. Note that this reference example is giving me a headache, but then, my opinion only.
If you want to lock the height depending on context, you have a number of options. I tend to use the lower and upper limit. Something like this:

1 Like
5

Nope, Its not working for me.

Here he my code:

Note: mesh refers to the character gltf code in below code

import { PointerEventTypes, Vector3, MeshBuilder, Axis } from "@babylonjs/core";

class Movement {
  addCharacterMovement(scene, mesh, camera) {
    camera.lockedTarget = mesh;
    camera.lockedTarget.y = 2;
    var manSpeed = 0.5;
    var manState = "Idle";
    const walkAnim = scene.getAnimationGroupByName("Walking");
    const idleAnim = scene.getAnimationGroupByName("Idle");
    const target = MeshBuilder.CreateDisc("disc", { radius: 0.2 }, scene);
    var _norot = false;
    var _lockheight = camera.heightOffset;
    target.rotate(Axis.X, Math.PI / 2);

    var pickResult;
    var pickResultPosClicked = new Vector3(0, 0, 100);
    var diffAngle;

    var forward = new Vector3(0, 0, manSpeed);


    function clickf() {
      pickResult = scene.pick(scene.pointerX, scene.pointerY);

      if (pickResult.hit) {
        target.position = new Vector3(pickResult.pickedPoint.x, 4.3, pickResult.pickedPoint.z);
        pickResultPosClicked.x = pickResult.pickedPoint.x;
        pickResultPosClicked.z = pickResult.pickedPoint.z;

        var diffX = pickResultPosClicked.x - mesh.position.x;
        var diffZ = pickResultPosClicked.z - mesh.position.z;
        diffAngle = Math.atan2(diffX, diffZ);
        mesh.rotation.y = diffAngle;

        manState = "moving";
      }
    }

    window.addEventListener("click", function () {
      clickf();
    });

    function move() {
      if (manState == "moving") {
        if (Vector3.Distance(mesh.position, pickResultPosClicked) > manSpeed * 8.63) {
          walkAnim.start(true, 1.0, walkAnim.from, walkAnim.to, false);
          mesh.translate(forward, manSpeed, 0);
        } else {
          manState = "Idle";
          idleAnim.start(true, 1.0, idleAnim.from, idleAnim.to, false);

          walkAnim.stop();
        }
      }

    }

    scene.registerBeforeRender(function () {
      if (!_norot) move();
    });

    scene.onPointerObservable.add((pointerInfo) => {
      switch (pointerInfo.type) {
        case PointerEventTypes.POINTERDOWN:
          console.log("POINTER DOWN");
          camera.lowerHeightOffsetLimit = _lockheight;
          camera.upperHeightOffsetLimit = _lockheight;
          _norot = true;
          break;
        case PointerEventTypes.POINTERUP:
          _norot = false;
          camera.heightOffset = 2;
          camera.lowerHeightOffsetLimit = 0;
          camera.upperHeightOffsetLimit = 0;
          console.log("POINTER UP");
          move();
          break;
      }
    });
  }
}

export default new Movement();

My project video reference: 500apps - Grow like the Fortune 500
Best playground similiar to my code: https://playground.babylonjs.com/#KBS9I5#29869

Its not working as reference link in above when I tried to click & drag the total PG is rotating

6

After playing Kodeclubs, i think you might want customize camera inputs?

i.e. en-/disable pointers generally or in certain cases:

camera.inputs.remove(camera.inputs.attached.pointers);
2 Likes
7

My PG is only to give you some parameters to lock the height or rotation and control the offset.
Drag is not implemented and this basic example only uses pointer down and up. As @Takemura says, at some point, you will eventually need to implement custom behavior for your pointer inputs, depending on context.

3 Likes