Об авторе:Чжу Хайян, старший инженер, возглавляет группу по доходам от членства в QQ отдела продуктов с добавленной стоимостью. конечная архитектура.
Введение
С развитием программного и аппаратного обеспечения условия для разработки веб-3D на ПК и мобильных браузерах в основном созрели, и появилось много 3D-библиотек js.Treejs является лидером в 3D-библиотеках js. Есть и отечественные компании, которые начали пробовать некоторые приложения.В 2016 году некий клад Double 11 использовал ThreeJS для создания относительно крутой 3D промо-страницы, которая взорвала круг друзей.
На следующем рисунке показан снимок экрана с анимацией 3D-куба, нарисованной с помощью Threejs. В этой демонстрации куб будет вращаться динамически. 30 строк кода ThreeJS могут завершить такую демонстрацию. Threejs позволяет разработчикам веб-интерфейса, не имеющим большого опыта 3D-программирования, быстро приступить к разработке веб-3D-приложений.
Что такое триджс
Введение в Threejs на официальном сайте очень простое: «Javascript 3D-библиотека». openGL — это кроссплатформенный стандарт 3D/2D-рисования, а WebGL — это реализация openGL в браузере. Интерфейсные веб-разработчики могут программировать непосредственно с помощью интерфейса WebGL, но WebGL — это лишь очень простой API для рисования, требующий от программистов больших математических знаний и знаний в области рисования для выполнения задач 3D-программирования, а объем кода огромен. Threejs инкапсулирует WebGL, позволяя разработчикам интерфейса легко разрабатывать веб-3D без необходимости овладевать большим количеством математических знаний и навыков рисования, снижая порог и значительно повышая эффективность.
Пример сценария приложения Threejs
1. Веб-3D-игры
2. Отображение 3D-модели
В примере на рисунке ниже пользователь может взаимодействовать с браузером, просматривать автомобиль на 360 градусов с помощью мыши, щелкать дверь, чтобы сесть в автомобиль, и просматривать трехмерный вид автомобиля, как если бы они находились на сцена.
3. Визуализация данных
4. веб вр
Основные элементы Threejs
Программирование 3D сильно отличается от программирования 2D, поэтому вам необходимо освоить некоторые основные концепции программирования 3D. К базовым элементам Threejs относятся следующие аспекты: сцена, камера, свет, объект.
Сцена: трехмерное пространство, контейнер для всех предметов. Сцену можно представить как пустую комнату, а затем мы разместим в ней объекты, камеры и источники света.
Камера: Threejs должен добавить в сцену камеру. Камера используется для определения положения, направления и угла просмотра. То, что видит камера, это то, что мы в конечном итоге видим на экране. Во время работы программы можно регулировать положение, направление и угол камеры. Представьте, что в комнате стоит камера, вас нет в комнате, но вы можете управлять движением камеры удаленно, а изображение, которое камера выводит на удаленный компьютер, — это изображение, которое Threejs выводит на экран.
Свет: если света нет, камера ничего не видит, поэтому в сцену необходимо добавить источник света. Чтобы быть ближе к реальному миру, Threejs поддерживает моделирование различных источников света и отображение различных световых эффектов, таких как точечные источники света, параллельные источники света, точечные источники света и т. д.
Объект: С помощью сцены, камеры и света вы можете размещать объекты на сцене. В Threejs объект состоит из двух частей: формы и материала. Форма определяет контур объекта, а материал - это материал и текстура. объекта.
оказывать
То, что рисует Threejs, в конечном итоге должно отображаться на прямоугольном холсте на экране. Чтобы добиться эффекта анимации, нам нужен механизм перерисовки. Из-за проблемы скорости отклика зрительных нейронов после исчезновения изображения оно все еще остается в человеческом глазу в течение 1/24 секунды.Пока количество кадров, отрисованных за одну секунду, превышает 24, плавная анимация эффекта можно добиться. Threejs предоставляет интерфейс перерисовки, у нас есть два способа вызвать интерфейс для перерисовки. Одним из них является setInterval, который вызывается через фиксированный интервал времени, его можно использовать в сценариях, где у нас высокие требования к рендерингу кадров, но на самом деле, поскольку Javascript является однопоточным, этот метод не может гарантировать 100% вызовов одновременно. time interval. , если браузер занят, это может вызвать отложенное выполнение setInterval; второй метод — requestAnimationFrame, который позволяет браузеру решать, когда перерисовывать в соответствии с текущей загрузкой ЦП и другими условиями для достижения наилучшей частоты кадров.
Место нахождения
Для облегчения описания позиции введена система координат, Threejs использует правостороннюю систему координат, как показано на следующем рисунке. Начало системы координат находится в геометрическом центре визуализированного холста. Наше описание положения объекта также относится к положению геометрического центра объекта.
камера
Есть два типа камер: камеры ортогональной проекции и камеры перспективной проекции. Перспективная проекция такая же, как и мир, видимый человеческим глазом, ближний и дальний малый; орфографическая проекция имеет одинаковый размер вдали и вблизи, а параллельные линии в трехмерном пространстве должны быть параллельны при проецировании в двухмерное пространство. Большинство сцен подходят для использования перспективной проекционной камеры, потому что эффект наблюдения такой же, как и в реальном мире; при отображении, моделировании и других сценах подходит использование ортогональной проекционной камеры, которая удобна для наблюдения за соотношением размеров между модели.
Камера в Threejs не совсем такая, как в реальной камере, здесь видимая область камеры — это куб, называемый объёмом сцены камеры.
Ортогональная проекционная камера
Тело вида представляет собой прямоугольный параллелепипед, который определяется 6 параметрами: THREE.OrthographicCamera(слева, справа, сверху, снизу, рядом, далеко), эти 6 параметров определяют левое, правое, верхнее, нижнее, переднее положение тела вида камеры. , положение последних шести граней.
перспективная проекционная камера
Тело вида представляет собой трапецию, определяемую четырьмя параметрами: THREE.PerspectiveCamera(fov, аспект, ближний, дальний)
fov — вертикальный угол камеры, аспект — соотношение сторон, а именно ширина/высота, которое обычно задается соотношением сторон холста, а ближняя и дальняя — расстояния между ближней и дальней плоскостями и камерой соответственно .
размер проекции
Рассмотрим относительно простую сцену: дальняя и ближняя плоскости тела представления камеры параллельны плоскости xy в системе координат, так что содержимое дальней и ближней плоскостей тела представления можно просто вертикально спроецировать на холст. а тело представления параллельно плоскости xy.Любая плоскость, спроецированная на холст, точно равна размеру холста. Если размер ближней плоскости камеры перспективной проекции равен axb, а размер дальней плоскости равен 2ax2b, то на ближнюю плоскость помещается лист бумаги размером axb, который при проецировании на холст как раз закрывает весь холст; занимает 1/4 площади холста (дальняя плоскость имеет в 4 раза больше площади ближней плоскости). Именно потому, что объект обзора перспективной проекционной камеры мал и далеко простирается, это приведет к тому, что один и тот же объект будет помещен в разные положения, чтобы показать эффект близости и дальности. Орфографическая проекционная камера имеет одинаковый размер дальней и ближней плоскостей, поэтому расстояние от камеры до одного и того же объекта не влияет на размер объекта, проецируемого на полотно.
объект
Объекты состоят из геометрии и материала. Одна и та же геометрическая форма, разные материалы составляют разные объекты, такие как сферический, баскетбольный, стеклянный шар, хрустальный шар и так далее.
форма
Threejs предоставляет некоторые общие геометрические формы, в том числе трехмерные и двухмерные, трехмерные, такие как параллелепипед, сфера, цилиндр, кольцо и т. д., двумерные, такие как прямоугольник, круг, веер и т. д. Если формы, предоставленные по умолчанию, не соответствуют вашим потребностям, вы также можете настроить их.Вы можете рисовать собственные геометрические фигуры, определяя линии между вершинами и вершинами.Более сложные модели также можно моделировать с помощью программного обеспечения для моделирования, а затем импортировать.
Как компьютеры рисуют геометрические фигуры? Мы знаем, что компьютеры могут рисовать только прямые линии, так как же рисовать кривые и трехмерные фигуры?
1. Нарисуйте круг. Как показано на рисунке ниже, при рисовании многоугольника достигается приблизительно круговой эффект.Когда количество сторон многоугольника достаточно, переход между двумя сторонами выглядит плавным, и многоугольник выглядит достаточно круглым.
2. Нарисуйте 3D-модель. Обычной практикой является использование сетки, состоящей из треугольников, для имитации, как показано на рисунке ниже. Когда используется достаточное количество треугольников, тело кролика выглядит достаточно гладким, что ближе к реальному кролику. Знаменитая модель Стэнфордского кролика использует 69 451 треугольник.
материал
Threejs предоставляет несколько репрезентативных материалов.Обычно используемые материалы — диффузное отражение и зеркальное отражение.Вы также можете импортировать внешние изображения и вставлять их на поверхность объектов, называемых текстурными картами.
внешняя модель
Реальный мир богат и красочен, что не может быть выражено геометрическими формами и материалами Threejs по умолчанию.В практических приложениях часто используются внешние модели.Программное обеспечение 3D-моделирования используется для построения 3D-модели объекта и экспорта файла модели. , и Threejs импортирует файл модели для использования.
освещение
Источники света в основном следующие: 1) окружающий свет, яркость, наблюдаемая со всех сторон, одинакова, обычно используется для указания базовой яркости для всей сцены без четкого положения источника света; 2) точечный источник света, источник света, излучаемый точкой, согласно Яркость к поверхности разных предметов убывает линейно; 3) параллельный свет, яркость не имеет ничего общего с расстоянием между источником света и предметом, только угол параллели свет и плоскость, на которой находится предмет; 4) прожектор, спроецированный, подобен световому конусу.
резюме
В этой статье дается краткое введение в программирование на Threejs, цель — дать читателям базовое представление о программировании на Threejs. На бумаге в конце концов я чувствую себя мелким, и я абсолютно точно знаю, что это дело должно быть сделано! Рекомендуется перейти на домашнюю страницу официального сайта Threejs, чтобы увидеть эти интересные демонстрации, и начать писать несколько простых демонстраций для практики. В настоящее время веб-приложения 3D не используются в больших масштабах из-за производительности браузерного рендеринга и большого размера модели, они используются только в некоторых областях, таких как продвижение бренда. Я только что испытал процесс изменения 2D-визуализации данных в браузере с флэш-памяти на JS (примерно в 2012 г.) Я считаю, что с улучшением производительности программного и аппаратного обеспечения и повышением скорости сети веб-приложения 3D будут постепенно продвигаться и использоваться. .
Статья из публичного аккаунта Xiaoguang Tea Club