Вы когда-нибудь восхищались потрясающей 3D-графикой и интерактивными возможностями в Интернете и задавались вопросом, как они были созданы? Ответ кроется в Three.js, мощной библиотеке JavaScript, которая позволяет разработчикам и дизайнерам воплотить свое воображение в жизнь в браузере. В этом руководстве для начинающих мы изучим основы Three.js и узнаем, как создать интерактивную 3D-сцену с вращающимся кубом.

Почему Three.js?

Three.js — популярная библиотека, упрощающая процесс создания 3D-графики и анимации в Интернете. Он использует возможности WebGL, веб-стандарта, который позволяет выполнять аппаратно-ускоренный рендеринг 2D- и 3D-графики, обеспечивая впечатляющие визуальные эффекты. С помощью Three.js вы можете создавать потрясающие визуализации, игры, конфигураторы продуктов, виртуальные туры и многое другое в среде браузера.

Создание сцены Three.js похоже на постановку фильма: вы настраиваете среду, определяете элементы сцены, добавляете освещение и эффекты, анимируете действие и вовлекаете аудиторию в интерактивность, в результате чего получается захватывающий трехмерный опыт, который разворачивается прямо в кадре. браузер.

Начиная

Чтобы начать наше путешествие с Three.js, мы настроим нашу среду разработки. Мы включим библиотеку Three.js в наш файл HTML и создадим элемент холста для отображения нашей 3D-сцены. Кроме того, мы настроим необходимые компоненты, такие как сцена, камера и средство визуализации, чтобы все заработало.

Вот простое пошаговое руководство, которое поможет вам начать работу с Three.js:

Пример: создайте интерактивную 3D-сцену с помощью вращающегося куба!

Шаг 1: Настройте среду

Создайте новый файл HTML и включите библиотеку Three.js, добавив следующий тег сценария в раздел заголовка:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Шаг 2: Создайте сцену

В разделе body вашего HTML-файла добавьте элемент div с идентификатором, который будет служить контейнером для вашей сцены Three.js:

<div id="canvas"></div>

Шаг 3: Инициализируйте сцену

В файле JavaScript создайте новый экземпляр класса Scene и сохраните его в переменной:

const scene = new THREE.Scene();

Шаг 4: Настройте камеру

Создайте перспективную камеру и расположите ее в желаемой точке обзора:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

Шаг 5: Добавьте света

Добавьте света в сцену:

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

Шаг 6: Создайте визуализатор

Создайте объект рендерера и прикрепите его к div-контейнеру:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);

Шаг 7: Добавьте геометрию

Создайте геометрию, например куб или сферу:

const geometry = new THREE.BoxGeometry(1, 1, 1);

Шаг 8: Добавьте материал

Создайте материал для геометрии, указав его цвет и свойства:

const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

Шаг 9: Создайте сетку

Объедините геометрию и материал, чтобы создать объект-сетку:

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Шаг 10: Рендеринг сцены

Создайте функцию рендеринга для обновления и отображения сцены:

function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
render();

Шаг 11: Проверьте это

Откройте свой HTML-файл в веб-браузере, и вы должны увидеть вращающийся куб, созданный с помощью Three.js!

❗️❗️Заключая код в window.onload, он гарантирует, что код JavaScript будет выполняться только после завершения загрузки DOM, гарантируя, что div canvas будет доступен до добавления элемента DOM средства визуализации. Это всего лишь базовое введение, которое поможет вам начать работу с Three.js. По мере продвижения вы можете исследовать более продвинутые функции и создавать более сложные сцены, используя дополнительные геометрические формы, материалы, освещение и текстуры.

Это всего лишь базовое введение, которое поможет вам начать работу с Three.js. По мере продвижения вы можете исследовать более продвинутые функции и создавать более сложные сцены, используя дополнительные геометрические формы, материалы, освещение и текстуры.

Удачного кодирования!

Ссылка на GitHub: ThreeJs Repo и Demo