Оглавление:

Средство просмотра 3D: 4 шага
Средство просмотра 3D: 4 шага

Видео: Средство просмотра 3D: 4 шага

Видео: Средство просмотра 3D: 4 шага
Видео: Лучший способ сделать 3d просмотр товара в Tilda Zero Block | Cappasity в Тильда 2024, Ноябрь
Anonim
3D-просмотрщик
3D-просмотрщик

Привет! Чтобы удовлетворить мой интерес к программированию и, надеюсь, помочь удовлетворить ваш, я хотел бы показать вам программу 3D Viewer, которую я написал на javascript. Если вы хотите углубить свое понимание трехмерных игр или даже создать свою собственную трехмерную игру, этот прототип средства трехмерного просмотра идеально подходит для вас.

Шаг 1: теория

Теория
Теория

Чтобы понять теорию этого средства трехмерного просмотра, вы можете просто изучить то, как вы видите свое окружение (помогает иметь только один значительный источник света). Заметить, что:

  1. Объекты, которые находятся дальше от вас, занимают меньшую часть вашего поля зрения.
  2. Объекты, находящиеся дальше от источника света, кажутся более темными.
  3. По мере того, как поверхности становятся более параллельными (менее перпендикулярными) источнику света, они кажутся более темными.

Я решил изобразить поле зрения связкой линий, идущих из одной точки (аналогично глазному яблоку). Подобно шипу-шипу, линии должны быть равномерно распределены, чтобы гарантировать, что каждая часть поля зрения представлена одинаково. На картинке выше обратите внимание, как линии, идущие от шара с шипами, становятся более разнесенными по мере удаления от центра шара. Это помогает визуализировать реализацию программы наблюдения 1, поскольку плотность линий уменьшается по мере удаления объектов от центральной точки.

Линии - это основная единица зрения в программе, и каждая из них отображается на пиксель на дисплее. Когда линия пересекает объект, соответствующий ему пиксель окрашивается в зависимости от расстояния до источника света и угла от источника света.

Шаг 2: Теория реализации

Теория реализации
Теория реализации

Чтобы упростить программу, источник света совпадает с центральной точкой (глазное яблоко: точка, из которой просматривается карта и откуда исходят линии). Это аналогично тому, как держать свет рядом с вашим лицом, это устраняет тени и позволяет гораздо проще рассчитать яркость каждого пикселя.

Программа также использует сферические координаты с центральной точкой обзора в начале координат. Это позволяет легко создавать линии (каждая с уникальным тета: горизонтальным углом и фи: вертикальным углом) и обеспечивает основу для расчетов. Линии с одинаковой тета сопоставляются с пикселями в той же строке. Физики соответствующих углов увеличиваются в каждом ряду пикселей.

Чтобы упростить математику, трехмерная карта состоит из плоскостей с общей переменной (общие x, y или z), в то время как две другие необщие переменные ограничены диапазоном, завершая определение каждой плоскости.

Чтобы осмотреться с помощью мыши, уравнения программы учитывают вертикальное и горизонтальное вращение во время преобразования между сферической и xyz системой координат. Это дает эффект предварительного формирования вращения на наборе линий обзора «шип-шар».

Шаг 3: математика

Следующие уравнения позволяют программе определить, какие линии пересекают каждый объект, и информацию о каждом пересечении. Я вывел эти уравнения из основных уравнений сферических координат и уравнений двумерного вращения:

r = расстояние, t = тета (горизонтальный угол), p = phi (вертикальный угол), A = вращение вокруг оси Y (вертикальное вращение), B = вращение вокруг оси Z (горизонтальное вращение)

Kx = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * cos (B) -sin (p) * sin (t) * sin (B)

Ky = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * sin (B) + sin (p) * sin (t) * cos (B)

Kz = -sin (p) * cos (t) * sin (A) + cos (p) * cos (A)

х = г * Кх

у = г * Ky

г = г * Kz

г ^ 2 = х ^ 2 + у ^ 2 + г ^ 2

освещение = Klight / r * (Kx или Ky или Kz)

p = arccos ((x * sin (A) * cos (B) + y * sin (A) * sin (B) + z * cos (A)) / r)

t = arccos ((x * cos (B) + y * sin (B) -p * sin (A) * cos (p)) / (r * cos (A) * sin (p)))

Шаг 4: программа

Программа
Программа

Я надеюсь, что этот прототип средства трехмерного просмотра помог вам понять, как работают трехмерные виртуальные реальности. Благодаря некоторому усовершенствованию и написанию кода, эта программа просмотра, безусловно, может быть использована при разработке трехмерных игр.

Рекомендуемые: