fix CW -> CCW

threejs/lessons/resources/cube-vertex-winding-order.svg

@@ -16,40 +16,44 @@
     <g transform="matrix(1,0,0,1,21.179,-43.8717)">
         <path d="M69.82,439.666L208.602,330.725" style="fill:none;stroke:black;stroke-width:1px;"/>
     </g>
-    <g transform="matrix(1,0,0,1,-7.03923,-23.0436)">
-        <text x="57.318px" y="454.45px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">0</text>
+    <g transform="matrix(1,0,0,1,50.2788,431.406)">
+        <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">0</text>
     </g>
-    <g transform="matrix(1,0,0,1,222.707,32.1174)">
-        <text x="57.318px" y="454.45px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">1</text>
+    <g transform="matrix(1,0,0,1,280.025,486.567)">
+        <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">1</text>
     </g>
-    <g transform="matrix(1,0,0,1,-6.79509,-286.708)">
-        <text x="57.318px" y="454.45px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">2</text>
+    <g transform="matrix(1,0,0,1,50.5229,167.742)">
+        <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">2</text>
     </g>
-    <g transform="matrix(1,0,0,1,190.583,-269.056)">
-        <text x="57.318px" y="454.45px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">3</text>
+    <g transform="matrix(1,0,0,1,247.901,185.394)">
+        <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">3</text>
     </g>
-    <g transform="matrix(1,0,0,1,135.636,-167.597)">
-        <text x="57.318px" y="454.45px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">4</text>
+    <g transform="matrix(1,0,0,1,192.954,286.853)">
+        <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">4</text>
     </g>
     <g transform="matrix(1,0,0,1,-15.4061,33.6656)">
         <path d="M282.782,166.14L106.405,130.681L106.405,362.129L282.782,415.893L282.782,166.14Z" style="fill:rgb(255,194,42);stroke:black;stroke-width:1px;"/>
     </g>
     <path d="M90.999,395.795L267.376,199.806L267.376,449.558L90.999,395.795Z" style="fill:rgb(255,171,5);"/>
     <g transform="matrix(1,0,0,1,7.70655,-21.9953)">
-        <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
-        <g transform="matrix(-0.196629,0.980478,-0.660407,-0.13244,382.15,164.163)">
+        <g transform="matrix(-1,-1.23165e-16,1.23165e-16,-1,210.359,575.255)">
             <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
         </g>
-        <g transform="matrix(-0.742064,-0.670329,0.451504,-0.499822,102.708,520.923)">
+        <g transform="matrix(0.211738,-0.977327,0.658284,0.142617,-40.0936,290.97)">
+            <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
+        </g>
+        <g transform="matrix(0.747948,0.663758,-0.447078,0.503785,208.446,87.9396)">
             <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
         </g>
     </g>
     <g transform="matrix(-1,1.22465e-16,-1.22465e-16,-1,350.325,626.093)">
-        <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
-        <g transform="matrix(-0.301494,0.953468,-0.642214,-0.203073,387.947,187.32)">
+        <g transform="matrix(-1,-1.11022e-16,1.11022e-16,-1,210.359,575.255)">
+            <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
+        </g>
+        <g transform="matrix(0.286546,-0.958066,0.645311,0.193005,-44.2304,274.451)">
             <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
         </g>
-        <g transform="matrix(-0.742064,-0.670329,0.451504,-0.499822,102.708,520.923)">
+        <g transform="matrix(0.739343,0.673329,-0.453525,0.497989,215.206,84.5999)">
             <path d="M103.055,232.065L95.79,232.065L105.179,208.278L114.569,232.065L107.304,232.065L107.304,366.977L103.055,366.977L103.055,232.065Z" style="fill:rgb(31,180,0);"/>
         </g>
     </g>

threejs/lessons/threejs-custom-geometry.md

@@ -86,7 +86,7 @@ We do that by creating `Face3` objects and specifying the indices
 of the 3 vertices that make up that face.
 
 The order we specify the vertices is important. To be pointing toward the
-outside of the cube they must be specified in a clockwise direction
+outside of the cube they must be specified in a counter clockwise direction
 when that triangle is facing the camera.
 
 <div class="threejs_center"><img src="resources/cube-vertex-winding-order.svg" style="width: 500px"></div>