Three.js | Frontend Advent #20

Задача:

Реализовать 3D сцену с новогодней моделью и добавить функциональность масштабирования с помощью прокрутки колеса мыши.

Описание:

Вам необходимо дополнить функциональность в файле ThreeScene.tsx. Основная часть кода уже подготовлена, включая создание сцены, камеры и загрузку модели. Однако, логика масштабирования камеры отсутствует. Ваша задача — реализовать эту логику в функции onWheel.

Шаги для выполнения:

1. В файле ThreeScene.tsx уже созданы базовые элементы:

• Сцена (scene), камера (camera) и рендерер (renderer).
• Освещение: точечный свет (light) и фоновой свет (ambientLight).
• Загружена 3D модель из папки public с использованием loader.
• Добавлены обработчики событий мыши: onMouseDown, onMouseMove, onMouseUp, onMouseLeave.

2. Реализовать масштабирование камеры по оси Z в зависимости от прокрутки колеса мыши в onWheel:

• Задайте скорость в константе zoomSpeed.
• Измените позицию камеры по оси Z через формулу: event.deltaY * zoomSpeed.
• Добавьте ограничение на масштабирование.

Запуск проекта:

• npm i - установка библиотек
• npm run dev - сборка для разработки

Дополнительные материалы:

Документация: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
Видео - https://youtube.com/shorts/gMWYf2UTiPo?feature=share