Browse Source

add another extrude example

Gregg Tavares 5 years ago
parent
commit
ffcaab3189
1 changed files with 63 additions and 1 deletions
  1. 63 1
      threejs/lessons/resources/threejs-primitives.js

+ 63 - 1
threejs/lessons/resources/threejs-primitives.js

@@ -110,7 +110,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
     },
     ExtrudeBufferGeometry: {
       ui: {
-        steps: { type: 'range', min: 1, max: 10, },
+        steps: { type: 'range', min: 1, max: 100, },
         depth: { type: 'range', min: 1, max: 20, precision: 1, },
         bevelEnabled: { type: 'bool', },
         bevelThickness: { type: 'range', min: 0.1, max: 3, },
@@ -165,6 +165,68 @@ const extrudeSettings = {
 
 const geometry = THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
 `,
+      create2(steps = 100) {
+    const outline = new THREE.Shape([
+      [ -2, -0.1], [  2, -0.1], [ 2,  0.6],
+      [1.6,  0.6], [1.6,  0.1], [-2,  0.1],
+    ].map(p => new THREE.Vector2(...p)));
+
+    const x = -2.5;
+    const y = -5;
+    const shape = new THREE.CurvePath();
+    const points = [
+      [x + 2.5, y + 2.5],
+      [x + 2.5, y + 2.5], [x + 2, y], [x, y],
+      [x - 3, y], [x - 3, y + 3.5], [x - 3, y + 3.5],
+      [x - 3, y + 5.5], [x - 1.5, y + 7.7], [x + 2.5, y + 9.5],
+      [x + 6, y + 7.7], [x + 8, y + 4.5], [x + 8, y + 3.5],
+      [x + 8, y + 3.5], [x + 8, y], [x + 5, y],
+      [x + 3.5, y], [x + 2.5, y + 2.5], [x + 2.5, y + 2.5],
+    ].map(p => new THREE.Vector3(...p, 0));
+    for (let i = 0; i < points.length; i += 3) {
+      shape.add(new THREE.CubicBezierCurve3(...points.slice(i, i + 4)));
+    }
+
+    const extrudeSettings = {
+      steps,
+      bevelEnabled: false,
+      extrudePath: shape,
+    };
+
+    const geometry =  new THREE.ExtrudeBufferGeometry(outline, extrudeSettings);
+    return geometry;
+      },
+      src2: `
+const outline = new THREE.Shape([
+  [ -2, -0.1], [  2, -0.1], [ 2,  0.6],
+  [1.6,  0.6], [1.6,  0.1], [-2,  0.1],
+].map(p => new THREE.Vector2(...p)));
+
+const x = -2.5;
+const y = -5;
+const shape = new THREE.CurvePath();
+const points = [
+  [x + 2.5, y + 2.5],
+  [x + 2.5, y + 2.5], [x + 2,   y      ], [x,       y      ],
+  [x - 3,   y      ], [x - 3,   y + 3.5], [x - 3,   y + 3.5],
+  [x - 3,   y + 5.5], [x - 1.5, y + 7.7], [x + 2.5, y + 9.5],
+  [x + 6,   y + 7.7], [x + 8,   y + 4.5], [x + 8,   y + 3.5],
+  [x + 8,   y + 3.5], [x + 8,   y      ], [x + 5,   y      ],
+  [x + 3.5, y      ], [x + 2.5, y + 2.5], [x + 2.5, y + 2.5],
+].map(p => new THREE.Vector3(...p, 0));
+for (let i = 0; i < points.length; i += 3) {
+  shape.add(new THREE.CubicBezierCurve3(...points.slice(i, i + 4)));
+}
+
+const extrudeSettings = {
+  steps: 100,  // ui: steps
+  bevelEnabled: false,
+  extrudePath: shape,
+};
+
+const geometry =  new THREE.ExtrudeBufferGeometry(outline, extrudeSettings);
+return geometry;
+      `,
     },
     IcosahedronBufferGeometry: {
       ui: {