Что такое three.js?
Three.js - это кроссбраузерная библиотека JavaScript / API, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Он работает во всех браузерах и построен на основе WebGL (Web G raphics L ibrary), другого API JavaScript для рендеринга трехмерной графики в любой совместимый веб-браузер без использования плагинов.
Three.js - одна из многих популярных высокоуровневых библиотек для создания сложных компьютерных 3D-анимаций, которые отображаются в браузере без каких-либо традиционных браузерных приложений или плагинов. Другие популярные библиотеки включают GLGE, SceneJS и PhiloGL.
Давайте построим вращающийся куб
Для начала создадим 3 файла для CSS, HTML и JS. Библиотека Three.js - это отдельный файл JavaScript, поэтому его можно включить локально или в удаленной копии. В этой статье мы будем использовать локальную копию в нашем three.js
файле внутри js
папки.
В тело index.html включите исходные теги скрипта:
<body> <script src="js/three.js"></script> <script> // Your JavaScript code will go here. </script> </body>
В свой styles.css
лист включите эти два свойства:
body { margin: 0; } canvas { width: 100%; height: 100% }
Объем кода минимален для рендеринга куба, поэтому мы добавим его в пару тегов скрипта внутри индексного файла. В тегах нам понадобятся 3 ключевых компонента - сцена, камера и средство визуализации для рендеринга вращающегося оранжевого куба.
Создание и рендеринг сцены
Вы создаете экземпляры классов Scene, PerspectiveCamera и WebGLRenderer и устанавливаете их в качестве переменных. Для экземпляра PerspectiveCamera вы можете передать 4 атрибута:
- Поле зрения - отображает ваши объекты с учетом расстояния от вашей точки обзора. Увеличение числа может уменьшить размер вашего объекта, создавая иллюзию того, что объект находится дальше от вас.
- Соотношение сторон - частное, когда ширина элемента делится на высоту. Прямо сейчас ширина и высота установлены в соответствии с шириной окна вашего браузера.
- Близко и далеко - ограничения, позволяющие отображать определенные объекты. Любые объекты, расположенные дальше от камеры, чем значение far, или объекты, расположенные ближе, чем значение near, не визуализируются. Эти атрибуты в основном используются для производительности.
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
Мы также создаем экземпляр класса WebGLRenderer, устанавливая размер равным ширине и высоте окна браузера. Затем мы добавляем элемент рендеринга в наш HTML-документ, который использует элемент canvas
для отображения сцены.
Создать форму
Теперь давайте отобразим куб. Так же, как камера и сцена, мы создаем экземпляр куба с объектом BoxGeometry и добавляем цвет в куб с помощью объекта Material. Мы можем объединить эти два объекта с объектом Mesh и отобразить объект на сцене.
- Создать геометрию
- Создайте материал и сетку
- Добавить сетку в сцену
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0xFF6633 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;
Для других типов фигур это объекты, которые нужно использовать для их создания:
- Сфера - СфераГеометрия
- Куб - BoxGeometry
- Конус - КонусГеометрия
- Цилиндр - ЦилиндрГеометрия
Визуализация и анимация куба
Теперь давайте посмотрим на этот куб на сцене ... но подождите, а где он? О, нам нужно показать это на странице. Мы создадим функцию рендеринга, которая рисует камеру и сцену, на которой отображается куб.
function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
Смотреть! Вот апельсиновый куб!
Сладкий! Теперь у нас есть куб, давайте повернем его. Чтобы повернуть куб, мы воспользуемся функцией вращения. Чем выше число, тем быстрее он вращается, и наоборот.
function render() { requestAnimationFrame( render ); cube.rotation.x += 0.025; cube.rotation.y += 0.025; renderer.render( scene, camera ); } render();
Вот и все! Теперь у вас есть оранжевый вращающийся куб. Лучше прядильщика, не так ли?
Ресурсы
- Вихревые сферы - http://david.li/vortexspheres/
- WebGL - https://www.khronos.org/webgl/