three.js
Бібліотека JavaScript для форматів файлів 3D
API JavaScript з відкритим вихідним кодом для читання, запису та відтворення форматів файлів WebGL, FBX, Collada, а також OBJ за допомогою безкоштовної бібліотеки 3D.
three.js — це проста у використанні бібліотека чистого JavaScript 3d із відкритим кодом, яка дає розробникам програмного забезпечення можливість відтворювати файли WebGL. Бібліотека three.js пропонує завантажувачі для багатьох форматів файлів, таких як FBX, Collada, а також OBJ, але рекомендованим форматом для імпорту та експорту даних є glTF. Чудова особливість формату файлу glTF полягає в тому, що він дуже компактний, його можна легко передавати, а також дуже швидко завантажується.
Бібліотека підтримує кілька важливих функцій, пов’язаних із 3D-моделями, наприклад створення сцени, завантаження 3D-моделей, створення тексту, малювання ліній, налаштування камери, створення геометричного куба, додавання куба до сцени, рендеринг сцени, додавання вікна перегляду до елемента, і багато іншого. У бібліотеці three.js використовуються різні камери.
З одного погляду
Огляд функцій three.js.
- Створення 3D сцен
- Завантаження 3D моделей
- Малюйте лінії
- Читання/запис FBX
- Читання/запис Collada
- Перетворення 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, нам потрібна сцена, камера та рендерер. Ви можете використовувати різні камери та їхні атрибути, щоб завершити сцену. Далі ви можете використати екземпляр рендерера та встановити розмір, у якому ми хочемо, щоб він рендерив нашу програму. Ви можете зберегти нижчу або вищу роздільну здатність. Нарешті, ви додаєте елемент renderer (<canvas>) до свого документа HTML. Ви можете легко створити куб, використовуючи 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. Після матеріалу нам знадобиться геометрія з деякими вершинами. Між кожною послідовною парою вершин проводяться лінії.
