three.js
Библиотека JavaScript для форматов 3D-файлов
API JavaScript с открытым исходным кодом для чтения, записи и рендеринга файлов форматов WebGL, FBX, Collada, а также OBJ с помощью бесплатной 3D-библиотеки.
three.js — это простая в использовании 3D-библиотека с открытым исходным кодом на чистом JavaScript, которая дает разработчикам программного обеспечения возможность отображать файлы WebGL. Библиотека three.js предлагает загрузчики для множества форматов файлов, таких как FBX, Collada, а также OBJ, но рекомендуемым форматом для импорта и экспорта данных является glTF. Отличительной особенностью формата файла glTF является то, что он очень компактен и может быть легко передан, а также очень быстро загружается.
Библиотека поддерживает несколько важных функций, связанных с 3D-моделями, таких как создание сцены, загрузка 3D-моделей, создание текста, рисование линий, установка камеры, создание геометрического куба, добавление куба в сцену, рендеринг сцены, добавление области просмотра к элементу, и многое другое. В библиотеке three.js используются разные камеры.
С одного взгляда
Обзор функций three.js.
- Создание 3D-сцен
- Загрузка 3D-моделей
- Рисовать линии
- Чтение/запись FBX
- Чтение/запись Коллада
- Преобразование 3D-сцен
- Экспорт данных в glTF
- обработка компонентов
- обрабатывать текстуры
three.js поддерживает популярные форматы 3D-файлов, перечисленные ниже.
Независимость от платформы
three.js можно запускать на любом современном сборщике JavaScript, наиболее популярным из которых является webpack.
- JavaScript
Начало работы с three.js
Самый простой способ установить three.js — использовать npm. Пожалуйста, используйте следующую команду для плавной установки.
Установите файл three.js через NPM.
npm install --save three Создать сцену с помощью JavaScript
Библиотека с открытым исходным кодом three.js предоставила поддержку для создания 3D-сцены для вращения куба внутри собственного приложения JavaScript. Чтобы отобразить что-либо с помощью three.js, нам нужны сцена, камера и средство визуализации. Вы можете использовать разные камеры и их атрибуты для завершения сцены. Затем вы можете использовать экземпляр средства визуализации и установить размер, с которым мы хотим, чтобы он отображал наше приложение. Вы можете оставить более низкое или более высокое разрешение. Наконец, вы добавляете в HTML-документ элемент renderer (<canvas>). Вы можете легко создать куб, используя BoxGeometry и используя материал для его окраски. После этого вам понадобится Mesh, которую можно вставить в сцену и перемещать в соответствии с вашими потребностями.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and визуализатор. You can use different cameras and their attribute to complete the scene. Next, you can use a визуализатор instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the визуализатор element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Сетка that can be inserted into the scene and moved according to your need.
Загрузка 3D-моделей через JavaScript
Библиотека three.js с открытым исходным кодом позволяет программистам загружать 3D-модели в свои собственные приложения с помощью всего пары строк кода JavaScript. 3D-модели доступны в сотнях форматов файлов. Каждая модель имеет разные цели, разные функции и разную сложность. Во-первых, у вас должен быть загрузчик, после чего вы сможете загрузить сцену.
Рисование линий на диаграмме
Библиотека с открытым исходным кодом three.js обеспечивает поддержку рисования линий или кругов внутри собственного приложения JavaScript. Для начала нам нужно настроить визуализатор, сцену и камеру. После этого вам нужно определить материал и использовать LineBasicMaterial или LineDashedMaterial. После материала нам понадобится геометрия с некоторыми вершинами. Линии рисуются между каждой последовательной парой вершин.
