Вращение 3D

04.03.2025

0%

3D-вращение — термин в некоторой степени условный. Речь идёт о возможности перемещать виртуальную камеру и рассматривать предмет с разных сторон. Что касается терминологии, рекомендуем почитать статью 360-фото, 3D-обзоры и 3D-фото: разбираемся с терминологической путаницей.

Если уж говорить о возможности рассмотреть предмет со всех сторон, то тут стоит упомянуть о 3D-обзорах компании Review3. Эта компания создаёт трёхмерные интерактивные модели товаров. Для обзора при помощи 3Dmax создаётся 3D-модель, которая объединяется с текстурами и приобретает вид товара, слабо отличимого от фотографии. Результат действительно впечатляет, однако, стоит он недёшево, и ещё неизвестно, будет ли принят заказ на вашу линейку продуктов.

Мы же поведём речь о трёхмерной съёмке при помощи фотостола и использовании полученных изображений на вашем сайте.

Итак, вам потребуется сделать несколько серий снимков предмета с разной высоты. Дело это непростое: придётся приобрести кран-штатив и следить за тем, чтобы расстояние от объектива до предмета съёмки было постоянным. Количество снимков в разных сериях должно быть одно и то же. Количество серий может быть любым, но лучше, чтобы углы съёмки внутри серии и углы при переключении серий были примерно одинаковыми.

В принципе, полученные снимки уже можно использовать так, как это описано в статьях Как добавить фото 360 на ваш сайт и Вращение 360 с использованием canvas. Однако, хотелось бы, чтобы интерактивный элемент на странице реагировал и на вертикальное перемещение указателя мыши или пальца и менял серию, а не просто последовательно переключал изображения. Предлагаемый код JavaScript реализует это.

После того, как все фотографии будут готовы, следует перенумеровать их, иначе говоря, дать им имена, содержащие номера снимков. Эти имена будут использоваться потом в HTML для вставки на страницу. HTML примера вращения в самом начале этой статьи выглядит примерно так (часть изображений удалена):

<div class="rotation" id="comp" align="center" title="Нажмите на объект и начните вращать">
    <div class="container" align="center" style="border: 1px solid lightgray">
        <div class="circular-progress">
            <span class="progress-value">0%</span>
        </div>
    </div>

    <img src="https://table-360.ru/wp-content/uploads/2025/02/комп.001.webp" style="display: none;">
    <img src="https://table-360.ru/wp-content/uploads/2025/02/комп.002.webp" style="display: none;">
    <img src="https://table-360.ru/wp-content/uploads/2025/02/комп.003.webp" style="display: none;">
...
    <img src="https://table-360.ru/wp-content/uploads/2025/02/комп.144.webp" style="display: none;">
    <canvas width="400" height="400" style="max-width: 100%; max-height: 100%"></canvas>
    <script>Rotater3D.initialize('comp')</script>
</div>

Главный элемент <div> содержит дочерний элемент <div>, все используемые изображения, canvas для отрисовки и инициализационный код.

Дочерний элемент <div> класса «container» служит для отображения прогресса во время начальной загрузки изображений; после загрузки он будет удалён. Загрузка изображений осуществляется асинхронно. Следует отметить, что загрузка занимает заметное время только при первом посещении страницы; потом изображения попадут в кэш браузера, и загрузка будет происходить очень быстро.

Если ваш сайт ещё не содержит CSS-стили для вращения, следует добавить их:

.rotation {
    touch-action: pinch-zoom;
    canvas {
        cursor: grab;
        user-select: none;
    }
}

Кроме того, нужно добавить стили для отображения прогресса:

.container{
    display: flex;
    width: 351px;
    height: 351px;
    padding: 50px 0 0 0;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 40px;
    font-weight: 600;
    color: #7d2ae8;
}
.text{
    font-size: 30px;
    font-weight: 500;
    color: #606060;
}

Управляющий код JavaScript вы можете найти тут: github. Вам только потребуется изменить в скрипте количество серий и количество снимков в каждой серии. Вот где это можно найти при добавлении JavaScript-кода на сайт WordPress:

Ну и последнее: в вышеприведённом примере все размеры рассчитаны на разрешение 400 x 400. Если ваши изображения имеют другой размер, нужно будет поменять размеры в HTML и в стилях прогресс-бара.