search

freshfork / p5.EasyCam

A p5.js library for easy 3D camera control.
https://freshfork.github.io/p5.EasyCam
MIT License
136 stars 33 forks source link

Constrain Rotation #4

Closed joquist closed 4 years ago

joquist commented 4 years ago

The setRotationConstraint(boolean, boolean, boolean) function doesn't seem to have an effect on rotation. Is it possible to lock rotation along one or more axes (pitch/roll/yaw)?

jwdunn1 commented 4 years ago

setRotationConstraint() locks rotation to yaw, pitch, and roll respectively in the mouse or touch interface. The 'true' value should be in one and only one of the three parameter positions. See: https://editor.p5js.org/jwdunn1/sketches/7yb3CYe1n This example constrains yaw in the setup() step. You can edit the code and move the 'true' value to the second position to constrain pitch, or move it to the third position to constrain roll. Even with this programmatic control in place, you can still override the constraint by using the 'shift' key in the interface.

joquist commented 4 years ago

I see, thanks! I was setting more than one of the parameters to true.

By way of explanation, I'm trying to implement a camera above a scene with a functionality like this one, https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/ , which locks rotation (on all axes, it looks like) and locks movement to 2-dimensions, but allows the user to move the camera around the scene. It might make more sense in this case to move/rotate the objects in the scene relative to the camera, rather than moving/rotating the camera.

jwdunn1 commented 4 years ago

The mapbox camera has some really nice translational movement! (I see that the 'control' key, or right-click, allows rotation.) EasyCam does not implement this sort of translational functionality out of the box, as it was based on PeasyCam which has at its core the notion of a camera positioned on a sphere whose radius is a given distance from the look-at point. As an alternative, RoverCam is a first-person camera that might work for this type of movement. See https://github.com/freshfork/p5.RoverCam

jwdunn1 commented 4 years ago

Alternatively, you can programmatically set the look-at point in EasyCam using the method setCenter(). Here's an example sketch with fly-over motion controlled using the arrow keys: https://www.openprocessing.org/sketch/870854 (best on a desk/laptop) You can also use the built-in p5 camera and customize your own functionality.

joquist commented 4 years ago

Great example, thanks for the help!