Three.js
Three.js | |
---|---|
![]() | |
![]() Скриншоты примеров с Three.js | |
Тип | интерфейс программирования приложений, библиотека JavaScript и библиотека функций |
Разработчик | mrdoob[вд] |
Написана на | JavaScript[3] |
Операционная система | кроссплатформенность |
Первый выпуск | 3 июля 2013 |
Последняя версия | |
Репозиторий | github.com/mrdoob/three.… |
Лицензия | лицензия MIT[4] |
Сайт | threejs.org |
![]() |
Three.js — кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS
, SVG или WebGL. Исходный код расположен в репозитории GitHub.
Обзор
[править | править код]Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть сайта без подключения проприетарных плагинов для браузера. Это возможно благодаря использованию технологии WebGL. Поддерживает трёхмерные модели формата Collada[5].
Особенности
[править | править код]- Рендереры: 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.
![](http://upload.wikimedia.org/wikipedia/commons/thumb/9/99/2022-04-20_23-54_GreenCube_Zoom_output_16Bit_480p.gif/400px-2022-04-20_23-54_GreenCube_Zoom_output_16Bit_480p.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.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 контента требует написания программного кода. В качестве недостатков движка также называются отсутствие своевременных обновлений документации и уроков.[6][7]
См. также
[править | править код]Литература
[править | править код]- 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.
Примечания
[править | править код]- ↑ npmjs
- ↑ Release 161 — 2024.
- ↑ The three_js Open Source Project on Open Hub: Languages Page — 2006.
- ↑ https://github.com/mrdoob/three.js/blob/master/LICENSE
- ↑ 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 года.