Naloga 1: drag and drop
This commit is contained in:
parent
ff56a51b82
commit
d825f4e090
@ -7,7 +7,20 @@
|
||||
|
||||
<script defer src="script.js"></script>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0;">
|
||||
<canvas id="canvas" width="512px" height="512px"></canvas>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#drop-zone {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="drop-zone">
|
||||
<canvas id="canvas" width="512px" height="512px"></canvas>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,12 +1,21 @@
|
||||
async function main() {
|
||||
const canvas = document.getElementById("canvas");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
/**
|
||||
* @type RenderingContext
|
||||
*/
|
||||
const ctx = canvas.getContext("2d");
|
||||
const dropZone = document.getElementById("drop-zone");
|
||||
dropZone.addEventListener("dragenter", (e) => e.preventDefault());
|
||||
dropZone.addEventListener("dragover", (e) => e.preventDefault());
|
||||
dropZone.addEventListener("drop", (e) => {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("loadend", async () => {
|
||||
const data = JSON.parse(reader.result);
|
||||
await run(data);
|
||||
});
|
||||
reader.readAsText(e.dataTransfer.files[0]);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
const { models, scene } = await fetch("test.json").then(res => res.json());
|
||||
async function run({ models, scene }) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (const { model, transforms } of scene) {
|
||||
let m = Matrix.identity();
|
||||
@ -38,8 +47,6 @@ async function main() {
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
class Matrix extends Array {
|
||||
/**
|
||||
* @param {number[][]} matrix
|
||||
|
Loading…
x
Reference in New Issue
Block a user