Есть ли ЛЮБОЙ способ сделать смещение камеры Three.js смещенным от центра?

Question

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

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

нормальный рендер

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

желаемый рендер

Если нормальное изображение имеет размер 800x600, то результат, который я себе представляю, будет таким, как если бы я рендерил изображение 1600x1200 с упором в центре, а затем обрезал это нормальное изображение, чтобы осталась только нижняя правая часть.

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

test.moobels.com/temp/cube_angle.jpg

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

Answer 1

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

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

См. Документы: https://threejs.org/docs/.

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

Three.JS R.73

Answer 2

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

Предполагая, что ваш куб 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 и используйте значения для создания нового Vector3:

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

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

Тогда камера смотри

camera.lookAt(xyz);   

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

console.log(xyz);