Я уверен, что многие из вас видели веб-сайты, на которых отображаются 3D-изображения. Еще дальше люди создавали с ним игры вроде этих отсюда: https://freefrontend.com/three-js-games/. Что меня удивило, так это то, что эти приложения полностью созданы с помощью кода JavaScript! Чтобы быть более точным, он использовал библиотеку JavaScript под названием Three.JS, которая включает функции, добавляющие трехмерные объекты и изображения и управляющие ими. Сегодня я покажу основы работы этой библиотеки.
Прежде чем начать, убедитесь, что на вашем компьютере установлен Node.js, введя это в консоль:
узел -v
Эта команда в основном покажет вам текущую версию Node.js, которую вы используете. Если вы не получили никаких результатов, как на изображении, это, скорее всего, означает, что у вас не установлен Node.js. Вы можете скачать Node.js с официального сайта: https://nodejs.org/ru/. Если на вашем компьютере установлен Node.js, давайте продолжим!
Есть два способа использовать библиотеку Three.JS: либо установить библиотеку Three.JS, либо создать новый файл с этим кодом внутри: https://threejs.org/build/three.js, а затем импортировать из файла. Для этого примера я просто использую второй вариант. Вот как выглядит моя файловая структура:
Затем я собираюсь записать весь свой код JavaScript в файл index.html.
Строка 14 соединяет мой файл index.html и мой файл three.js, который я создал. Согласно документу, мы должны сначала настроить сцену и камеру. Простая версия из документации выглядит так:
константная сцена = новая THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild (рендерер.domElement);
Первая строка создает новый объект под названием «сцена» с помощью функции, встроенной в библиотеку Three.JS. С точки зрения искусства, мы настраиваем холст для рисования 3D-изображений. Затем нам нужно создать перспективу, чтобы установить положение, из которого смотрит наш монитор. Первый аргумент во второй строке представляет собой поле зрения или FOV, и его значение указывается в градусах. В основном это означает, какую степень поля может видеть пользователь, и я уверен, что многие из вас, кто играет в игры FPS, знают, что это такое. Второй аргумент представляет соотношение сторон. Наконец, последние два значения показывают, насколько близко и далеко объект от камеры. Если объект ниже или выше ближнего и дальнего значения, он не будет отображаться на вашем экране. Three.JS, кажется, использует рендерер WebGL для отображения объектов, а последние три строки предназначены для настройки рендерера с его размером и добавления его к телу html.
До сих пор мы создали место для отображения объекта и того, как отображать объект, но мы еще не создали никаких объектов. Есть много объектов, которые вы можете создать с помощью Three.JS, но я просто попытаюсь создать сферу.
var геометрия = новый THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
varsphere = new THREE.Mesh(геометрия, материал);
сцена.добавить(сфера);
Three JS имеет различные геометрические формы, которые вы можете попробовать. В моем случае я использовал сферическую геометрию. SphereGeometry следует этому формату, поэтому я пропущу объяснение:
SphereGeometry(radius: Float, widthSegments: Integer, heightSegments: Integer, phiStart: Float, phiLength: Float, thetaStart: Float, thetaLength: Float)
MeshBasicMaterial дает такие свойства объекта, как его цвет. Это похоже на добавление CSS в файл HTML.
Наконец, я собрал их все вместе, чтобы создать сферу, используя функцию Mesh. Затем я добавил немного движения моему объекту:
камера.позиция.z = 10;
функция анимации () {
запросAnimationFrame(анимировать);
сфера.вращение.x += 0,01;
renderer.render(сцена, камера);
}
анимировать();
Я вращаю свою сферу по оси X и постоянно ее визуализирую. В итоге получается вот так:
Three JS достаточно прост для начинающих, и я с нетерпением жду возможности применить его в своих будущих проектах!
