1. Товары
  2.   3D
  3.   JavaScript
  4.   three.js  

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 используются разные камеры.

Previous Next

Начало работы с 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. После материала нам понадобится геометрия с некоторыми вершинами. Линии рисуются между каждой последовательной парой вершин.

 Русский