|
Three.js
Three.js — це бібліотека JavaScript з кросбраузерністю та інтерфейсом прикладного програмування (API), що використовується для створення та відображення анімованої 3D-комп'ютерної графіки у веббраузері. Three.js скрипти можуть використовуватися спільно з елементом HTML5 Canvas, SVG або WebGL. Вихідний код бібліотеки Three.js розміщений у сховищі на GitHub. ОглядThree.js дозволяє створювати пришвидшену на GPU, 3D-анімацію, використовуючи мову JavaScript як частину вебсайту, не покладаючись на власні плагіни браузера. Це можливо завдяки появі WebGL.[2] Створення складних тривимірних комп'ютерних анімації може бути дещо простішим завдяки бібліотекам високого рівня, таких як Three.js або GLGE, SceneJS, PhiloGL, а також ряд інших. Адже ці бібліотеки відображаються в браузері без зусиль, необхідних для традиційного автономного додатку чи плагіна.[3] ІсторіяРікардо Кабелло — автор бібліотеки Three.js вперше презентував її у квітні 2010 року. Витоки бібліотеки можна простежити за його причетністю до демосцени на початку 2000-х. Спочатку, код був розроблений у ActionScript, а пізніше у 2009 році перенесений у JavaScript .Внески Cabello включають дизайн API, CanvasRenderer, SVGRenderer і відповідають за об'єднання зобов'язань різних учасників проекту. Бранислав Улічний розпочав роботу з Three.js у 2010 році після опублікування кількох демонстрацій WebGL на своєму власному сайті. Він працював на тим, щоб можливості рендерінгу WebGL у Three.js перевищували можливості CanvasRenderer або SVGRenderer.[4] Його основними внесками, як правило, вважаються шейдери та постобробки. Незабаром після введення WebGL 1.0 на Firefox 4 у березні 2011 року Джошуа Коо приєднався до Бранислава Уличного і Рікардо Кабелло. Свою першу демо-версію Three.js для 3D-тексту він створив у вересні 2011 року.[4] Його внески часто стосуються геометрії. Існує всього понад 900 учасників.[4] ОсобливостіThree.js включає такі функції:[5]
Three.js працює у всіх браузерах, що підтримують WebGL 1.0. Three.js надається під ліцензією MIT . ВикористанняБібліотека 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="https://cdn.jsdelivr.net/npm/three@0.124.0/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 інструментом, що спрощує процес розробки програм WebGL, а також є простим методом ознайомлення з поняттями WebGL. Це такі підручники як:
Посилання |
||||||||||||||||||||||||||
