Создайте колесо объектов THREE.JS

Круги, квадраты, сферы, кубы, произвольная геометрия… мы будем использовать круги для создания карусели изображений.

Это руководство требует, чтобы вы запускали свою страницу на работающем сервере.

Вы можете создать локальный сервер самостоятельно с помощью NodeJS / Express или использовать
стороннее расширение в своем любимом текстовом редакторе.

Я использую Visual Studio Code и поэтому использую расширение Live Server; ‘Идентификатор расширения: ritwickdey.liveserver’.

Давайте начнем.

Начнем с загрузки библиотеки THREE.JS.

Вы можете найти файлы здесь:

Https://github.com/mrdoob/three.js/archive/master.zip

Все, что вам нужно, это файл three.js в папке / build.
После этого обязательно включите его в ваш "index.html"

<script src="./three.js"></script>

Пока мы настраиваем наш html, мы нормализуем нашу страницу и центрируем холст, на котором будет размещена наша карусель, с помощью небольшого количества CSS.

<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Приступим к созданию карусели.

Перво-наперво, давайте разберемся с некоторыми общими переменными, которые нам понадобятся.

const image_radius = 100;
const number_of_images = 8;
const radius = 400;
const radian_interval = (2.0 * Math.PI) / number_of_images;
const center_of_wheel = {
                            x: 0,
                            y: 0
                        }

Примечание.
1. image_radius - радиус нашего изображения, имейте в виду, что "диаметр" или ширина нашего круга будет вдвое больше
2 . number_of_images - количество изображений / объектов, которые мы хотим в нашем круге
3. radius - радиус всего нашего колеса (как мы «размечаем» ВСЕ изображения из центра)
4. radian_interval - где каждое изображение / объект попадает в наш круг; в настоящее время с шагом 45 градусов
5. center_of_wheel - геометрически (в пространстве) центр нашего круга

Давайте создадим сцену и объекты для этой сцены.

Нам понадобится 7 вещей:
сцена - это будет наш холст;
группа - так мы сможем перемещать ВСЕ изображения. / objects сразу
загрузчик - мы будем использовать его для загрузки изображения
текстуры - это будет фактически загруженное изображение < br /> материал - способ нейтрального рисования геометрии
круг - фрагмент геометрии, который мы будем использовать для наших круглых изображений.
сетка - конечный продукт, объединяющий геометрию (круг) с материалом.

После инициализации этих переменных мы создадим цикл и построим "number_of_images" количество кругов и разместим их вокруг нашей карусели.

Примечание.
Чтобы расположить нашу геометрию вокруг круга, мы используем тригонометрию. В частности, функция cosine () для координаты x и функция sine () для координаты y '.

Давайте создадим камеру для нашей сцены.

Здесь очень просто.
Просто создайте базовую камеру и убедитесь, что она повернута назад (к нам) на 1000 единиц.

// Specify the portion of the scene visible at any time (in degrees)
let fieldOfView = 75;

let aspectRatio = window.innerWidth / window.innerHeight;
let nearPlane = 0.1;
let farPlane = 1000;
let camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, 
                                          nearPlane, farPlane);
camera.position.z = 1000;

Почти готово. Время для рендерера.

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

let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// Add the canvas to the DOM       document.querySelector('body').appendChild(renderer.domElement);

Наконец, давайте визуализируем сцену и послушаем колесо мыши.

Мы просто создадим цикл анимации с помощью «requestAnimationFrame ()» и оттуда несколько раз визуализируем нашу сцену.

let scroll_speed = 0.0;
window.addEventListener('wheel', event => {
    scroll_speed = event.deltaY * (Math.PI / 180) * 0.2;
    group_cards.rotation.z += -1.0 * scroll_speed;
    for (let i = 0; i < group_cards.children.length; i++) {
        group_cards.children[i].rotation.z += scroll_speed;
    }
});
requestAnimationFrame(animate);
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

Примечание.
1. "scroll_speed" умножается на (Math.PI / 180) для преобразования в радианы.
Затем оно умножается на 0,2, чтобы замедлить движение.
2. Мы вращаем изображения, используя цикл for, в НАПРАВЛЕНИИ колеса. Это гарантирует, что наши изображения останутся в вертикальном положении. Опустите этот блок логики, чтобы понять, что я имею в виду.

Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube An Object Is A.