HTML5 Application to draw a Bezier surface with 16 control points (4 x 4), and to manipulate these control points.
Requirements:
- Should enable the user to modify the x, y, z coordinates of the 16 control points forming a 4 x 4 grid of control points for the Bezier Surface. The range for coordinates of the corner points should be [-1,1]. For the middle points, the range should be [-3, 3]. The user should be able to modify these through sliders.
- Should display the Bezier 4 x 4 Surface on the screen, and this surface should change dynamically as the user modifies any of the values using sliders. Perspective View. Should display a wireframe of the surface if the Wireframe checkbox is checked.
- Should display the bounding box of dimension 2 units, centred at the origin.
- Should enable the user to modify the camera angle (degrees), from which viewing is done.
- Should enable the user to modify the u, w values of a chosen point, and should display a moving point on the surface as the user modifies these values using the sliders.
- All user input should be via sliders.
- Should use WebGL, in the form of three.js.
Tested on Chrome, Firefox and Edge, on Windows. Uses WebGL as available in three.js
Please report issues to [email protected]
Open the file index.html in your browser.
Screenshot
