CODEWITHSUNDEEP
htmlcssscrollthree.jsrenderer
Leniel Maccaferri
Leniel Maccaferri

Reputation: 102428

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.

Upvotes: 1

Views: 1931

Answers (2)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102428

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

Upvotes: 0

Hectate
Hectate

Reputation: 212

You have two things going on. The first is that the canvas needs to be larger than the client window to get scrollbars to show up. The exact size depends on your needs, but try doubling it from what you have now.

The second issue is going to be that the camera itself has left, right, top, and bottom (as well as near and far) planes that define the area within the camera's view. Increase those values when setting up the camera to get more of the scene visible in the canvas. If your width is fine, you may be able to only increase the top/bottom instead.

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

Upvotes: 1

Related Questions