Есть ли какой-либо способ, чтобы камера с тремя камерами выглядела не по центру?

Question

Есть ли способ настроить визуализатор Three.js таким образом, чтобы точка обзора камеры не находилась в центре визуализированного изображения?

Чтобы уточнить: изображение сцены с одним кубиком 1x1x1m при (0, 0, 0). Камера находится в точке (0, 0, 10), а точка обзора находится в начале координат, совпадающей с центром куба. Если бы я сделать эту сцену, как это, я мог бы в конечном итоге с чем-то вроде этого:

normal render

Однако я хотел бы быть в состоянии вынести эту сцену таким образом, что точка LookAt находится в верхней левый угол, давая мне что-то вроде этого:

desired render

Если нормальное изображение 800х600, то результат я себе как будто бы я вынес 1600х1200 изображение с LookAt в центре, а затем обрезается, что нормальный чтобы осталась только нижняя правая часть.

Конечно, я могу изменить LookAt, чтобы сделать куб идти в левый верхний угол, но затем я рассматриваю куб под углом, давая мне нежелательный результат:

test.moobels.com /temp/cube_angle.jpg

Я также мог бы отобразить полное изображение 1600x1200 и скрыть 3/4 изображения, но можно было бы надеяться, что есть более элегантное решение. Кто-нибудь знает это?

Answer 1

Вот простое решение:

Предполагая, что ваш куб 4 х 4 х 4, в положении 0, 0, 0: позиция

var geometry = new THREE.BoxGeometry(4, 4, 4); 
var material = new THREE.MeshBasicMaterial({ color: 0x777777 }); 
var cube = new THREE.Mesh(geometry, material); 
cube.position.set(0, 0, 0); 

Получить куба:

var Vx = cube.position.x, 
    Vy = cube.position.y, 
    Vz = cube.position.z; 

Тогда вычесть на 2 из позиции x, затем добавить 2 к позиции y и z и использовать значения для создания нового вектора 3:

var newVx = Vx - 2, 
    newVy = Vy + 2; 
    newVz = Vz + 2; 

var xyz = new THREE.Vector3(newVx, newVy, newVz) 

Затем камера LookAt:

camera.lookAt(xyz); 

Использование журнала консоли, это будет свидетельствовать о том, что камера теперь смотрит на -2, 2, 2, который является верхней левой части куба.

console.log(xyz); 

Answer 2

Если вы хотите, чтобы ваши перспективы камеры, чтобы иметь вид вне центра, шаблон вам нужно использовать это:

camera = new THREE.PerspectiveCamera(for, aspect, near, far); 
camera.setViewOffset(fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight); 

Смотрите документацию: https://threejs.org/docs/#api/cameras/PerspectiveCamera

Вы можете найти примеры это использование в this example и this example.

Three.js R.73