Максим

{cos(угол), sin(угол)} - так получите координаты конечной точки вектора на единичной окружности относительно начала координат. Если нужен другой радиус, то умножьте координаты на радиус. Если нужно добавить смещение вектора, то добавьте к координатам смещение.

Модификаторы — это же математика в Блендере. Gltf об этом ничего не знает.
Примените все моды, чтобы вся геометрия была реальной, а не параметрической.

цифры мешают нажимать на места, а z-index изменить не получается

У SVG-элементов есть атрибут pointer-events. Работает он по той же логике, что и в CSS. Так что можно выключить интерактивность цифр, или что там еще мешает.

А "z-index" там работает по принципу "что раньше нарисовано - то ниже, что позже нарисовано - то выше". А отрисовывается все в том порядке, в котором оно в SVG-коде написано.

Не пробовал с видео, но с картинками точно работает .

Допустим так

clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);

потыкать тут

Можно просто использовать переменную в замыкании

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
     button.toggleClass('active');
  });
});

Ну или референс из события

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', event => {
     event.target.toggleClass('active');
     // Или так, если есть вложенные элементы
     // event.target.closest('.button').toggleClass('active');
  });
});

Можно слушать события клика выше в дереве, на общем родителе. Да хоть на document, как в примере.
Это называется «делегирование событий» — мы поручаем обработку событий не каждой кнопке по отдельности, а общему предку.

Из события клика сразу вытаскивать event.target – это кликнутый элемент.
Проверять, кнопка ли это вообще, и есть ли нужный класс. Т.к. ловиться будут вообще все клики в документе.

document.addEventListener('click', ({ target }) => {
  if (!target.classList.contains('button')) return; // не тот клик
  target.classList.toggle('active');
});

Object.keys(obj) возвращает массив собственных итерируемых строковых свойств. Как раз то, что хочется пересчитать в задаче.
Из названия функции "isEmpty" следует, что она возвращает Булево значение (true / false).

const isEmpty = obj => Object.keys(obj).length <= 2;

Использование:

console.log( isEmpty({ a: "AAA" }) ? 'object is empty' : 'object is full of properties' );
// выведет "object is empty"

console.log( isEmpty({ a: "AAA", b: "BB", c: "C" }) ? 'object is empty' : 'object is full of properties' );
// выведет "object is full of properties"

locomotive-scroll
ScrollMagic
scrolltrigger

В начале файла стилей видно, что вы подключаете Font Awesome Free 6.2.1. Иконка fa-forward в нее входит, а вот иконка fa-arrows-repeat-1 уже входит в Pro-версию, а не Free. Для ее использования вам нужно $99 в год.

Судя по тому, что во Flask используется шаблонизатор Jinja2, то запретить шаблонизатору экранировать отдельную переменную можно так:

<div id="content">
    {{ article.html|safe }}
</div>

Остальные тэги уберите из вопроса, они не имеют к нему никакого отношения.

Попробуйте заменить кавычки на обратные `:

$('#bombfire').html(`
<svg>...</svg>
`);

Только в обратных "бэк-тиках" можно текст разбивать на строки. Подробнее про строки и кавычки.

В обычных одинарных кавычках, как у вас, новую строку надо бы предварять обратным слешем:

const str = ' \
  line 1 \
  line 2 \
';

є декілька варіантів, сучасний це через спред оператор
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];

є більш старенький, але теж крутий
const arr4 = arr1.concat(arr2);

є ще крутий спосіб з reduce але в даному випадку він складний

в вашому випадку треба
let mass1 = ["zn1", "zn2", "zn3"];
let mass2 = [
{t1: "aa", p1: "lot"},
{t1: "ab", p1: "kot"},
{t1: "ac", p1: "mot"}
];

const newArr = mass2.map((item, idx) => {
return {...item, head: mass1[idx]}
})

Вариант с reduce() в копилку:

const zip = (arr1, arr2) => arr1.reduce(
  (acc, head, i) => (acc.push({ ...arr2[i], head }), acc),
  []
);

Использование:

zip(mass1, mass2) 
/* [
  { t1: "aa", p1: "lot", head: "zn1" },
  { t1: "ab", p1: "kot", head: "zn2" },
  { t1: "ac", p1: "mot", head: "zn3" },
] */

Конечно, map() тут больше подходит:
mass1.map((head, i) => ({ head, ...mass2[i] }))

Если массивы одинаковой длины, то можно просто через цикл

let mass1 = ["zn1", "zn2", "zn3"]
let mass2 = [
  {t1: "aa", p1: "lot"},
  {t1: "ab", p1: "kot"},
  {t1: "ac", p1: "mot"}
]

let mass3 = []

for (let i = 0; i < mass1.length; i++) {
    mass3.push(
        Object.assign(mass2[i], {head: mass1[i]})
    )
}

1 вариант

[...new Map(arr.map((item) => [item["key"], item])).values()]

2 вариант

const uniqueIds = [];
arr.filter(element => {
  const isDuplicate = uniqueIds.includes(element.key);

  if (!isDuplicate) {
    uniqueIds.push(element.key);

    return true;
  }

  return false;
});

3 вариант
https://docs-lodash.com/v4/uniq-by/

4 вариант

Object.values(
  arr.reduce( (c, e) => {
    if (!c[e.key]) c[e.key] = e;
    return c;
  }, {})
);

5 вариант

const unique = (arr, key) => {
   const keys = new Set();
   return arr.filter(el => !keys.has(el[key]) && keys.add(el[key]));
 };
unique(arr, 'key')

По каким полям нужно сравнивать, можешь допилить сам.