Код и инструкция для вставки 3d-модели по фото в Тильду

  1. Загружаем в https://www.meshy.ai/ фото и создаем модельку по фото или берем уже готовую 3-D модель
  2. Загружаем ее на https://github.com/ или другой хостинг способный хранить модели и выдавать на них прямые ссылки
  3. Идем в https://modelviewer.dev/, загружаем туда нашу модель и формируем сцену с нужной нам анимацией. Я, например, ограничила движение по горизонтальной оси и совсем убрала возможность движения по вертикальной оси.
  4. Идем на Тильду и вставляем вот этот код в Блок T-123
  5. В коде из modelvewer заменяем локальную ссылку на модель на ссылку из github, чтобы код работал
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Сюда вставляем код из model viewer, в нем меняем локальную ссылку на модель на ссылку из github

<script>
const model = document.getElementById('kia-cover-model');

window.addEventListener('pointerup', () => {
if (model) {
model.autoRotate = false;
setTimeout(() => {
model.autoRotate = true;
}, 10);
}
});
</script>

Как работает

Модель ниже вставлена с вышеописанной частью кода, отвечающей за вращение после опускания
Модель ниже вставлена без этого кода
Внимание: модель представленная мной для примера тяжелая и для её появления нужно немного подождать. Рекомендую вставлять максимально легкие модели, иначе это замедлит загрузку сайта в целом.
Вся это JS конструкция снизу отвечает за то, чтобы моя модель вращалась сама и продолжала вращаться после того как ее покрутят и делала это сразу, как только ее отпустили. Если вам не нужно эта функция просто удалите эту часть кода
Made on
Tilda