I am rotating an 3D object in three.js on the X and Y axes by click dragging and using the method rotateOnAxis. After I rotate, I want to reset the axes so that when I click drag again, it's as if the axes are in their original directions.
Looks like this can be done using quaternion. I found an example showing what I want to accomplish here: https://github.com/defmech/Three.js-Object-Rotation-with-Quaternion
So, im building an architectural visualization with Three.js, and one of the things the user should be able to do is to click on things and orbit around them. The problem is that the camera is able to clip through wall. I fixed that by assigning each clickable object its own limiting azimuth and polar angles. Now the Problem is that azimuth angles go from -PI to +PI and its impossible to limit between for example 1.5, and -2.4 because its limiting the "wrong" way. I hope this graphic explains that a little better:
Heres a link to the live version:
(You control by clicking on the ground)
https://jim-fx.com/modern/
As you can see, on objects on the right side of the room the limiting works flawless, but on the cabinet and the vases the camera clips through the wall.
If anyone could help me that would be amazing. And any other tipps are welcome aswell.
Greetings, Max
There is several solution to your problem. One is to implements a kind of collision detection with some real or virtual wall for your camera, wich stops the rotation. However, I guess your are looking for something simpler to implement.
As i don't know Three.js very well, I will provides you a generic solution, but which should be easily adaptable to Three.js.
The first thing is to do not use the built-in Three.js orbit control, but to implement your own, where you control all your transformations. And, this is in fact very easy.
To create an orbitable camera, you simply have to crate:
A "null" transformable object, which mean a simple transformable entity that does not embed any shape (is not rendered, is invisible, but exists). I hope Three.js provides such elementary thing.
A camera, which should be itself another transformable.
Once you have this, you simply parent the camera to the "null" object. Now parented to the "null" object, if you rotate the "null" object, you rotate the camera with. Then to orbits, you now have to move back the camera from the parent object:
Null Camera
+ - - - - - - - - - |>
Like this, the "null" object becomes the camera "look at point", and if you rotate the "null" object around Y (I believe Three.js use Y up), you controls the camera azimuth. If you rotate the "null" object in X or Z (depending coordinate system), you will control the camera altitude. Then, you even can control the camera forward-backward to close up to the "look at point" by moving your camera in its local Z axis..
Well, you now have an orbit-camera easy to control. But your problem is not yet solved: How to make this control Pi / -Pi possible in every camera initial orientation ?
Simple: You create second "null" transform object, name it "the socle", and you parent the first one to this last one: Like this, the rotation of the camera "look at point" is always local, and you can now rotate "the socle" to give your "Orbital camera" group, an initial orientation in the world space.
In fact, it is pretty like creating virtual gimbals. I hope I was clear, with pictures this would be more easy to visualize...
I have a turn on spot animation that actually turns the player 61 degrees in maya. But when import the animation to unity and apply it to a animator controller to control a character, it turns the character 56 degrees. Why the turn angles are different?
Maya and some other 3D packages export their models with Z-axis faces upward. Standard scripts in Unity assume the Y-axis represents up in your world axis. It is better to fix the rotation in Unity than to modify the scripts to make things fit.
How do I fix the rotation of an imported model?
The same problem refers to orientation in Unity:
Rotation and Orientation in Unity
See also Euler vs Quaternion and The order of transformation in Maya.
I need to be able to change rotation pivot without changing camera lookAt on THREE.TrackballControls no mater what I tried I could not succeed. Please give me a direction to solve this problem. What I am actually trying to achieve is Revit like mouse controls.
I was able to solve this problem by creating 2 3D objects named orbit and target, then add target and camera into orbit as child objects... camera always looks at target.position, mousemove on x axis rotates the orbit object around Z axis (hence target and camera rotates around the orbit) and mousemove on y axis rotates the camera arm (camera.position vector) around cameraSideways direction.
Say I have a simple triangle as the only element/child in an Object3D class. I have a PerspectiveCamera looking at it, and I would like to have the Object3D travel down the camera's positive X axis, say, when I press a key.
How can I manipulate things so that the Object3D travels parallel along the camera's X axis? In looking at the inner workings of the PerspectiveCamera, I see members for things like matrixWorld and matrixWorldInverse but am not sure what they represent or how best to use them here.
Can I use the camera's matrixWorldInverse matrix to get the Object3D into camera coordinates, then move the object along the camera's x-axis (which I'm not sure how to find, as I don't see an entry for it in PerspectiveCamera, though I may not be seeing it) then multiply the Object3D by the 'matrixWorld' matrix again to move it back to world coordinates?
Have you tried making your object a child of your camera? Then any movement of the camera would affect your object. And if you place the camera lets say on the y-z plane of your object, then any movement of the object on its x-axis will also appear to be on the x-axis of the camera.