Three.js
| Three.js | |
|---|---|
 | |
 Скриншот примера с Three.js | |
| Тип | JavaScript library |
| Автор | Ricardo Cabello (Mr.doob) |
| Написана на | JavaScript |
| Первый выпуск | апрель 24, 2010 |
| Последняя версия | r102 (2019-03-02) |
| Состояние | Активный |
| Лицензия | MIT |
| Сайт | threejs.org |
 Three.js на Викискладе | |
Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.
Содержание
Обзор[править | править код]
Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть сайта без подключения проприетарных плагинов для браузера. Это возможно благодаря использованию технологии WebGL. Поддерживает трёхмерные модели формата Collada[1].
Особенности[править | править код]
- Рендереры: 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.
Использование[править | править код]
Библиотека Three.js поставляется в одном JavaScript файле, который может быть подключён к странице в любом месте.
<script src="js/three.min.js"></script>
В следующем примере создаётся сцена, на неё добавляется камера и куб. Для сцены создаётся визуализатор <canvas> и окно просмотра для него добавляется в document.body. После загрузки сцены, куб начинает вращаться по осям X и Y.
<script>
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
Критика[править | править код]
Разработка редактора сцен для Three.js находится на начальной стадии. Таким образом, создание даже примитивного 3D контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.[2][3]
Указанные проблемы решаются в некоторых производных фреймворках. В частности, основанный на Three.js движок Verge3D содержит встроенную среду визуального программирования Puzzles, позволяющую создавать приложения без написания кода.
См. также[править | править код]
Примечания[править | править код]
- ↑ A.M. Manferdini, F. Remondino. A Review of Reality-Based 3D Model Generation, Segmentation and Web- Based Visualization Methods (англ.) // International Journal of Heritage in the Digital Era. — 2012. — Vol. 1, no. 1. (недоступная ссылка)
- ↑ The Good, The Bad and the WebGL-y (недоступная ссылка). benchung.com. Проверено 31 июля 2015. Архивировано 22 июня 2015 года.
- ↑ Что выбрать для 3D сайта – Three.js или Blend4Web?. Habrahabr.ru. Проверено 31 июля 2015.
Литература[править | править код]
- Williams, James. Three.js By Example. — Vancouver, Canada : Leanpub, 2013.
- Williams, James. Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL. — Upper Saddle River, NJ : Addison-Wesley, 2012. — P. 117–120, 123–131, 136, 140–142. — ISBN 0321767365.
