Search code examples
htmlcssscrollthree.jsrenderer

How to have a scrolling renderer in ThreeJS?

I'm using the OrtographicCamera.

A canvas is declared in HTML and I pass it to the renderer as shown below:

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

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

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

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.

See the screenshot:

enter image description here

HTML

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

CSS

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

Any advice is really appreciated.

Solution

  • I used orbitcontrols and managed to get what I wanted, that is, being able to see the hidden objects in the scene. The user just have to press arrow down and arrow up to move the camera down\up.

    No need to fiddle with the canvas element at all. That's good because controlling the canvas size in CSS is a bit hard and much more when there's scrolling involved and having it attached to ThreeJS renderer.

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