Как иметь средство просмотра прокрутки в ThreeJS?

Question

Я использую OrtographicCamera.

canvas объявлен в HTML, и я передать его renderer, как показано ниже:

var canvas = document.getElementById("canvas") 

var width = canvas.clientWidth; 
var height = canvas.clientHeight; 

renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: canvas 
}); 

renderer.setClearColor(0xf0f0f0); 
renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(width, height); 

Проблема заключается в том, что кубы я добавляю на сцену рубят.

Сцена растет и имеет высоту, большую, чем высота доступного видового экрана.

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

Смотрите скриншот:

HTML

<div id="container"> 
    <canvas id="canvas"></canvas> 
</div> 

CSS

#canvas 
{ 
    width: 100%; 
    height: 100%; 
} 

Любые советы действительно ценят д.

Answer 1

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

Не нужно вообще возиться с элементом холста. Это хорошо, потому что контроль размера холста в CSS немного сложнее и гораздо больше, когда есть прокрутка и привязка к рендерингу ThreeJS.

https://github.com/mattdesl/three-orbit-controls

Answer 2

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

Вторая проблема заключается в том, что сама камера имеет левые, правые, верхние и нижние (а также ближние и дальние) плоскости, которые определяют область в пределах камеры. Увеличьте эти значения при настройке камеры, чтобы получить больше сцены, видимой на холсте. Если ваша ширина в порядке, вы можете увеличить только верх/низ.

https://threejs.org/docs/api/cameras/OrthographicCamera.html