add code snippets to primitives

threejs/lessons/resources/threejs-primitives.js

@@ -89,33 +89,34 @@
       },
     },
     ParametricBufferGeometry: {
-      create() {
-        /*
-        from: https://github.com/mrdoob/three.js/blob/b8d8a8625465bd634aa68e5846354d69f34d2ff5/examples/js/ParametricGeometries.js
+      /*
+      from: https://github.com/mrdoob/three.js/blob/b8d8a8625465bd634aa68e5846354d69f34d2ff5/examples/js/ParametricGeometries.js
 
-        The MIT License
+      The MIT License
 
-        Copyright © 2010-2018 three.js authors
+      Copyright © 2010-2018 three.js authors
 
-        Permission is hereby granted, free of charge, to any person obtaining a copy
-        of this software and associated documentation files (the "Software"), to deal
-        in the Software without restriction, including without limitation the rights
-        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-        copies of the Software, and to permit persons to whom the Software is
-        furnished to do so, subject to the following conditions:
+      Permission is hereby granted, free of charge, to any person obtaining a copy
+      of this software and associated documentation files (the "Software"), to deal
+      in the Software without restriction, including without limitation the rights
+      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+      copies of the Software, and to permit persons to whom the Software is
+      furnished to do so, subject to the following conditions:
 
-        The above copyright notice and this permission notice shall be included in
-        all copies or substantial portions of the Software.
+      The above copyright notice and this permission notice shall be included in
+      all copies or substantial portions of the Software.
 
-        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-        THE SOFTWARE.
+      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+      THE SOFTWARE.
 
-        */
+      */
+      create() {
+         // from: https://github.com/mrdoob/three.js/blob/b8d8a8625465bd634aa68e5846354d69f34d2ff5/examples/js/ParametricGeometries.js
         function klein(v, u, target) {
           u *= Math.PI;
           v *= 2 * Math.PI;
@@ -403,9 +404,10 @@
     const text = base.innerHTML;
     base.innerHTML = '';
 
-    const elem = addDiv(base, 'shape');
+    const pair = addDiv(base, 'pair');
+    const elem = addDiv(pair, 'shape');
 
-    const right = addDiv(base, 'desc');
+    const right = addDiv(pair, 'desc');
     addLink(right, name);
     if (info.nonBuffer !== false) {
       addElem(right, 'span', '', ', ');
@@ -413,6 +415,14 @@
     }
     addDiv(right, '.note').innerHTML = text;
 
+    const rawLines = info.create.toString().replace('return new', 'const geometry =').split(/\n/);
+    const createRE = /^( *create\()/;
+    const m = createRE.exec(rawLines[0]);
+    const prefixLen = m[1].length + 1;
+    const trimmedLines = rawLines.slice(1, rawLines.length - 1).map(line => line.substring(prefixLen));
+
+    addElem(base, 'pre', 'prettyprint showmods', trimmedLines.join('\n'));
+
     return createLiveImage(elem, info);
   }
 

threejs/lessons/threejs-primitives.md

@@ -19,7 +19,6 @@ cover making and loading data from several 3D modeling
 programs. For now let's go over some of the available
 primitives.
 
-<div class="primitives">
 <div data-primitive="BoxBufferGeometry">A Box</div>
 <div data-primitive="CircleBufferGeometry">A flat circle</div>
 <div data-primitive="ConeBufferGeometry">A Cone</div>
@@ -44,7 +43,6 @@ for <code>TextBufferGeometry</code> and <code>TextGeometry</code> respectively.<
 <div data-primitive="TubeBufferGeometry">A circle traced down a path</div>
 <div data-primitive="EdgesGeometry">A helper object that takes another geometry as input and generates edges only if the angle between faces is greater than some threshold. For example if you look at the box at the top it shows a line going through each face showing every triangle that makes the box. Using an EdgesGeometry instead the middle lines are removed.</div>
 <div data-primitive="WireframeGeometry">Generates geometry that contains one line segment (2 points) per edge in the given geometry. With out this you'd often be missing edges or get extra edges since WebGL generally requires 2 points per line segment. For example if all you had was a single triangle there would only be 3 points. If you tried to draw it using a material with <code>wireframe: true</code> you would only get a single line. Passing that triangle geometry to a <code>WireframeGeometry</code> will generate a new Geometry that has 3 lines segments using 6 points..</div>
-</div>
 
 You might notice of most of them come in pairs of `Geometry`
 or `BufferGeometry`. The difference between the 2 types is effectively flexibility
@@ -346,33 +344,36 @@ to use it](threejs-scenegraph.html).
 <script src="resources/threejs-lesson-utils.js"></script>
 <script src="resources/threejs-primitives.js"></script>
 <style>
-.primitives {
+div[data-primitive] {
+    padding-bottom: 2em;
+    border-bottom: 1px solid #888;
+    margin-bottom: 2em;
 }
-.primitives>div {
+div[data-primitive] .pair {
   display: flex;
   align-items: center;
   margin-bottom: 1em;
 }
-.primitives .shape {
+div[data-primitive] .shape {
   flex: 0 0 auto;
   width: 200px;
   height: 200px;
 }
-.primitives .desc {
+div[data-primitive] .desc {
   word-wrap: break-word;
   padding: 1em;
   min-width: 0;
 }
-.primitives .desc code {
+div[data-primitive] .desc code {
   white-space: normal;
 }
 @media (max-width: 550px) {
-  .primitives .shape {
+  div[data-primitive] .shape {
       width: 120px;
       height: 120px;
   }
 }
-.primitives .desc {
+div[data-primitive] .desc {
   flex: 1 1 auto;
 }
 </style>