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

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

场景正在增长并且高度大于可用视口(viewport)的高度。

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

看截图:

HTML

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

CSS

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

非常感谢任何建议。

Answer 1

你有两件事正在发生。首先是 Canvas 需要比客户端窗口大才能显示滚动条。确切的大小取决于您的需要，但请尝试将其从现在的大小翻倍。

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

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