Examples: Hide scrollbars in webgl_effects_ascii.

[linbingquan]

Related issue: #XXXX

Description

1. Add CSS to hidden the scrollbar for body.

Before	After

2. Used OrbitControls to replace TrackballControls.

I feel OrbitControls is easier to use than TrackballControls.
TBH, I rarely use TrackballControls.
If there is a problem, I will cancel the second change.

[Mugen87]

I think there is no need to replace the controls. The CSS fix is of course good.

[WestLangley]

Yes, I think the controls should be replaced with OrbitControls. TrackballControls is not appropriate for this scene.

Then, controls.update() is not needed. (Or retain it and add damping.)

[linbingquan]

The CSS fix is of course good.

I just only keep CSS fix, I think this PR will be easier to merge.

I think there is no need to replace the controls.
I think the controls should be replaced with OrbitControls.

Thank you for your reply, the controls code is a little controversial. Let's keep it the same.

[mrdoob]

Doing body { overflow: hidden; } tends to not be the right solution, but it's a way to hide the problem.

We used to have that in all the examples until we realized the proper solution was doing canvas.style.display = 'block'; inside WebGLRenderer.

[Mugen87]

I've tried that but unfortunately it does not work with AsciiEffect. Depending on the effect's options resolution and scale, the domElement might differ in size which makes it impossible to match it to the defined size via setSize().

[mrdoob]

This seems to do the trick...

diff --git a/examples/jsm/effects/AsciiEffect.js b/examples/jsm/effects/AsciiEffect.js
index 1ad06a4b45..af5eb7f02e 100644
--- a/examples/jsm/effects/AsciiEffect.js
+++ b/examples/jsm/effects/AsciiEffect.js
@@ -59,8 +59,8 @@ class AsciiEffect {
 
 		function initAsciiSize() {
 
-			iWidth = Math.round( width * fResolution );
-			iHeight = Math.round( height * fResolution );
+			iWidth = Math.floor( width * fResolution );
+			iHeight = Math.floor( height * fResolution );
 
 			oCanvas.width = iWidth;
 			oCanvas.height = iHeight;
@@ -81,9 +81,6 @@ class AsciiEffect {
 			oAscii.cellPadding = 0;
 
 			const oStyle = oAscii.style;
-			oStyle.display = 'inline';
-			oStyle.width = Math.round( iWidth / fResolution * iScale ) + 'px';
-			oStyle.height = Math.round( iHeight / fResolution * iScale ) + 'px';
 			oStyle.whiteSpace = 'pre';
 			oStyle.margin = '0px';
 			oStyle.padding = '0px';
@@ -251,7 +248,7 @@ class AsciiEffect {
 
 			}
 
-			oAscii.innerHTML = '<tr><td>' + strChars + '</td></tr>';
+			oAscii.innerHTML = `<tr><td style="display:block;width:${width}px;height:${height}px;overflow:hidden">${strChars}</td></tr>`;
 
 			// console.timeEnd('rendering');
 

[Mugen87]

Cool! I can confirm the scroll bars go away with these changes, too!

[Mugen87]

@linbingquan Would you mind updating the PR according to @mrdoob's suggestion?

[linbingquan]

Would you mind updating the PR according to @mrdoob's suggestion?

I'm willing to give it a try.

I found body { overflow: hidden; } is unnecessary with mrdoob's suggestion code.

[Mugen87]

I found body { overflow: hidden; } is unnecessary with mrdoob's suggestion code.

Yes, so the modifications to the example can be reverted.

[linbingquan]

Yes, so the modifications to the example can be reverted.

Done.