新增二次贝塞尔曲线。

ShadowEditor.Web/src/editor/menubar/GeometryMenu.js

@@ -17,6 +17,7 @@ import Text from '../../object/geometry/Text';
 
 import LineCurve from '../../object/line/LineCurve';
 import CatmullRomCurve from '../../object/line/CatmullRomCurve';
+import QuadraticBezierCurve from '../../object/line/QuadraticBezierCurve';
 import CubicBezierCurve from '../../object/line/CubicBezierCurve';
 import EllipseCurve from '../../object/line/EllipseCurve';
 
@@ -127,6 +128,11 @@ GeometryMenu.prototype.render = function () {
                 html: 'CatmullRom曲线',
                 cls: 'option',
                 onClick: this.addCatmullRomCurve.bind(this)
+            }, {
+                xtype: 'div',
+                html: '二次贝塞尔曲线',
+                cls: 'option',
+                onClick: this.addQuadraticBezierCurve.bind(this)
             }, {
                 xtype: 'div',
                 html: '三次贝塞尔曲线',
@@ -137,10 +143,6 @@ GeometryMenu.prototype.render = function () {
                 html: '椭圆曲线',
                 cls: 'option',
                 onClick: this.addEllipseCurve.bind(this)
-            }, {
-                xtype: 'div',
-                html: '四次贝塞尔曲线',
-                cls: 'option',
             }, {
                 xtype: 'div',
                 html: 'Spline曲线',
@@ -253,6 +255,13 @@ GeometryMenu.prototype.addCatmullRomCurve = function () {
     this.app.editor.addRawHelper(helper);
 };
 
+// ----------------------- 二次贝塞尔曲线 ---------------------------------
+
+GeometryMenu.prototype.addQuadraticBezierCurve = function () {
+    var line = new QuadraticBezierCurve();
+    this.app.editor.execute(new AddObjectCommand(line));
+};
+
 // ----------------------- 三次贝塞尔曲线 ---------------------------------
 
 GeometryMenu.prototype.addCubicBezierCurve = function () {

ShadowEditor.Web/src/object/line/QuadraticBezierCurve.js

@@ -0,0 +1,55 @@
+var ARC_SEGMENTS = 200;
+
+/**
+ * 二次贝塞尔曲线
+ * @param {*} options 
+ */
+function QuadraticBezierCurve(options = {}) {
+    var geometry = new THREE.BufferGeometry();
+    geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3));
+
+    var material = new THREE.LineBasicMaterial({
+        color: 0xff0000,
+        opacity: 0.35
+    });
+
+    THREE.Line.call(this, geometry, material);
+
+    this.name = '二次贝塞尔曲线';
+
+    this.castShadow = true;
+
+    Object.assign(this.userData, {
+        type: 'QuadraticBezierCurve',
+        v0: new THREE.Vector3(-10, 0, 0),
+        v1: new THREE.Vector3(20, 15, 0),
+        v2: new THREE.Vector3(10, 0, 0)
+    });
+
+    this.update();
+}
+
+QuadraticBezierCurve.prototype = Object.create(THREE.Line.prototype);
+QuadraticBezierCurve.prototype.constructor = QuadraticBezierCurve;
+
+QuadraticBezierCurve.prototype.update = function () {
+    var curve = new THREE.QuadraticBezierCurve3(
+        this.userData.v0,
+        this.userData.v1,
+        this.userData.v2
+    );
+
+    var position = this.geometry.attributes.position;
+
+    var point = new THREE.Vector3();
+
+    for (var i = 0; i < ARC_SEGMENTS; i++) {
+        var t = i / (ARC_SEGMENTS - 1);
+        curve.getPoint(t, point);
+        position.setXYZ(i, point.x, point.y, point.z);
+    }
+
+    position.needsUpdate = true;
+};
+
+export default QuadraticBezierCurve;