Работа с файлами .STL на Three.JS

Недавно я разработал базовое веб-приложение с использованием Three.js, которое позволяет отображать файл .stl. Прежде чем я начну делиться своим опытом с Three.js, я хотел бы сначала представить его вам.

Three.js — это легкая и простая в использовании 3D-библиотека JavaScript, которая включает в себя средство визуализации WebGL.

Он используется некоторыми крупными компаниями, такими как GitHub, Pioneer, Oculus и даже NASA, для создания потрясающих графических 3D-анимаций. Есть куча классных примеров, которые вы можете посмотреть здесь; https://threejs.org/.

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

Монтаж

Как видно из установочной части официального сайта, Three.js можно установить с помощью npm и других инструментов сборки или с помощью CDN. Поскольку я работал без сборщика модулей (например, Webpack) в своей локальной среде (я напрямую использовал свой браузер для отображения моего HTML), я не мог использовать голые спецификаторы импорта. Поэтому я решил загружать свои модули непосредственно из node_modules, но после r127версии Three.JS они удалили поддержку загрузки модулей в веб-приложениях из node_modules. Вместо этого я использовал метод импорта карты. Если вы не знаете, что такое карта импорта:

Карта импорта – это объект JavaScript, в котором ключом является имя импорта (например, @lodash/startCase ), а значением – расположение кода.

Он используется так:

// IN HTML
<script type="importmap">
    {
      "imports": {
        "nameOfImport": "location",
        "nameOfSecondImport": "secondLocation"
        }      
    }
  </script>

Вы можете найти примеры этой установки во многих из этих проектов на официальном сайте.

Локальное использование

Чтобы иметь возможность работать с текстурами или объектами из внешних файлов, вы должны использовать локальный веб-сервер. Если вы используете VSCode, вы можете легко установить расширение для этой цели. В противном случае вы всегда можете использовать что-то вроде Apache или настроить сервер Python. Если вы не планируете работать с внешними файлами, то вы всегда можете дважды щелкнуть по своему HTML-файлу и заставить его работать без проблем.

WebGL

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

if ( WebGL.isWebGLAvailable()) {
    console.log("Available")
}

Применение

Вы можете начать с официального шаблона здесь;

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

Загрузка объекта из внешних файлов

Вместо создания геометрической структуры мы собираемся использовать файл .stl для загрузки объекта в наше приложение. Файлы .stl обычно используются с 3D-принтерами. Вместо использования приложений САПР мы могли бы отображать наш объект для печати в нашем повседневно используемом браузере. Сначала нам нужен загрузчик, который подготовит наш объект перед процессом рендеринга. Для этого мы будем использовать STLLoader. Мы могли бы импортировать его вот так;

И реализуйте это так;

Mesh — это базовый класс, который наследуется от Object3d и используется для создания полигональных объектов путем объединения геометрии с материалом.

Измените путь к вашему stl файлу, ./uploads/screw.stl затем вызовите эту loadObject функцию в init() функции, которая выполняется в начале.

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

графический интерфейс

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

“gui”: “./node_modules/three/examples/jsm/libs/lil-gui.module.min.js”

Вы можете найти его в файле примера, включенном в модуль three.

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

Группа почти идентична Object3D. Его цель — сделать работу с группами объектов синтаксически более понятной.

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

Заключение

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

Спасибо за прочтение.