threejs 3d path builder with react
Budget: $30 – $250 USD
Note: This project is to be completed on top of an existing mini-application. Repo access will be provided.
Please see attached screenshots showing the project's current state. The project uses nextjs, zustand and @react-three/fiber.
Right now the project allows users to orbit/pan the camera, create and move points based on data in the store. When a point is clicked, its "editing" property is toggled, showing transformcontrols. We need to expand the functionality to cover, ideally in the following order:
1. A bugfix for an issue where three transformcontrols are rendered in an incorrect spot after moving a point.
2. When clicked, the image should allow the user to scale it (but not translate or rotate).
3. A straight line should be drawn, joining all points in order.
4. Add support for arcs:
- When point P3 is in editing mode and the line segment |P2 P3| is clicked, check if both P2 and P3 are on the same Z plane. If the Z is not equal, do nothing. If the Z is equal, convert that line to an arc, still between P2 and P3. Clicking the arc should return to a straight line.
- When an arc is in editing mode (which is when its "target" point is editing=true), display a new temporary point that allows the user to move the arc's center. This point should no longer be displayed when the arc isn't being edited.
- Double clicking the arc center point should toggle the arc between clockwise and counterclockwise.
- The center point of the arc must be constrained to the bisector line. It is perfectly acceptable to allow it to be dragged freely on the XY plane, and then "snapping it" to the line when the drag action is finished.
- The arc centerpoint should be saved in the store (similarly to how currently point position is saved, code for this can be copied). Arc's CW/CCW orientation should also be saved by setting "command" to G02 and G03 respectively.
- Arcs will *never* exist between points with nonequal Z. The application does not need to be prepared for this scenario.
Please reach out if you have any questions, I can provide access to the github repository if you would like to see the current application.
Please see attached screenshots showing the project's current state. The project uses nextjs, zustand and @react-three/fiber.
Right now the project allows users to orbit/pan the camera, create and move points based on data in the store. When a point is clicked, its "editing" property is toggled, showing transformcontrols. We need to expand the functionality to cover, ideally in the following order:
1. A bugfix for an issue where three transformcontrols are rendered in an incorrect spot after moving a point.
2. When clicked, the image should allow the user to scale it (but not translate or rotate).
3. A straight line should be drawn, joining all points in order.
4. Add support for arcs:
- When point P3 is in editing mode and the line segment |P2 P3| is clicked, check if both P2 and P3 are on the same Z plane. If the Z is not equal, do nothing. If the Z is equal, convert that line to an arc, still between P2 and P3. Clicking the arc should return to a straight line.
- When an arc is in editing mode (which is when its "target" point is editing=true), display a new temporary point that allows the user to move the arc's center. This point should no longer be displayed when the arc isn't being edited.
- Double clicking the arc center point should toggle the arc between clockwise and counterclockwise.
- The center point of the arc must be constrained to the bisector line. It is perfectly acceptable to allow it to be dragged freely on the XY plane, and then "snapping it" to the line when the drag action is finished.
- The arc centerpoint should be saved in the store (similarly to how currently point position is saved, code for this can be copied). Arc's CW/CCW orientation should also be saved by setting "command" to G02 and G03 respectively.
- Arcs will *never* exist between points with nonequal Z. The application does not need to be prepared for this scenario.
Please reach out if you have any questions, I can provide access to the github repository if you would like to see the current application.