Add EasyCam-like behavior to orbitControl() as an option#6176
Add EasyCam-like behavior to orbitControl() as an option#6176davepagurek merged 7 commits intoprocessing:mainfrom inaridarkfox4231:orbitControl_free
Conversation
Add a "free" property to options. If this property is true, the direction of rotation will always match the direction of pointer movement. I also added an explanation about it to the reference. I've added comments to the example to explain how to use this.
Implements _orbitFree(dx, dy, dRadius). The difference with _orbit() is that this _orbitFree() always rotates the camera in the direction of pointer movement.
|
Add some unit tests for _orbitFree(). Like _orbit(), it performs a matrix check and a test to see if the matrix will revert after one rotation. |
Added unit test for matrices for _orbitFree()
inaridarkfox4231
changed the title
fix -0 to 0
One rotation test
|
After that, I would like to wait for the review. |
davepagurek
left a comment
davepagurek
left a comment
There was a problem hiding this comment.
Nice work, your demo feels great! I just have some minor suggestions about the docs but otherwise this looks good to go!
src/webgl/interaction.js
Outdated
| * accidental interactions with the page while orbiting. But if you're already | ||
| * doing it via css or want the default touch actions, consider setting it to false. | ||
| * free - Boolean, default value is false. | ||
| * Setting this to true will always rotate in the direction you move the mouse or touch pointer. |
There was a problem hiding this comment.
Maybe we should mention that the default behavior rotates about the x and y axes so people know what they're comparing against
There was a problem hiding this comment.
Sure, I should explain the difference from the default case better...
How about this?
"By default, horizontal movement of the mouse or touch pointer rotates the camera around the y-axis, and vertical movement rotates the camera around the x-axis. But if setting this option to true, the camera always rotates in the direction the pointer is moving. Regarding zooming and moving, the behavior is the same regardless of true/false."
I also thought that "freeRotation" might be more appropriate than "free" since this option only affects rotation...
src/webgl/interaction.js
Outdated
| * background(200); | ||
| * | ||
| * // If you write here like orbitControl(1, 1, 1, {free: true}) | ||
| * // instead of this, the behavior will change. |
There was a problem hiding this comment.
Maybe instead of saying "the behavior will change" we can say something similar to line 33?
There was a problem hiding this comment.
I didn't explain that part enough...
How about this?
/**
* // If you execute the line commented out instead of next line, the direction of rotation
* // will be the direction the mouse or touch pointer moves, not around the X or Y axis.
* orbitControl();
* // orbitControl(1, 1, 1, {"optionName": true});
*/
|
Thank you for your review! I'll start working on it as soon as I get home! It's hard to go home because it's raining so hard... |
|
Sounds good, stay safe! |
Changed the content of the document to better show camera details. Also, since this new option is only for rotation operations, I thought "freeRotation" would be more appropriate than "free".
|
I changed the name to "freeRotation" for the time being. This means it can rotate freely in any direction. Once this is decided, it cannot be changed, so I decided to change it now. |
In proposal of #6173, it was rewritten using forEach , so I rewrite it.
|
In #6173, the corresponding part has been rewritten to the forEach syntax, so I decided to update it accordingly. |
davepagurek
left a comment
davepagurek
left a comment
There was a problem hiding this comment.
Thanks for making these changes!
|
thanks for merge! |
|
The basic implementation is now complete, but the "scaleFactor" is a little worrisome, so I might modify it... |
|
I thought about adjusting the scaleFactor, but I think it's fine as it is for now, so I decided to reconsider. The fix for orbitControl() has been completed. I think that the operability has improved a little. I hope the next version will be better. Thank you for reviewing and merging so far. Thank you very much!! |
|
In addition, the original purpose of the following issue has been achieved. 3D orbitControl allowing 360 degrees not enough: #5958 |
2 participants
Currently, the behavior of orbitControl() is similar to Three.js, vRoidHub, etc. But orbitControl() also has something like EasyCam's default behavior.
A feature of EasyCam's orbitControl() is that it always rotates in the direction of pointer movement. This is not always suitable when the top and bottom are clear, as the horizon line will be tilted, but it is useful when you simply want to see the object from various directions.
So I thought it would be nice to have such an option.
However, if the default behavior is this, it will be a destructive change, so the default will be the current behavior.
Resolves #6175
Changes:
Add a "free" property to option in orbitControl(). If this "free" is true, _orbitFree() is used instead of the traditional _orbit().
Add _orbitFree(dx, dy, dRadius) to the camera method. This differs from _orbit() in that the direction of rotation always matches the direction of pointer movement. But as for zoom, behavior is the same.
Screenshots of the change:
Demo is here: orbitControl_Free_DEMO
2023-06-01.10-27-59.mp4
PR Checklist
npm run lintpasses