如何在ThreeJS中使用滚动渲染器？

Question

我正在使用OrtographicCamera。

在HTML中声明canvas，我将其传递给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

你有两件事情在继续。第一个是画布需要大于客户端窗口才能显示滚动条。确切的大小取决于您的需求，但请尝试将其与您现有的相加。

第二个问题是相机本身具有左，右，上，下（以及近和远）平面，这些平面定义了相机视图内的区域。设置相机时增加这些值，以获得画布中可见的更多场景。如果你的宽度很好，你可能只能增加顶部/底部。

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

Answer 2

我使用了轨道控制并设法得到了我想要的东西，也就是说，能够看到场景中的隐藏物体。用户只需向下按箭头并向上箭头即可向上移动摄像机。

根本不需要使用canvas元素。这很好，因为在涉及滚动并将其附加到ThreeJS渲染器时，控制CSS中的画布大小有点困难和更多。

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