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

Создание геометрии бокала для вина

Во-первых, нам нужна геометрия или сетка бокала перед визуализацией в нашей сцене. Вы можете получить несколько бесплатных моделей бокалов для вина на Sketchfab.com или пойти по более увлекательному маршруту: создать их самостоятельно!

Ладно, ребята, если честно, я не 3D-дизайнер; Я почти ничего не понимаю в программном обеспечении для 3D-графики. Но ради своей цели я решил немного изучить Blender.

В этой статье я создал модель бокала для вина, следуя этому уроку на YouTube. Однако Blender — это не Microsoft Paint, а довольно сложное и мощное программное обеспечение для 3D-графики. Таким образом, я настоятельно рекомендую вам сначала изучить основы Blender, либо на YouTube, либо на онлайн-платформах для самостоятельного обучения, прежде чем погрузиться в ту ссылку на учебник YouTube Blender, которую я вставил выше.

Я пропущу подробности о том, как создать этот бокал для вина в блендере, так как этот урок на YouTube уже подробно объяснил эти шаги. Но вам не нужно давать вашему объекту стеклянный материал или добавлять какое-либо освещение в сцену Blender, если все, что вам нужно, это чистая геометрия винного бокала.

Еще два важных замечания перед экспортом бокала для вина в формате GLTF(glb) из Blender:

  1. Не забудьте выбрать параметр «Сглаживание тени» в «Контекстном меню объекта» вашего объекта «Бокал». Этот параметр включает плавный рендеринг и отображение лиц с использованием интерполированных нормалей вершин. Если этот параметр не выбран, ваша модель импорта GLTF в Three.js, вероятно, будет иметь пиксельные отражения, поскольку между вершинами не происходит интерполированных отражений.
  2. Не забудьте применить модификатор Subdivision Surface Modifier к объекту бокала в Blender перед экспортом. Если вы забыли это сделать, экспортированный бокал для вина GLTF останется низкополигональным и заостренным объектом.

Код Three.js

Я отправил рабочий код Three.js для этой демонстрации в мой репозиторий github. Я не буду вдаваться в подробности того, как загружать модели GLTF и равнопрямоугольное фоновое изображение HDR. Узнайте больше о том, как загружать модели GLTF в этой статье. Что касается HDR и других связанных настроек, вы можете прочитать мою предыдущую статью, чтобы узнать о них больше, поскольку этот пример очень похож на официальный пример передачи Three.js.

На этот раз я установил scene.environment = hdrEquirect вместо установки свойства envMap для MeshPhysicalMaterial, как указано в документах:

Если не ноль, эта текстура устанавливается в качестве карты окружения для всех физических материалов в сцене.

Обратите внимание, что свойство transmission должно быть установлено на 1 для эффекта прозрачного стекла. А когда transmission не равно нулю, opacity должно быть установлено в 1. Свойства ior и thickness имитируют преломление света в реальном мире, когда он проходит через прозрачные материалы. В данном примере эти параметры мало что значат, так как предполагается, что наше стекло тонкое.

Запуск npm run start в корневом каталоге проекта откроет вкладку в Chrome, которая показывает вам эту кристально чистую красоту!

И это все для этого краткого руководства. Надеюсь, вы тоже узнаете что-то новое!