Currently learning THREE.js and facing a bit of a newbie issue.
I have a JSON object with dynamic updates, containing data for 4 walls. The JSON structure is as follows:
{
...
walls: [{
start: {
x : 0,
y : 0,
z : 0
},
length: 1200,
rotation: 0
}, {
start: {
x : 0,
y : 0,
z : 0
},
length: 1200,
rotation: -(Math.PI/2)
}, {
start: {
x : 0,
y : 0,
z : 1200
},
length: 1200,
rotation: 0
}, {
start: {
x : 1200,
y : 0,
z : 0
},
length: 1200,
rotation: (Math.PI/2)
}],
...
}
Trying to position these walls on canvas, everything works fine when a wall has either translation or rotation, but encountering issues when both are applied.
Below is the code snippet (this._container is an instance of THREE.Mesh):
this._container.matrixAutoUpdate = false;
this._container.add(new THREE.AxisHelper(1000));
if(rotation) {
this._container.rotation.y = rotation;
this._container.updateMatrix();
}
if(translation) {
this._container.translateX((translation.x + (width/2)));
this._container.translateY((translation.y + (height/2)));
this._container.translateZ((translation.z));
this._container.updateMatrix();
}
Applying rotation first followed by translation causes the object's local axes to rotate too, resulting in incorrect translation directions (). On the other hand, applying translation first and then rotation shifts the Y axis to a different position, leading to rotation around the wrong point ().
There seem to be two potential solutions to this problem, but I'm struggling to find the right approach:
Somehow utilize a "global translation" to ensure object movements align with the scene's axis, and then implement the first method
Adjust the object's "pivot" to either the left or right edge, and then apply the second method
Would appreciate some guidance on how to tackle this challenge, or any recommended resources for further learning?