Perspective projection activity came up in Introduction to computer graphics course.
Sample implementation using PixiJS, and this is what it looks like.
<html>
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<script type="module">
const app = new PIXI.Application();
await app.init({ width: 640, height: 360 });
document.body.appendChild(app.canvas);
var cubeVertices = [
[1, 1, 1],
[1, 1, -1],
[1, -1, 1],
[1, -1, -1],
[-1, 1, 1],
[-1, 1, -1],
[-1, -1, 1],
[-1, -1, -1],
];
var cameraPostition = [2, 3, 5];
var projectedVertices = [];
cubeVertices.forEach((pos) => {
var cameraShift = [
pos[0] - cameraPostition[0],
pos[1] - cameraPostition[1],
pos[2] - cameraPostition[2],
];
projectedVertices.push([
cameraShift[0] / cameraShift[2],
cameraShift[1] / cameraShift[2],
]);
});
var scale = 200;
projectedVertices.forEach((pos) => {
let obj = new PIXI.Graphics()
.circle(pos[0] * scale, pos[1] * scale, 5)
.fill("red");
app.stage.addChild(obj);
});
</script>
</head>
<body></body>
</html>