The axis of rotation needs to be fixed, not moving with every object

Questions
1

I am building a small town and I’ve managed to build one street. Now the other streets need to have a different xStart, yStart AND r. Translating seems to be working fine but when I rotate the buildings rotate separately :frowning: making a mess as you can see in my pen:

https://codepen.io/michielschukking/pen/JobYBao?editors=0010

Can you not state the rotation axis or something? Is there an easy fix?

I need the row of houses to act as one block. One object. Effectively rotating the street.

2

Read up on “Euler.order” three.js docs

And Gimbal Lock: Gimbal lock - Wikipedia

Might be related.. and fixed by doing something like
mesh.rotation.order = "YZX"
or:
mesh.rotation.order = "ZYX"

3

Just group them and then rotate the group.

https://threejs.org/docs/#Group

4

With regard to rotation order -

One option might be the rotation order I use for my flight demos - which is YXZ (I think that is the standard used in the aviation textbooks).

Y is the least important axis because heading does not affect airplane performance; X is the pitch axis and tilts the world up and down (or tilts the movement vector up and down); Z is the bank axis and rotates the entire 2D screen (or rotates the airplane around the movement vector).

Even if you are not trying to simulate an airplane, this order could be useful where you want to travel in the direction you are pointed.

I only use Euler inputs, but I think three.js may sometimes save me from things like gimbal lock by internally using quaternions.

5

I’ll try this tomorrow. Never used group before. Seems like it should work

6

Ohhh sorry I misunderstood the issue :slight_smile: yes! Group! :slight_smile:

7

And it worked: https://codepen.io/michielschukking/pen/wBgdxrL