введение
В этой статье в основном объясняются соответствующие концепции Three.js и помогают читателям развить относительно полное понимание Three.js и связанных с ними знаний.
Интернет быстро развивался в последние годы. С популярностью HTML5 возможности производительности веб -страниц становятся все более и более мощными. На веб -странице уже есть много сложных анимаций и изысканных эффектов.
Но люди всегда жадны. Итак, что еще можно сделать выше этого? Одним из них является рисование высокопроизводительной 3D-графики на веб-страницах через WebGL.
Opengl, webgl до three.js
Многие люди, вероятно, слышали о OpenGL , которая является наиболее часто используемой кроссплатформенной графической библиотекой.
WebGL -это веб-ориентированный графический стандарт, разработанный OpenGL, предоставляющий серию API JavaScript, посредством которых рендеринг графики будет использоваться для достижения более высокой производительности.
Thir.js -это простая в использовании графическую библиотеку, сформированную путем инкапсуляции и упрощения интерфейса WebGL.
Проще говоря: webgl можно рассматривать как интерфейс, предоставленный браузером. В JavaScript эти API могут быть использованы непосредственно для рисования 3D -графики; и Three.js помогает нам инкапсулировать эти интерфейсы, чтобы быть более полезными.
Сравнение Webgl и Three.js
Поскольку у нас есть Webgl, зачем нам все еще нужно три.
Это связано с тем, что порог для WebGL относительно высок и требует относительно более математических знаний. Хотя WebGL предоставляет API фронтального API, WebGL и Front-End Development-это, по сути, два разных направления, и малое перекрытие знаний. Актуальность заключается в том, что все они находятся на веб -платформе, и все они используют JavaScript. Передний программист может быть знаком с аналитической геометрией, но должно быть очень мало, кто все еще знаком с линейной алгеброй (например, попытаться найти обратную матрицу транспорта?), Не говоря уже о том, что физическая значимость операций матрицы подчеркивается в использовании, которая также относительно отсутствует в обучении.
Поэтому инженерам фронт-энда довольно сложно начать работу с WebGL за короткое время.
Таким образом, Thir.js имеет очень хорошую инкапсуляцию интерфейса, предоставленного WebGL, упрощая многие детали и значительно снижая затраты на обучение. И в Webgl не хватает гибкости.
Поэтому стоит рекомендовать, что начиная с Three.js, что позволяет вам столкнуться с большинством сценариев спроса после более короткого изучения.
Три. JS Проблемы обучения
Начало работы с Three.js относительно просто, но когда мы действительно узнаем, мы найдем смущающую проблему: очень мало связанных учебных материалов.
Обычно в этой популярной библиотеке есть очень полные документы, и часто лучший способ учиться на официальных документах или официальных вводных учебных пособиях. Но три не так, его документация слишком краткая для начинающих.
Тем не менее, чиновник предоставляет очень богатое разнообразие примеров, и почти все необходимые вам используются использование, отраженные в определенном примере. Но эти примеры не подходят для начала работы, но подходят для дальнейшего обучения после начала работы.
Вот несколько относительно хороших учебных пособий:
Три.
Это хороший легкий вводной учебник для Three.js. У автора очень хороший стиль письма, и базовые знания объясняются кратко и легко понятны.
Руководство по разработке Three.js (первая китайская версия)
Обучение Three.js- Второе издание
Learning Three.js: JavaScript 3D Library for Webgl - это немногие и лучшие вводные книги Three.js, которая более полным образом объясняет различные функции Three.js.
Если у вас есть возможность, рекомендуется прочитать второе издание английской версии, опубликованной в 2015 году, которая очень мало отличается от текущего Three.js.
Китайская версия переводится с первого издания оригинальной книги, опубликованной в 2012 году. Большинство концепций применимы, но многие детали изменились.
Три
Это перевод иностранного учебника, в общей сложности шесть статей . Я мало объясняю, но это больше о том, как использовать каждую основную функцию. Это больше подходит для студентов с некоторым графическим фондом.
Конечно, эти материалы определенно недостаточно во время реального процесса обучения. При столкновении с проблемами, вам все равно нужно проверить материалы самостоятельно. Тем не менее, я хотел бы напомнить вам, что Thre.js довольно часто обновляется, теперь это версия R80. С тех пор, как R1 был выпущен в апреле 2010 года, это 72 -я версия (некоторые номера версий в середине были пропущены). Следовательно, часть информации, найденной в Интернете, может не подходить для текущей версии , поэтому вам необходимо обратить внимание на идентификацию (ранее рекомендуемая информация также имеет более или менее такие проблемы).
Некоторые концепции в Three.js
Чтобы отобразить трехмерную графику на экране, идея, как правило, такая:
Создание трехмерного пространства
В трех это называется сцена (сцена), чтобы выбрать точку наблюдения и определить направление/угол наблюдения и т. Д.
Три звонят камеру (камера), чтобы добавить объекты для наблюдения на сцене
Есть много типов объектов в три, включая сетку, линию, точки и т. Д. Все они наследуют от класса Object3D, которые делают наблюдаемую сцену в указанную область на экране.
Используйте рендеринг в трех, чтобы сделать это
Давайте посмотрим на эти концепции в трех подробно.
Сцена
Сцена представляет собой контейнер из всех объектов, и она также соответствует трехмерному миру, который мы создаем.
Система координат камеры
Камера является наблюдателем в трехмерном мире. Чтобы наблюдать этот мир, мы должны сначала описать положение в космосе.
Общая система правой координаты используется в трех.
Трехмерная проекция
В трех видах камер есть два типа, а именно, орфографическая проекционная камера Three.othographic Camera и перспективная проекционная камера Three.persipperive Camera.
Разница между ортогональной проекцией и перспективной проекцией показана на рисунке выше. Левая картина - это ортогональная проекция. Свет, испускаемый объектом, проецируется параллельно экрану, а квадраты далеко и близки имеют одинаковый размер; Правильная картина - это перспективная проекция, которая большая в ближней и маленькой в дальнем и маленьком, что соответствует нашему обычному ощущению взгляда на вещи.
Википедия: 3D проекция
Ортогональная проекционная камера
ПРИМЕЧАНИЕ. «Точка зрения» на рисунке соответствует камере в трех.
Здесь мы добавляем концепцию визуального тела: визуальное тело - это геометрическое тело, нами будут видны только объекты в визуальном теле, а объекты вне визуального тела будут отрезаны. Это для удаления ненужных операций.
Взгляд корпуса орфографической проекционной камеры - кубоид. Конструктор OrthographicCamera заключается в следующем: OrthographicCamera (слева, справа, вверху, внизу, рядом, далеко)
Сама камера может рассматриваться как точка, в то время как влево указывает расстояние между левой плоскостью и камерой в левом и правом направлении. То же самое относится и к другим параметрам. Следовательно, шесть параметров определяют позиции шести грани просмотра тела соответственно.
Можно приблизительно предположить, что объекты в теле просмотра проецируются параллельно ближней плоскости, а затем изображения на ближней плоскости отображаются на экране.
Перспективная проекционная камера
Просмотр камеры перспективной проекционной камеры является платформой с четырьмя краями, а его конструктор выглядит следующим образом: Перспектива (Fov, Aspist, Researd, Far)
FOV соответствует перспективе на рисунке, которая является углом между верхней и нижней стороной. Аспект является соотношением сторон ближней плоскости. Добавляя расстояние почти плоскости вблизи и далеко от дальней плоскости, единственный способ определить визуальную сцену.
Перспективные проекционные камеры очень согласуются с нашим обычным ощущением наблюдения за вещами, поэтому в большинстве случаев мы используем перспективные проекционные камеры, чтобы показать 3D -эффекты.
Объекты
С камерой вы должны что -то посмотреть, верно? Добавьте несколько объектов в сцену.
Есть много объектов для отображения в трех, все из которых унаследованы от класса Object3D. Здесь мы в основном смотрим на сетку и точки.
Сетка
Мы все знаем, что в компьютерном мире дуга подключена с помощью конечной линии сегмента, состоящего из конечных точек. Когда есть много линий, это выглядит как гладкая дуга.
Трехмерная модель в компьютерах аналогична. Обычная практика состоит в том, чтобы описать это с использованием сетки треугольников. Мы называем эту модель моделью сетки.
Это знаменитый Стэнфордский кролик. Его позиция в 3D-графике аналогична позиции Лены, известного поля цифровой обработки изображений.
Посмотрите на этого кролика, поскольку количество треугольников увеличивается, его поверхность становится более плавной/точной.
В трех конструктор сетки заключается в следующем: сетка (геометрия, материал)
Геометрия - это его форма, материал - его материал.
Не только сетка, эти два свойства используются для создания многих объектов. Давайте посмотрим на эти два важных атрибута.
Геометрия
Геометрия, форма, довольно интуитивно понятна. Геометрия использует модель для хранения набора точек и взаимосвязи между точками (которые точки образуют треугольник) для достижения цели описания формы объекта.
Три предоставляют много основных форм, таких как кубики (на самом деле кубоид), плоскости (фактически прямоугольника), сферы, круги, цилиндры и круглые столы;
Вы также можете построить формы, определяя положение каждой точки самостоятельно;
Для более сложных форм мы также можем импортировать их через внешние файлы модели.
Материал
Материал, материал, это не так интуитивно понятно, как форма.
Материал на самом деле является коллекцией всех визуальных атрибутов, кроме формы поверхности объекта, такой как цвет, текстура, гладкость, прозрачность, отражательная способность, показатель преломления и светимость.
Здесь мы поговорим о отношениях между материалом, картой и текстурой.
Материал был упомянут выше, и он включает в себя карты и другие.
Наклейки на самом деле являются «вставкой» и «вставкой», которые включают изображения и где фотографии должны быть опубликованы.
Что касается текстуры, это на самом деле «картина».
Три предлагают различные материалы на выбор, и могут свободно выбрать диффузное/зеркальное отражение и другие материалы.
Точки
Поговорив о сетке, давайте посмотрим на другой объект - очки.
Очки на самом деле являются коллекцией кучу очков. Это называлось частиц в течение долгого времени раньше. Он был переименован в PointCloud в версии R68, и он был переименован в очки в версии R72. Изменение названия в основном связано с тем, что г -н Деуб считает, что системы частиц должны быть полной системой, которая включает обработку частиц и связанные с ними физические свойства, в то время как точки в три гораздо проще. Так что в конечном итоге этот класс назван очками.
Типичный эффект, который точки могут быть использованы для достижения: официальный пример
Свет
Бог сказал: должен быть свет!
Эффект света и тени является важным фактором, который обогащает картину.
Три предоставляют разнообразные источники света, в том числе окружающий световой свет, световой свет точечного света, прожектор Spotlight, направление направления света, свет полушария полушария и другой свет.
Просто добавьте необходимый источник света в сцену.
Рендерер
Различные объекты построены в сцене, свете и камерах, которые наблюдают объекты, пришло время отображать то, что вы видите на экране. Вот что делает рендера.
Рендерер связывает объект Canvas и может устанавливать свойства, такие как размер, цвет фона по умолчанию и т. Д.
Вызовите функцию рендеринга, пропустите сцену и камеру, и вы можете представить изображение в холст.
Сделать картинку двигаться
Теперь можно получить статическую картинку, как она может двигаться?
Очень простая идея состоит в том, чтобы изменить положение, угол и различные свойства объекта в сцене, а затем вызвать функцию рендеринга для рендеринга.
Итак, как вы определяете время повторного рендеринга?
HTML5 предоставляет нам requestAnimframe, который автоматически вызывает обоснованную функцию до каждой страницы.
Если мы сделаем это в начале:
function render () {renderer.render (сцена, камера);}Просто измените это на это:
function render () {requestAnimationFrame (render); Object.position.x += 1; renderer.render (сцена, камера);}Объект может двигаться!
Дать каштану
Давайте используем простой пример, чтобы разобраться с этим процессом.
Во -первых, напишите страницу с элементами холста.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js> </script> </script> </script> </script> </script> </script> </script> </script> </javanli_test/lib/three.min.jn.js> html, тело {маржа: 0; Заполнение: 0; } #three_canvas {position: Absolute; Ширина: 100%; высота: 100%; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> </body> </html>Давайте сделаем часть JavaScript ниже
Первый инициализируйте Renderer
function initrenderer () {width = document.getElementById ('three_canvas'). ClientWidth; height = document.getelementbyid ('three_canvas'). ClientHeight; renderer = new Three.webglrenderer ({// Bind Canvas с рендерингом Canvas: document.getElementById ('three_canvas')}); рендерер. Setize (ширина, высота); // Установить размер рендеринга на то же самое, что и Canvas renderer.setClearcolor (0xffffff, 1.0); // Установить цвет и прозрачность по умолчанию}Сценарий инициализации:
функция initscene () {scene = new Three.Scene ();}Инициализировать камеру:
Function initCamera () {// Простая ортогональная проекционная камера, обращенная к центру просмотра, размер просмотра такой же, как и размер холста. Camera = new Three.othographicCamera (ширина / -2, ширина / 2, высота / 2, высота / -2, 1, 1000); // Установить камеру камеры камеры.position.x = 0; Camera.position.y = 0; Camera.position.z = 200; // Установить камеру вверх камеру вверх. Up.x = 0; Camera.up.y = 1; Camera.up.z = 0; // Установите положение фокусировки камеры (фактически для определения направления) Camera.lookat ({x: 0, y: 0, z: 0});}Чтобы уникально определить положение и направление камеры, три атрибута позиции, вверх и обзор являются необходимыми.
Здесь мы создали ортогональную проекционную камеру. Здесь я держу размер представления в соответствии с разрешением экрана только для удобства, так что длина блока в системе координат соответствует пикселю экрана.
Мы помещаем камеру на ось Z, обращаясь к координатному происхождению, а верхнее направление камеры - ось Y. Обратите внимание, что направление вверх и направление обзора должно быть перпендикулярно (вы узнаете, сравните ли вы с собственной головой).
Вот куб, добавленный к сцене:
function initObject () {// Создать куб с длина боковой длины 100 var geometry = new Three.cubegeometry (100, 100, 100); Object = new Three.Mesh (геометрия, новая Three.meshnormalmaterial ()); Scene.add (Object);}Обратите внимание, что мы используем нормальный материал Meshnormalmaterial , так что цвет каждой поверхности куба связан с направлением, направленным на это лицо, что облегчает наблюдение/отладку.
В этой простой демонстрации я не планирую добавлять световые и теневые эффекты, и нормальный материал не отвечает на свет.
Наконец, создайте петлю анимации
function render () {requestAnimationFrame (render); Object.Rotation.x += 0,05; Object.Rotation.y += 0,05; renderer.render (сцена, камера);}Каждый перекрашенный заставляет куб немного вращаться.
Когда страница загружается, просто вызовите предыдущие функции
function threestart () {initrenderer (); initCamera (); initscene (); initObject (); render ();} window.onload = threestart ();Полная демонстрация выглядит так:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> cube </title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js> </script> </script> </script> </script> </script> </script> </script> </script> </javanli_test/lib/three.min.jn.js> html, тело {маржа: 0; Заполнение: 0; } #three_canvas {position: Absolute; Ширина: 100%; высота: 100%; } </style> </head> <body> <canvas id = "three_canvas"> </canvas> <script> renderer var, камера, сцена, свет, объект; ширина вари, высота; function initrenderer () {width = document.getElementById ('three_canvas'). ClientWidth; height = document.getelementbyid ('three_canvas'). ClientHeight; renderer = new Three.Webglrenderer ({canvas: document.getElementById ('three_canvas')}); рендерер. Setize (ширина, высота); renderer.setClearcolor (0xfffff, 1.0); } function initCamera () {camera = new Three.othographicCamera (ширина / -2, ширина / 2, высота / 2, высота / -2, 1, 1000); Camera.position.x = 0; Camera.position.y = 0; Camera.position.z = 200; Camera.up.x = 0; Camera.up.y = 1; Camera.up.z = 0; Camera.lookat ({x: 0, y: 0, z: 0}); } function initscene () {scene = new Three.Scene (); } function initObject () {var geometry = new Three.cubegeometry (100, 100, 100); Object = new Three.Mesh (геометрия, новая Three.meshnormalmaterial ()); Scene.add (Object); } function render () {requestAnimationFrame (render); Object.Rotation.x += 0,05; Object.Rotation.y += 0,05; renderer.render (сцена, камера); } function threestart () {initrenderer (); initCamera (); initscene (); initObject (); оказывать(); } window.onload = threestart (); </script> </body> </html>После сохранения в качестве HTML, откройте его, такой вращающийся куб будет отображаться в центре экрана.
краткое содержание
Это все для введения Three.js. В этой статье в основном упоминаются важные компоненты в трех. На самом деле, есть много вещей, которые я хочу подвести итог, но написание их в этой статье может показаться громоздким. Первоначальное намерение этой статьи - позволить читателям иметь интуитивное и общее понимание Three.js после прочтения, и не собираются задействовать слишком много деталей.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.