Three.js
| Three.js | |
|---|---|
| Последняя версия | 142 (28 июня 2022)[1] |
Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.
Обзор[править]
Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть сайта без подключения проприетарных плагинов для браузера. Это возможно благодаря использованию технологии WebGL. Поддерживает трёхмерные модели формата Collada[2].
Особенности[править]
- Рендереры: 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.
<!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 контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.[3][4]
См. также[править]
Примечания[править]
- ↑ r142.
- ↑ 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. Архивировано 7 августа 2016 года.
Литература[править]
- 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.