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

Question

我正在使用 OrtographicCamera。

A 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);

问题是我添加到场景中的立方体正在被剪切。

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

我想要滚动条，这样我就可以移动到 canvas 的底部，无需缩放即可查看所有立方体。

见截图：

HTML

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

CSS

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

非常感谢任何建议。

Answer 1

你有两件事正在进行。首先是 canvas 需要比客户端 window 大才能显示滚动条。确切的大小取决于您的需要，但请尝试将其从现在的大小加倍。

第二个问题是相机本身有左、右、上、下（以及近和远）平面，它们定义了相机视野内的区域。在设置相机时增加这些值，以获得 canvas 中可见的更多场景。如果您的宽度合适，您可能只能增加 top/bottom。

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

Answer 2

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

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

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

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

How to have a scrolling renderer in ThreeJS?

html

css

scroll

three.js

renderer