fix horizontal scrollbar on certain pages

threejs/lessons/resources/lesson.css

@@ -80,7 +80,7 @@ div[data-diagram] {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   z-index: -100;
 }

threejs/lessons/resources/threejs-lesson-utils.js

@@ -7,7 +7,10 @@ export const threejsLessonUtils = {
     if (this.renderer) {
       return;
     }
-    const canvas = document.querySelector('#c');
+
+    const canvas = document.createElement('canvas');
+    canvas.id = 'c';
+    document.body.appendChild(canvas);
     const renderer = new THREE.WebGLRenderer({
       canvas,
       alpha: true,
@@ -36,7 +39,7 @@ export const threejsLessonUtils = {
     const render = (time) => {
       time *= 0.001;
 
-      resizeRendererToDisplaySize(renderer);
+      const resized = resizeRendererToDisplaySize(renderer);
 
       renderer.setScissorTest(false);
 
@@ -62,7 +65,7 @@ export const threejsLessonUtils = {
       renderer.domElement.style.transform = transform;
 
       this.renderFuncs.forEach((fn) => {
-        fn(renderer, time);
+        fn(renderer, time, resized);
       });
 
       requestAnimationFrame(render);
@@ -177,8 +180,8 @@ export const threejsLessonUtils = {
         return;
       }
 
-      renderInfo.width = (rect.right - rect.left) * this.pixelRatio;
-      renderInfo.height = (rect.bottom - rect.top) * this.pixelRatio;
+      renderInfo.width = rect.width * this.pixelRatio;
+      renderInfo.height = rect.height * this.pixelRatio;
       renderInfo.left = rect.left * this.pixelRatio;
       renderInfo.bottom = (renderer.domElement.clientHeight - rect.bottom) * this.pixelRatio;
 

threejs/lessons/ru/threejs-primitives.md

@@ -329,6 +329,5 @@ function addLineGeometry(x, y, geometry) {
 
 Далее давайте рассмотрим [как работает граф сцены и как его использовать](threejs-scenegraph.html).
 
-<canvas id="c"></canvas>
 <script type="module" src="../resources/threejs-primitives.js"></script>
 <link rel="stylesheet" href="../resources/threejs-primitives.css">

threejs/lessons/ru/threejs-textures.md

@@ -615,6 +615,5 @@ metalness
 roughness
 -->
 
-<canvas id="c"></canvas>
 <script type="module" src="../resources/threejs-textures.js"></script>
 <link rel="stylesheet" href="../resources/threejs-textures.css">

threejs/lessons/threejs-primitives.md

@@ -398,7 +398,6 @@ or [custom BufferGeometry](threejs-custom-buffergeometry.html).
 Next up let's go over [how three's scene graph works and how
 to use it](threejs-scenegraph.html).
 
-<canvas id="c"></canvas>
 <link rel="stylesheet" href="resources/threejs-primitives.css">
 <script type="module" src="resources/threejs-primitives.js"></script>
 

threejs/lessons/threejs-textures.md

@@ -624,6 +624,5 @@ metalness
 roughness
 -->
 
-<canvas id="c"></canvas>
 <link rel="stylesheet" href="resources/threejs-textures.css">
 <script type="module" src="resources/threejs-textures.js"></script>