Initially hide the WebGL Canvas, to prevent empty space if rendering breaks

601f4fd5 · baletiballo · 74ac9733 · 601f4fd5 · 601f4fd5
Commit 601f4fd5 authored 3 months ago by baletiballo
--- a/Assets/StreamingAssets/ScrollView_Server/scrollView.html
+++ b/Assets/StreamingAssets/ScrollView_Server/scrollView.html
@@ -45,7 +45,9 @@
 </head>

 <body>
-    <canvas id="math-mind-canvas" width="400" height="300"></canvas>
+    <!-- The canvas is initially hidden, it will be unhidden once the renderer is set up. 
+        So, if that setup fails there is no empty space -->
+    <canvas id="math-mind-canvas" width="400" height="300" hidden></canvas>
    <div id="scrollContainer">
        <scroll-description title='DefaultScroll' alt='No scroll loaded yet'>
            <div>No scroll selected yet.</div>

--- a/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js
+++ b/Assets/StreamingAssets/ScrollView_Server/scroll_interaction/Math_Mind.js
@@ -7,8 +7,9 @@ const camera = new THREE.PerspectiveCamera(75, 4/3, 0.1, 1000);
 const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#math-mind-canvas')
 });
-// renderer.setSize( window.innerWidth, window.innerHeight );
-// document.body.appendChild( renderer.domElement );
+// The canvas is initially hidden, in case the three.js import fails
+// If we reach this code, it obviously didn't
+renderer.domElement.removeAttribute("hidden");
 const controls = new OrbitControls( camera, renderer.domElement );

 const pointGeo = new THREE.SphereGeometry(0.1);