Создание простой сцены с three.js

Перед тем как начать
В предыдущем уроке мы с вами разобрали как самым простым способом подключить three.js к нашему проекту, если вы пропустили, то обязательно прочитайте!

Сейчас пришло время создать нашу первую сцену и вывести что-то на экран.

Для того чтобы это сделать нам нужно 4 элемента:

Сцена
Камера
Отрисовщик
Объекты

Сцена - что-то вроде контейнера. Мы будем складывать в этот контейнер объекты, модели, свет и т.д. После чего мы можем отрендерить сцену и вывести ее содержимое на экран.

// Сцена const scene =newTHREE.Scene();

Камеру не видно на итоговом изображении. Это скорее что-то вроде абстрактного взгляда на сцену. В момент, когда мы будем рендерить сцену все будет видно от лица камеры.

Чаще всего мы будем использовать одну камеру, но возможна работа и с несколькими камерами (в таком случае можно делать переключения между ними).

Существуют различные типы камер, но подробнее о каждом типе мы поговорим в дальнейших уроках. Сейчас мы воспользуемся перспективной камерой (она воспринимает сцену так же, как и человеческий глаз. Чем дальше объект - тем он меньше, чем ближе - тем больше).

Для того, чтобы создать камеру воспользуемся классом PerspectiveCamera.

Чтобы создать объект данного класса нам нужно задать два параметра.

Поле зрения
Соотношение сторон

Поле зрения отвечает за то, какой у камеры будет угол обзора. Если вы зададите слишком большой угол обзора, то камера будет видеть во всех направлениях, но при этом будет значительное искажение изображения. Если задать маленький угол, то изображение будет выглядеть приближенным.

Поле зрения задается в градусах и отвечает за вертикальный угол обзора. В данном уроке мы будем использовать угол равный 75.

Чаще всего соотношение сторон - это ширина canvas, на который идет отображение деленная на высоту этого canvas. Сейчас мы не будем задавать какое-то особое соотношение, но позднее это нам пригодится.

Так же важно не забыть поместить камеру на созданную нами сцену.

// Размеры const sizes = { width: 600, height: 600 }; // Камера const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height); // Добавление камеры на сцену scene.add(camera);

Задача отрисовщика - отрендерить созданную сцену на экране.

Говоря просто - мы просим отрисовщика отобразить на canvas созданную нами сцену, на которую вы смотрим со стороны созданной камеры.

Можно создать canvas вручную или попросить отрисовщика создать его и поместить на страницу.

Пока мы сами руками создадим canvas на странице и передадим его отрисовщику.

Давайте создадим canvas в нашем index.html (поместить его нужно до загрузки скриптов) и добавим ему class.

Для того, чтобы создать отрисовщика нам нужно воспользоваться классом WebGLRenderer. В качестве параметров этому классу передается объект, который может содержать разные настройки. Сейчас нам надо передать ему свойство canvas, значением которого будет <canvas>, который мы только что добавили на страницу.

// Создадим переменную, которая будет хранить элемент из DOM дерева const canvas = document.querySelector('canvas.canvas-js'); // Создадим объект отрисовщика const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, }); // Изменим размер нашего отрисовщика (а с ним и размер canvas) renderer.setSize(sizes.width, sizes.height);

Если вы сейчас перезагрузите страницу, то должны получить черный квадрат со стороной 600px.

Объектами, которые можно отрисовать, могут быть множество вещей. Например, это может быть какая-то примитивная геометрия, импортированные 3D модели, свет и т.д.

В данном уроке мы с вами создадим простой куб.

Для того, чтобы создать куб нам нужно создать объект классы Mesh.

Mesh - это комбинация геометрии (формы объекта) и материала (то как выглядит).

Для того чтобы создать геометрию мы используем класс BoxGeometry и передаем в качестве первых трех параметров размер параллелепипеда, который хотим создать.

// Геометрия const geometry = new THREE.BoxGeometry(1, 1, 1);

Для того чтобы создать материал воспользуемся классом MeshBasicMaterial и в качестве параметра передадим объект с различными опциями. Сейчас передадим в этот объект цвет и то, что данный куб нужно отрисовать в виде ребер.

Есть разные способы чтобы задать цвет.

С помощью шестнацетеричного числа (0xff0000)
При помощи строки, которая хранит это число ('0xff0000')
С использованием названия цвета ('red')
Используя класс цвета Color (подробнее об этом позже)

// Материал const material = new THREE.MeshBasicMaterial({ color: 'purple', wireframe: true });

🤖 Существует много различных типов форм и материалов (о них можно прочитать в документации, но и в дальнейших уроках мы тоже будем или пользоваться).

Для создания итогового объекта нужно воспользоваться классом Mesh и передать геометрию и материал в качестве параметров. А потом уже можно добавить его на сцену.

// Объект const mesh = new THREE.Mesh(geometry, material); // Добавим на сцену scene.add(mesh);

Если вы не добавите объект на сцену, то и увидеть его вы не сможете!

Вот и пришло время сделать наш первый рендер! Для этого нам нужно вызвать метод render() у нашего отрисовщика, а в качестве параметров передадим созданную нами сцену и камеру.

renderer.render(scene, camera);

В браузере и получаем:

Так погодите... Снова что-то не то?

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

Для того чтобы что-то увидеть нам нужно переместить объекты. Для этого у нас есть доступ к таким свойствам объекта как:

position
rotation
scale
quaternion

Сейчас мы воспользуемся свойством position для того чтобы переместить камеру немного назад.

🤖 Свойство position - это объект, у которого есть три поля x, y и z. По умолчанию в three.js за приближение / отдаление отвечает ось z.

// Созданный нами объект камеры const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height); // Перемещение камеры camera.position.z = 3; // Добавление камеры на сцену scene.add(camera);

В браузере и получаем:

Вот и все, сейчас вы можете поздравить себя с первой созданной сценой!

В продолжении статей с курсом по three.js мы с вами детально разберем свойства position, rotation и scale, научимся их изменять и анимировать.

Предыдущий урок

Следующий урок

#threejs #javascript #3d

Создание простой сцены с three.js

Сцена

Камера

Поле зрения

Соотношение сторон

Отрисовщик

Объекты

Первый рендер