How to have a scrolling renderer in ThreeJS?
<p>I'm using the <code>OrtographicCamera</code>.</p>

<p>A <code>canvas</code> is declared in HTML and I pass it to the <code>renderer</code> as shown below:</p>

<pre><code>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);
</code></pre>

<p>The problem is that the cubes I'm adding to the scene are being cut.</p>

<p>The scene is growing and has a height bigger than the available viewport's height. </p>

<p>I'd like to have scrollbars so that I can move to the bottom of the canvas and see all the cubes without having to zoom.</p>

<p>See the screenshot:</p>

<p><a href="https://i.stack.imgur.com/zJphl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zJphl.png" alt="enter image description here"></a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="container"&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#canvas
{
    width: 100%;
    height: 100%;
}
</code></pre>

<p>Any advice is really appreciated.</p>