Sometimes we want to draw web elements onto a perspective photo. There are several articles that teaches you how to do this:
These articles are from 2015 era. The examples has a lot of custom code, uses jQuery and CoffeeScript.
But it’s 2022, don’t we already have npm package for this? As it turns out, yes. The library in question is projection-3d-2d. However, this library gives you a 3x3 matrix, but we need a 4x4 matrix to use with matrix3d()
. The following code can be used to turn the resulting matrix from projection-3d-2d
into a 4x4 matrix suitable for use with matrix3d()
.
// Width and height of your element
const w = 1200
const h = 800
const points3d = [
[0, 0],
[w, 0],
[w, h],
[0, h],
]
// The target points on the photo to project onto
const points2d = [
[70, 543],
[916, 65],
[1578, 185],
[1170, 990],
]
// Calculate the matrix
const projectionCalculator = new ProjectionCalculator2d(points3d, points2d)
const m = projectionCalculator.resultMatrix
// Create the parameters for matrix3d
const matrix = [
...[m[0][0], m[1][0], 0, m[2][0]],
...[m[0][1], m[1][1], 0, m[2][1]],
...[0, 0, 1, 0],
...[m[0][2], m[1][2], 0, m[2][2]],
]
Make sure to set the transform-origin
to top left
.
See example: https://stackblitz.com/edit/vitejs-vite-ndobdk?file=src/App.svelte