Способы мышления с 3D-пространством

Question

У меня есть фон webdevelopers, и теперь я создаю простой 2D-скроллер с тремя .js. Несмотря на то, что я делаю 2D-игру, я нарисую ее в 3D-пространстве, чтобы сделать простое преобразование в 3D, когда время кажется мне правильным. Почему я выбрал Three.js? Ну, это JavaScript, и поскольку мне нравится создавать для Интернета и изучать новые технологии, было бы интересно сделать это на языке, который я уже знаю.

Но теперь к моей проблеме. Это не совсем техническая проблема, но поскольку я новичок в 3D-пространстве, это скорее способ мышления. Я привык думать в пиксельных или процентных (относительных) размерах при работе с сетью, и это всегда 2 оси (X/Y), а точнее ширина/высота. Но 3D-пространство, камера и перспективы дают мне головную боль, поскольку я не привык к этому.

Как я могу думать о размерах в трехмерном пространстве? Камера имеет поле зрения 45 градусов на холсте 800х600. Фрукт - 1 (около) и 1000 (далеко). Означает ли это, что если объект близок (1) и имеет размер 800x600, он фактически заполнит холст?

Ну, как вы можете видеть, я новичок в этом и способ мышления в 3D-пространстве, и это новый дерн для меня.

Answer 1

Вам нужна большая геометрия и тригонометрия. Например, в евклидовом пространстве существует неравенство треугольника.

Answer 2

Вы должны думать в терминах тригонометрии.

Объекты, расположенные ближе к ближней плоскости, должны быть меньше объектов, расположенных ближе к дальней плоскости, чтобы заполнить ваш холст.

В вашем случае, каков размер объекта в ближней плоскости, который заполняет холст?

Просто отметьте, что с полем зрения 45 градусов угол с вершиной в камере и конечные точки в центре и в верхней части ближней плоскости составляет 22,5 градуса, справа ?.

Затем, если расстояние от объекта до камеры составляет 1 (около плоскости), высота этого объекта, чтобы заполнить расстояние от центра до верхней части холста, равна: tan (22,5). Таким образом, высота объекта для заполнения холста должна быть: 2 * tan (22.5). В целом:

 height = 2 * distance_object_camera * tan(field_of_view/2) 

Также обратите внимание, что этот результат не зависит от размера используемого холста.

Answer 3

Выберите масштаб, который соответствует вашему проекту, а затем настройте параметры камеры, чтобы иметь хороший вид на то, что вы хотите показать. Таким образом, вы можете думать о размерах и позициях, как в реальном мире. .

1 единица = 1 м - очень распространенное соглашение, но на самом деле это может быть все, что вам нравится, если оно последовательное. Если вы в основном занимаетесь микроскопическими вещами, возможно, мышление 1 мм в качестве базового блока более уместно. Three.js не нужно знать или заботиться о вашей системе единиц. Но, например, попытка моделировать целую планету с единицами 1 мм привела бы к таким огромным значениям, которые вы, вероятно, столкнетесь с проблемами, связанными с тем, как работают числа с плавающей запятой.

Разрешение экрана и тому подобное не имеют здесь существенной значимости, в отличие от растровой графики. Если вам действительно нужно идеальное позиционирование пикселей, связанное с дисплеем (например, настройка размера объекта или настройка камеры, чтобы объект заполнил экран или отображался в определенном размере пикселя), это возможно, но часто включает в себя довольно много математики.

Трудно дать определенный ответ математической части, существует множество различных вариантов использования, вопросов и ответов на эти конкретные ситуации.

Вы также можете подумать о том, чтобы использовать OrtographicCamera, чтобы иметь строго 2D (без перспективы) вид на 3D-сцену. Это также облегчило бы определение местоположения пикселов и расположения экрана и размера.