Просматривая Интернет, вы, безусловно, будете натыкаться на все больше и больше сайтов, которые предлагают 3D-элементы, иногда даже позволяя пользователю взаимодействовать с указанными элементами (возможно, в виде видеоигры…). Вопреки тому, что вы могли подумать, это не видео, а 3D-элементы в вашем браузере! Но как это вообще возможно?

Ответ заключается в том, что это не волшебство (ну, вроде как), и что большинство этих сайтов используют библиотеку JavaScript, созданную в 2010 году разработчиком Рикардо Кабелло, известную как Three.js! (Три.js GitHub)

Примеры веб-сайтов, использующих Three.js

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

Из множества отображаемых веб-сайтов, вот те, которые привлекли мое внимание:

Последний пример с ванильным кодом JavaScript сбоку, чтобы лучше понять, что происходит за кулисами: Plane Flying Over Trees Code Pen (GitHub)

Как видите, Three.Js позволяет создавать очень уникальные интерактивные и визуальные эффекты, которые для пользователя делают его намного более приятным и интересным.

Что нам нужно, чтобы иметь возможность использовать библиотеку Three.js?

Чтобы использовать и использовать все возможности Three.js, важно иметь хорошие знания HTML, CSS и особенно JavaScript (работает и с React.js), и, как и любую библиотеку, вам нужно будет установить ее с простая команда:

npm install three

После этого все, что вам нужно сделать, это импортировать его в свой проект следующим образом:

// Option 1: Import the entire three.js core library.
import * as THREE from 'three';

const scene = new THREE.Scene();


// Option 2: Import just the parts you need.
import { Scene } from 'three';

const scene = new Scene();

Однако необходимо ввести 2 новых инструмента: WebGL и Canvas:

  • WebGL — это API JavaScript, который позволяет выполнять 3D-рендеринг на экране веб-браузера.
  • Canvas — это HTML-компонент, который позволяет создавать графическую визуализацию.

Таким образом, это сочетание Canvas и WebGL позволяет Three.js запускать 3D-сцены, не требуя от конечного пользователя установки каких-либо плагинов.

Как это работает?

Библиотека Three.js предлагает множество предустановленных функций, использующих WebGL в HTML5 Canvas.

Three.js также может генерировать рендеринг на 2D-холсте в случае несовместимости с используемым браузером.

Но если вы когда-либо слышали о WebGL, то знаете, что это низкоуровневая система. Он просто рисует точки, линии и треугольники. Итак, когда дело доходит до использования этого для достижения чего-то сложного и немного более сложного, вы можете столкнуться с некоторыми проблемами; И вот здесь на помощь приходит Three.js.

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

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

Механизм рендеринга также может анимировать 3D-объекты, взаимодействующие с окружающей средой, со скоростью до 60 кадров в секунду.

Если вы привыкли использовать программное обеспечение для 3D-анимации, такое как Autodesk Maya, Autodesk 3Ds Max, Blender, Cinema 4D, ZBrush, LightWave 3D и т. д., вы не потеряетесь. Однако между функциями библиотеки Three.js и системами анимации, используемыми в программном обеспечении для анимации, есть много общего.

Аналогия с «кинорежиссером», которая может помочь понять, как это работает.

  • Сцена соответствует всему, что вы хотите снять
  • Объект (или сетка) соответствует тому, что присутствует, фиксировано или движется. Вы должны придать ему форму, материал, консистенцию. Все это делается с помощью функций, присутствующих в библиотеке Three.js. Сцена, конечно, может включать в себя несколько движущихся 3D-объектов.
  • Точка зрения похожа на то, где вы бы разместили камеру, чтобы снимать сцену.
  • И, чтобы выделить ваш объект (ы), вы должны разместить источники света.
  • Анимация — это движение, которое вы задаете своему объекту; это основано на вашей точке зрения

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