Three.JS: 3D-графика с canvas WebGL

5 (100%) 3 vote[s]

Three.js — это одна из наиболее популярных WebGL библиотек для 3Д графики в вебе, из-за своей простоты в освоении. Это не значит, что она самая лучшая, вы можете выбрать любую другую, например CopperLicht, GLGE, OSG.js, O3D и т. д. Но она минимально нагружает CPU.

WebGL (Web-based Graphics Library) — это API для 3D-графики в браузере, разрабатываемый некоммерческой организацией Khronos Group. WebGL использует язык программирования шейдеров GLSL (Graphics Library Shader Language).

Шейдеры — это крошечные программы, предназначенные для исполнения процессорами видеокарты и компилируются в инструкции для CPU.

WebGL исполняется как элемент HTML5 и поэтому является полноценной частью объектной модели документа (DOM API) браузера. Может использоваться с любыми языками программирования, которые умеют работать с DOM API, например, JavaScriptRustJavaKotlin и другими. Все ведущие разработчики браузеров Google (Chrome), Opera (Opera), Mozilla (Firefox), и Apple (Safari), являются членами Khronos и реализуют поддержку WebGL в своих браузерах. За счёт использования низкоуровневых средств поддержки OpenGL часть кода на WebGL может выполняться непосредственно на видеокартах. WebGL — это контекст элемента canvasHTML, который обеспечивает API 3D графики без использования плагинов.

Пример использования WebGL Earth API

Самый быстрый способ встроить 3D-глобус в веб-страницу (откроется в новой вкладке) с простой в использовании JavaScript API — имитирующий LeafletJS.

WebGL Earth — это виртуальный глобус с открытым исходным кодом, созданный с использованием технологии HTML5 и Canvas WebGL. Он поставляется с JavaScript API адаптация популярного API LeafletJS. 

Three.js

Three.js — легковесная кроссбраузерная библиотека JavaScript, предназначенная для создания и отображения веб-приложений с анимированной компьютерной 3D графики. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.

Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть страницы. Поддерживает трёхмерные модели формата Collada.

Особенности

        • Рендереры: Canvas, SVG или WebGL.
        • Сцена: добавление и удаление объектов в режиме реального времени; туман.
        • Камеры: перспективная или ортографическая.
        • Анимация: каркасы, быстрая кинематика, обратная кинематика, покадровая анимация.
        • Источники света: внешний, направленный, точечный; тени: брошенные и полученные.
        • Шейдеры: полный доступ ко всем OpenGL шейдерам (GLSL)
        • Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое.
        • Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; модификаторы: ткань, выдавливание.
        • Загрузчики данных: двоичный, изображения, JSON и сцена
        • Экспорт и импорт: утилиты, создающие Three.js-совместимые JSON файлы из форматов: Blender, openCTM, FBX, 3D Studio Max, и Wavefront .obj файл.
        • Поддержка: документация по API библиотеки находится в процессе постоянного расширения и дополнения, есть публичный форум и обширное сообщество.
        • Примеры: на официальном сайте можно найти более 150 примеров работы со шрифтами, моделями, текстурами, звуком и другими элементами сцены.

Библиотека Three.js работает во всех браузерах, которые поддерживают технологию WebGL; также может работать с «чистым» интерфейсом элемента CANVAS, благодаря чему работает и на многих мобильных устройствах. Three.js распространяется под лицензией MIT license.

Источник wikipedia

Tree.js: некоторые примеры, как они работают на странице

Интерактивная буферная геометрия

См. в новой вкладке.

Исходный код примера на GitHub.

Следующие примеры хорошо работают уже на этой странице:

Геометрия текст сплошной (solid)

Исходный код примера на GitHub.

Спрайты

Исходный код примера на GitHub.

CSS 3D

three.js css3d - periodic table

Исходный код примера на GitHub.

Создание первого приложения с three.js

Изучение three.js можно начать с официальной страницы руководства по использованию https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene. (Гугл-переводчик в помощь, или документация на русском языке http://threejs-docs.ru/ ).

На русском языке можно найти развернутое руководство по three.js на https://threejsfundamentals.org/threejs/lessons/ru/.

Вот пример первого кода из threejs.org (по аналогии с «Hello, World!» в любом языке программирования):

А вот пример с добавлением нескольких фигур в сцену, уже на developer.mozilla.org:

Что нужно для начала работы?

Чтобы начать разработку с Three.js, нужно:

Подключать файлы можно без загрузки библиотеки, а использовать подключение внешних скриптов:

  1. <script src="https://threejs.org/build/three.js"></script>
  2. <script src="https://threejs.org/examples/jsm/libs/tween.module.min.js"></script>
  3. <script src="https://threejs.org/examples/jsm/controls/TrackballControls.js"></script>
  4. <script src="https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js"></script>
  5. <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
  6. <script src="ttps://threejs.org/build/three.module.js"></script>
  7. <script src="https://threejs.org/examples/jsm/loaders/SVGLoader.js"></script>
  8. //И тому подобное

Как запустить three.js локально

Если вы используете только процедурную геометрию и не загружаете никаких текстур, веб-страницы должны работать прямо из файловой системы, просто дважды щелкните файл HTML в файловом менеджере, и он должен появиться в браузере (вы увидите файл: ///yourFile.html в адресной строке).

Если вы загружаете модели или текстуры из внешних файлов, из-за ограничений безопасности исходной политики браузера , загрузка из файловой системы завершится с ошибкой безопасности.

Есть два способа решить эту проблему:

  1. Изменить CORS для локальных файлов в браузере. Это позволяет вам получить доступ к вашей странице как:file:///yourFile.html
  2. Запускайте файлы с локального веб-сервера. Это позволяет вам получить доступ к вашей странице как:http://localhost/yourFile.html

Если вы хотите отключить Cross-Origin Resource Sharing (CORS) , имейте в виду, что вы можете открыть себя для некоторых уязвимостей, если используете тот же браузер для обычного веб-серфинга. Лучше создать отдельный профиль браузера (ярлык), который будет использоваться только для локальной разработки. Для этого создаем еще один ярлык Chrome на рабочем столе, кликаем по нему правой кнопкой мыши и заходим в «Свойства». Находим в появившемся окне строку «Объект» и в самом конце дописываем —disable-web-security —user-data-dir=»c:/someFolderName. Если браузер установлен на диск C://, то полностью строка будет выглядеть так:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe» —disable-web-security —user-data-dir=»c:/someFolderName

Запуск three.js локальном сервере

Во многие языки программирования встроены простые HTTP-серверы. Они не так полнофункциональны, как производственные серверы, такие как Apache или NGINX , однако их должно быть достаточно для тестирования вашего приложения three.js.

Сервер Node.js

Node.js имеет простой пакет HTTP-сервера. Установить:npm install http-server -g

Для запуска (из вашего локального каталога):http-server . -p 8000

Сервер Python

Если у вас установлен Python , этого должно быть достаточно для запуска этого из командной строки (из вашего рабочего каталога)://Python 2.x python -m SimpleHTTPServer //Python 3.x python -m http.server

Это будет обслуживать файлы из текущего каталога на локальном хосте через порт 8000, то есть в адресной строке типа:http://localhost:8000/

Cервер Ruby

Если у вас установлен Ruby, вы можете получить тот же результат, выполнив это:ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

PHP сервер

PHP также имеет встроенный веб-сервер, начиная с php 5.4.0:php -S localhost:8000

Lighttpd

Lighttpd — это очень легкий веб-сервер общего назначения. Мы рассмотрим его установку на OSX с HomeBrew здесь. В отличие от других серверов, обсуждаемых здесь, lighttpd является полноценным сервером, готовым к работе.

  1. Установите его через доморощенныйbrew install lighttpd
  2. Создайте файл конфигурации с именем lighttpd.conf в каталоге, в котором вы хотите запустить свой веб-сервер. Существует образец здесь .
  3. В файле conf измените server.document-root на каталог, из которого вы хотите обслуживать файлы.
  4. Начни сlighttpd -f lighttpd.conf
  5. Перейдите по адресу http: // localhost: 3000 /, и он будет обслуживать статические файлы из выбранного вами каталога.

IIS

Если вы используете Microsoft IIS в качестве веб-сервера. Пожалуйста, добавьте настройки типа MIME относительно .fbx externsion перед загрузкой.File name externsion: fbx MIME Type: text/plain

По умолчанию IIS блокирует загрузку файлов .fbx, .obj. Вы должны настроить IIS, чтобы такие файлы можно было загружать.

Не забываем, что canvas генерируется в процессе выполнения кода, и по умолчанию он вставляется в страницу при помощи

  1. document.body.appendChild( renderer.domElement );

Чтобы указать место, где браузер должен отрисовать canvas, используем конструкцию:

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <!--создаем пустой элемент <div> с атрибутом id="...любой Id"-->
  6. <div id="demo"></div>
  7. <script>
  8. //Ваш код
  9. document.getElementById( 'demo' ).appendChild( renderer.domElement );
  10. //Ваш код
  11. </script>
  12. </body>
  13. </html>

Если на странице несколько холстов, их можно разместить в нужном месте.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 2732

Популярные записи