WikiSort.ru - Не сортированное

Three.js
Скриншот примера с Three.js
Тип	JavaScript library
Автор	Ricardo Cabello (Mr.doob)
Написана на	JavaScript
Первый выпуск	апрель 24, 2010 (2010-04-24)
Последняя версия	r88 (2017-11-01; 486 дней тому назад)
Состояние	Активный
Лицензия	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, позволяющую создавать приложения без написания кода.

См. также

• Babylon.js

Примечания

Литература

• 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.

Ссылки

• Официальный сайт
• Документация на английском языке
• Документация на русском языке