How to realign x, y, and z axis after rotating?

Questions
,
1

Hello. I am unsure how to realign the x, y, and z axes after rotating my character/model.

I added the camera as a child of the model (after async loading the model) to get the camera to stay with the model when rotating:

this.model.add(this.cam);

And then when I want to rotate the model with arrow keys, I do something like this:

    moveWalker() {
        let speed;
        if (this.pressedShift) {
            speed = 0.1;
        } else {
            speed = 0.02;
        }

        if (this.pressedLeft) {
            this.model.position.x += -(speed);
            this.model.rotation.y += 0.05;
        } else if (this.pressedRight) {
            this.model.position.x += speed;
            this.model.rotation.y -= 0.05;
        } else if (this.pressedUp) {
            this.model.position.z += -(speed);
        } else if (this.pressedDown) {
            this.model.position.z += speed;
        }
    }

But now I am unsure how to realign what the “true z” is after rotating. So for example if I rotate the model around and press the “up” key, it continues to walk in the old “up” direction. I have attached a screencast to help explain what is happening.

I am actually wondering if adding the model as a child node of the camera was a mistake. But maybe there is a way to set the new axes after rotation by getting the direction of the camera?

Any advice would be greatly appreciated! Thank you.

2

I consider it to be a conceptual error, to attach the camera to a model to see what the model is doing.

What you probably want to do is set the camera lookAt to the object, while maintaining the camera up-direction.

3

Adding the camera as a child to the model is a valid approach.

You probably have to share a working example that demonstrates the issue so it’s easier to investigate what’s going wrong.

1 Like
4

Hi @Mugen87:
Thanks for getting back to me. I just made the repository public:

Any advice is greatly appreciated!

5

Oh in an effort to help save you some trouble… I think the relevant code is in world.js

6

Oh I think I got it… I used translateZ() instead of model.position.z.

EDIT: I think I may be doing something wrong still though as the model’s shadow disappears eventually?

EDIT2: Never mind… setting light.target to the model seems to have fixed… along with some shadowCamera positioning