如何在 ThreeJS 中有一个滚动渲染器？答案

【问题标题】：How to have a scrolling renderer in ThreeJS?如何在 ThreeJS 中有一个滚动渲染器？
【发布时间】：2017-05-01 15:24:32
【问题描述】：

我正在使用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%;
}

非常感谢任何建议。

【问题讨论】：

标签： html css scroll three.js renderer

【解决方案1】：

你有两件事发生。首先是画布需要大于客户端窗口才能显示滚动条。具体大小取决于您的需求，但请尝试将您现在的大小翻倍。

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

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

【讨论】：

【解决方案2】：

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

根本不需要摆弄画布元素。这很好，因为在 CSS 中控制画布大小有点困难，而且当涉及到滚动并将其附加到 ThreeJS 渲染器时，情况会更加困难。

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

【讨论】：