Switch all references to zNear Zfar to near far

threejs/background.html

@@ -42,9 +42,9 @@ function main() {
 
   const aspect = 2;  // the canvas default
   const fov = 35;
-  const zNear = 0.1;
-  const zFar = 5000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.x = -0.;
   camera.position.y = 350;
   camera.position.z = 40.;

threejs/lessons/resources/frustum-3d.svg

@@ -57,11 +57,11 @@
             <path d="M268.458,558.348C288.79,525.842 354.8,502 433,502C511.2,502 577.21,525.842 597.542,558.348C552.951,545.022 495.572,537 433,537C370.428,537 313.049,545.022 268.458,558.348Z" style="stroke:rgb(146,146,146);stroke-width:3.56px;"/>
         </g>
     </g>
-    <g transform="matrix(0.451826,0.00669686,-0.00669686,0.451826,-756.233,-852.788)">
-        <text x="1932.37px" y="2074.34px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:101.279px;fill:rgb(0,59,255);">zFar</text>
+    <g transform="matrix(0.451826,0.00669686,-0.00669686,0.451826,-703.233,-850.788)">
+        <text x="1932.37px" y="2074.34px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:101.279px;fill:rgb(0,59,255);">far</text>
     </g>
-    <g transform="matrix(0.451826,0.00669686,-0.00669686,0.451826,-831.517,-741.628)">
-        <text x="1932.37px" y="2074.34px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:101.279px;fill:rgb(42,170,74);">zNear</text>
+    <g transform="matrix(0.451826,0.00669686,-0.00669686,0.451826,-803.517,-741.628)">
+        <text x="1932.37px" y="2074.34px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:101.279px;fill:rgb(42,170,74);">near</text>
     </g>
     <g transform="matrix(0.451826,0.00669686,-0.00669686,0.451826,-585.526,-533.656)">
         <text x="1932.37px" y="2074.34px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:101.279px;fill:rgb(255,0,48);">fov</text>

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

@@ -80,9 +80,9 @@ window.threejsLessonUtils = {
     const scene = new THREE.Scene();
     let targetFOVDeg = 60;
     const aspect = 1;
-    const zNear = 0.1;
-    const zFar = 50;
-    let camera = new THREE.PerspectiveCamera(targetFOVDeg, aspect, zNear, zFar);
+    const near = 0.1;
+    const far = 50;
+    let camera = new THREE.PerspectiveCamera(targetFOVDeg, aspect, near, far);
     camera.position.z = 15;
     scene.add(camera);
 

threejs/lessons/resources/threejs-textures.js

@@ -144,7 +144,7 @@
       async create(props) {
         const { scene, camera, renderInfo } = props;
         scene.background = new THREE.Color('black');
-        camera.zFar = 150;
+        camera.far = 150;
         const texture = await filterTexturePromise;
         const root = new THREE.Object3D();
         const depth = 50;

threejs/lessons/threejs-fog.md

@@ -150,12 +150,12 @@ We can then add it like this
   scene.background = new THREE.Color(color);
 +
 +  const fogGUIHelper = new FogGUIHelper(scene.fog);
-+  gui.add(fogGUIHelper, 'near', zNear, zFar).listen();
-+  gui.add(fogGUIHelper, 'far', zNear, zFar).listen();
++  gui.add(fogGUIHelper, 'near', near, far).listen();
++  gui.add(fogGUIHelper, 'far', near, far).listen();
 }
 ```
 
-The `zNear` and `zFar` parameter set the minimum and maximum values
+The `near` and `far` parameter set the minimum and maximum values
 for adjusting the fog. They are set when we setup the camera.
 
 The `.listen()` at the end of the last 2 lines tells dat.GUI to *listen*
@@ -222,8 +222,8 @@ We then call `gui.addColor` to add a color UI for our helper's virutal property.
   scene.background = new THREE.Color(color);
 
 *  const fogGUIHelper = new FogGUIHelper(scene.fog, scene.background);
-  gui.add(fogGUIHelper, 'near', zNear, zFar).listen();
-  gui.add(fogGUIHelper, 'far', zNear, zFar).listen();
+  gui.add(fogGUIHelper, 'near', near, far).listen();
+  gui.add(fogGUIHelper, 'far', near, far).listen();
 +  gui.addColor(fogGUIHelper, 'color');
 }
 ```

threejs/lessons/threejs-fundamentals.md

@@ -70,9 +70,9 @@ Next up we need a camera.
 ```
 const fov = 75;
 const aspect = 2;  // the canvas default
-const zNear = 0.1;
-const zFar = 5;
-const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+const near = 0.1;
+const far = 5;
+const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 ```
 
 `fov` is short for `field of view`. In this case 75 degrees in the vertical
@@ -83,7 +83,7 @@ reason the perspective camera takes degrees.
 in another article but by default a canvas is 300x150 pixels which makes
 the aspect 300/150 or 2.
 
-`zNear` and `zFar` represent the space in front of the camera
+`near` and `far` represent the space in front of the camera
 that will be rendered. Anything before that range or after that range
 will be clipped (not drawn).
 
@@ -94,7 +94,7 @@ cube, prism, frustum.
 
 <img src="resources/frustum-3d.svg" width="500" class="threejs_center"/>
 
-The height of the zNear and zFar planes are determined by the field of view.
+The height of the near and far planes are determined by the field of view.
 The width of both planes is determined by the field of view and the aspect.
 
 Anything inside the defined frustum will be be drawn. Anything outside

threejs/lessons/threejs-lights.md

@@ -16,9 +16,9 @@ and we'll move the camera 10 units up and 20 units back from the origin
 ```javascript
 *const fov = 45;
 const aspect = 2;  // the canvas default
-const zNear = 0.1;
-*const zFar = 100;
-const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+const near = 0.1;
+*const far = 100;
+const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 +camera.position.set(0, 10, 20);
 ```
 

threejs/lessons/threejs-primitives.md

@@ -95,10 +95,10 @@ objects.
 -const fov = 75;
 +const fov = 40;
 const aspect = 2;  // the canvas default
-const zNear = 0.1;
--const zFar = 5;
-+const zFar = 1000;
-const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+const near = 0.1;
+-const far = 5;
++const far = 1000;
+const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 -camera.position.z = 2;
 +camera.position.z = 120;
 ```

threejs/lessons/threejs-scenegraph.md

@@ -94,7 +94,7 @@ camera. For most situations positive Y being up is good enough but since
 we are looking straight down we need to tell the camera that positive Z is up.
 
 ```
-const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 camera.position.set(0, 50, 0);
 camera.up.set(0, 0, 1);
 camera.lookAt(0, 0, 0);

threejs/threejs-fog-gui.html

@@ -33,9 +33,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();
@@ -81,8 +81,8 @@ function main() {
     scene.background = new THREE.Color(color);
 
     const fogGUIHelper = new FogGUIHelper(scene.fog, scene.background);
-    gui.add(fogGUIHelper, 'near', zNear, zFar).listen();
-    gui.add(fogGUIHelper, 'far', zNear, zFar).listen();
+    gui.add(fogGUIHelper, 'near', near, far).listen();
+    gui.add(fogGUIHelper, 'far', near, far).listen();
     gui.addColor(fogGUIHelper, 'color');
   }
 

threejs/threejs-fog.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-fundamentals-3-cubes.html

@@ -19,9 +19,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-fundamentals-with-animation.html

@@ -19,9 +19,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-fundamentals-with-light.html

@@ -19,9 +19,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-fundamentals.html

@@ -19,9 +19,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-lights-ambient.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-directional-w-helper.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-directional.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-hemisphere.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-point-physically-correct.html

@@ -35,9 +35,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-point.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-rectarea.html

@@ -35,9 +35,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-lights-spot-w-helper.html

@@ -34,9 +34,9 @@ function main() {
 
   const fov = 45;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 100;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 10, 20);
 
   const controls = new THREE.OrbitControls(camera, canvas);

threejs/threejs-primitives-text.html

@@ -30,9 +30,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 40;
 
   const scene = new THREE.Scene();

threejs/threejs-primitives.html

@@ -30,9 +30,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 120;
 
   const scene = new THREE.Scene();

threejs/threejs-responsive-hd-dpi.html

@@ -30,9 +30,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-responsive-no-resize.html

@@ -30,9 +30,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-responsive-update-camera.html

@@ -30,9 +30,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-responsive.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-responsive.js

@@ -6,9 +6,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-scenegraph-car.html

@@ -31,9 +31,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(8, 4, 10);
   camera.lookAt(0, 0, 0);
 

threejs/threejs-scenegraph-sun-earth-moon-axes-grids.html

@@ -59,9 +59,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun-earth-moon-axes.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun-earth-moon.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun-earth-orbit-fixed.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun-earth-orbit.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 150, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun-earth.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-scenegraph-sun.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 40;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 1000;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 1000;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.set(0, 50, 0);
   camera.up.set(0, 0, 1);
   camera.lookAt(0, 0, 0);

threejs/threejs-textured-cube-6-textures.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-textured-cube-adjust.html

@@ -32,9 +32,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-textured-cube-wait-for-all-textures.html

@@ -54,9 +54,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-textured-cube-wait-for-texture.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();

threejs/threejs-textured-cube.html

@@ -29,9 +29,9 @@ function main() {
 
   const fov = 75;
   const aspect = 2;  // the canvas default
-  const zNear = 0.1;
-  const zFar = 5;
-  const camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+  const near = 0.1;
+  const far = 5;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   camera.position.z = 2;
 
   const scene = new THREE.Scene();