Проект от 2D до 3D с помощью Three.js

Question

Как бы проектировать 2D-координаты на 3D?

Например, у меня есть изображение (представленное как частица), ширина которого составляет 256 пикселей. Если я притворяюсь, что это изображение центрировано по началу (0,0) в 2D-пространстве, то вертикальные стороны квадрата расположены в x = 128 и x = -128.

Итак, когда это изображение (частица) помещается в сцену Three.js в начале координат (0,0), а камера находится на расстоянии CamZ от начала координат, то как мне проектировать исходные 2D-координаты в 3D, в крачке скажет мне, что ширина изображения (частица!) появляется на экране в единицах three.js.

Answer 1

Легко понять способ будет создавать геометрию с вершинами в -128, 128, 0, 128, 128, 0, -128, -128, 0 и 128, -128, 0. Затем используйте Projector для проецирования этой геометрии с помощью камеры. Он даст вам массив прогнозируемых точек, которые должны быть от -1 до 1. Затем вам нужно будет умножить это на размер области просмотра.

Answer 2

Существует другой способ сделать это. Точный перевод между 2D и 3D может быть аппроксимирован эвристически. Часто это сложнее реализовать, чем использование three.js для проецирования вектора, но с экспоненциальным переводом вы можете сопоставить много 2D/3D-переводов.

Идея здесь заключается в использовании функции экспоненциального ослабления для вычисления перевода. Функции ослабления, используемые большинством библиотек (например, пользовательский интерфейс jQuery), равны Robert Penner Easing functions.

Функция easeOutExpo работает на удивление хорошо при приближении 2D/3D-переводов. Вообще-то это будет выглядеть примерно так:

// easeOutExpo(time, base, change, duration) 
var xPosition3D = xPosition2D * expo(xPosition2D, 0, coefficient, xMax2D); 

Это занимает совместное эффективное и точное количество будет зависеть от соотношения сторон и фокусного расстояния 3D-камеры. Обычно что-то вроде -.2 работает хорошо.

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