Interested Article - Three.js

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

Обзор

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

Особенности

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

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

Использование

Библиотека Three.js поставляется в одном JavaScript файле, который может быть подключён к странице в любом месте.

<script src="js/three.min.js"></script>

В следующем примере создаётся сцена, на неё добавляется камера и куб. Для сцены создаётся визуализатор <canvas> и окно просмотра для него добавляется в document.body. После загрузки сцены, куб начинает вращаться по осям X и Y.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> <script src="http://threejs.org/build/three.min.js"></script> </head> <body> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script> </body> </html>

Критика

Разработка редактора сцен для Three.js находится на начальной стадии. Таким образом, создание даже примитивного 3D контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.

См. также

Babylon.js

Литература

Williams, James. (неопр.) . — Vancouver, Canada: Leanpub, 2013.
Williams, James. (англ.) . — Upper Saddle River, NJ: Addison-Wesley , 2012. — P. —120, 123—131, 136, 140—142. — ISBN 0321767365 .

Примечания

— 2023.
— 2006.
A.M. Manferdini, F. Remondino. (англ.) // International Journal of Heritage in the Digital Era. — 2012. — Vol. 1 , no. 1 . (недоступная ссылка)
(неопр.) . benchung.com. Дата обращения: 31 июля 2015. Архивировано из 22 июня 2015 года.
(неопр.) Habrahabr.ru. Дата обращения: 31 июля 2015. 7 августа 2016 года.