Добавление модели в three.js.

Доброго дня.

Сегодня хотел бы рассмотреть пример добавления простой модели на сцену в three.js. Попробую структурировать информацию по шагам, чтобы было просто и понятно.

1. Добавление плоскости

floor

Добавим с помощью PlaneGeometry плоскость размером 10x10. Уберём сходство материала с металлом (metalness), а шероховатость (roughness) оставим на половину.

receiveShadow нужен чтобы работать с тенями.

2. Добавление света

light

Добавим два источника освещения:

• DirectionalLight - используют в качестве солнечного света
• HemisphereLight - принимает цвет неба

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

3. Добавление модели

model

Прежде всего необходимо импортировать GLTFLoader.

GLTFLoader - это загрузчик 3D моделей в формате gltf.

После скачиваем файлы модели (всю папку GLTF).

Надеюсь этот простой пример будет полезен.