如何在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);

问题是，我添加到现场的立方体正在被切割。

场景正在增长，其高度大于可用视口的高度。

我想要滚动条，这样我就可以移动到画布底部，看到所有的立方体而不必缩放。

见截图：

​

​

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

CSS

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

任何建议都是非常感谢的。

Answer 1

我使用了轨道控制，并设法得到了我想要的，那就是，能够看到隐藏的物体在现场。用户只需按箭头向下和箭头向上移动相机向下\向上。

根本不需要摆弄画布元素。这很好，因为在CSS中控制画布大小是有点困难的，而且当涉及到滚动并将其附加到ThreeJS呈现程序时，控制要困难得多。

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

Answer 2

你有两件事要做。首先，画布需要大于客户端窗口才能显示滚动条。确切的尺寸取决于你的需求，但是试着把它比现在的多一倍。

第二个问题是，相机本身有左、右、上、下(以及近和远)飞机，这些飞机定义了摄像机视野内的区域。增加这些值时，设置相机，以获得更多的场景可见在画布。如果您的宽度很好，您可能只能增加顶部/底部，而不是。

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