Пробую периодически различные библиотеки по надобности. Сейчас понадобилась небольшая либо, чтоб накидать в изометрии что-нить простенькое на canvas. Нашёл Isomer.js, решил что-нить практическое небольшое написать.
Isomer.js позволяет в изометрии на Canvas фигуры базовые размещать. Сто лет назад уже реализовывал Снежинку Коха на канве. Решил тоже самое в 3d сделать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
const iso = new Isomer(document.getElementById("canvas")); const Shape = Isomer.Shape; const Point = Isomer.Point; const Color = Isomer.Color; const colors = [ new Color(211, 211, 211), new Color(177, 177, 177), new Color(133, 133, 133), new Color(99, 99, 99), new Color(55, 55, 55), new Color(0, 0, 0) ]; const N = 4; /*** * * @param {Point} location * @param {number} size * @param {number} n */ function draw(location, size, n) { if (n++ > N) { return; } iso.add(Shape.Prism(location, size, size, size), colors[n]); const newSize = size / 3; const newItem1 = new Point(location.x + newSize, location.y + newSize, location.z + size, newSize); const newItem2 = new Point(location.x - newSize, location.y + newSize, location.z + newSize, newSize); const newItem3 = new Point(location.x + newSize, location.y - newSize, location.z + newSize, newSize); setTimeout(() => { draw(newItem1, newSize, n); draw(newItem2, newSize, n); draw(newItem3, newSize, n); }, 1000); } function start() { iso.canvas.clear(); for (let i = 0; i < 4; ++i) { for (let j = 0; j < 4; ++j) { iso.add(Shape.Prism(new Point(i, j, 0), 1, 1, 0.001)); } } setTimeout(() => { draw(new Point(1, 1, 0.001), 2, 0); }, 1000); } start(); setInterval(start, (N + 2) * 1000); |
Для тестов только с трёх сторон создаю копии оригинала, т.к. либа не умеет в z индекс и зависит от того, в каком порядке выводишь элементы.
К примеру:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const iso = new Isomer(document.getElementById("canvas")); const Shape = Isomer.Shape; const Point = Isomer.Point; const Color = Isomer.Color; for (let i = 0; i < 4; ++i) { for (let j = 0; j < 4; ++j) { iso.add(Shape.Prism(new Point(i, j, 0), 1, 1, 0.001)); } } iso.add(Shape.Prism(new Point(2, 2, 0.001), 1, 1, 1)); iso.add(Shape.Prism(new Point(1, 2, 0.001), 1, 1, 1)); |
А такой порядок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const iso = new Isomer(document.getElementById("canvas")); const Shape = Isomer.Shape; const Point = Isomer.Point; const Color = Isomer.Color; for (let i = 0; i < 4; ++i) { for (let j = 0; j < 4; ++j) { iso.add(Shape.Prism(new Point(i, j, 0), 1, 1, 0.001)); } } iso.add(Shape.Prism(new Point(1, 2, 0.001), 1, 1, 1)); iso.add(Shape.Prism(new Point(2, 2, 0.001), 1, 1, 1)); |
