Skip to main content

Gist 5603752c8b3589d1a327

✓ Published0🌍 Public
Aapburnes
Last edited Apr 13, 2014
Created on Apr 2, 2015

A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the grid above, you can adjust the perspective projection interactively and place the grid anywhere you like in the scene. The grid lines are transformed using a matrix computed by solving linear equations from the four point-pairs via LU decomposition (numeric.js). D3 handles the SVG rendering and animation, with draggable corner handles and preset scene buttons (Floor, Near Wall, Far Wall, Reset) for quick placement.

AI-generated description

A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the grid above, you can adjust the perspective projection interactively and place the grid anywhere you like in the scene.

The points of the grid are transformed using a transformation matrix, which is computed by solving a series of linear equations derived from the four point-pairs using LU decomposition as implemented by numeric.js.

This technique can also be used to compute a CSS matrix3d transform to place a DOM element within a scene.