发布v0.0.9。

tengge1 · Nov 25, 2018 · 802ad2d · 802ad2d
1 parent 97280dd
commit 802ad2d
Show file tree

Hide file tree

Showing 7 changed files with 887 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Shadow Editor
 
 * 名称：Shadow Editor
-* 版本：v0.0.9(开发中)
+* 版本：v0.0.9
 * 说明：基于`three.js`的场景编辑器。
 
 * 源码一：https://gitee.com/tengge1/ShadowEditor
@@ -81,12 +81,25 @@ npm run build-docs
 
 ## 项目截图
 
-![image](images/scene20181007.png)
+![image](images/scene20181125.png)
 
 [点击此处](images/README.md)查看更多截图
 
 ## 开发日志
 
+**v0.0.9**
+
+* 发布日期：2018年11月25日
+* 更新日志：
+
+1. 新增布料带动画。
+2. gltf模型导入带动画。
+3. skinned morph(*.js)模型导入带动画。(新版three.js示例中已经移除该模型。)
+4. 平面画点工具。
+5. 平面画线工具。
+6. 平面贴花工具。
+7. 选中物体效果优化。
+
 **v0.0.8**
 
 * 发布日期：2018年10月27日
@@ -97,7 +110,7 @@ npm run build-docs
 3. 所有场景一键发布静态网站，便于部署到`GitHub Pages`服务上。
 4. 柏林地形组件、序列化和反序列化，并可在播放器中展示。
 5. 上传mp4视频贴图，并可以设置到材质上，在三维场景中播放视频。
-6. 增加液体组件（测试）。
+6. 增加水组件。
 
 **v0.0.7**
 

diff --git a/ShadowEditor.Web/src/editor/Toolbar.js b/ShadowEditor.Web/src/editor/Toolbar.js
@@ -1,5 +1,6 @@
 import UI from '../ui/UI';
 import AddObjectCommand from '../command/AddObjectCommand';
+import Earcut from '../utils/Earcut';
 
 /**
  * 工具栏
@@ -70,14 +71,16 @@ Toolbar.prototype.render = function () {
             icon: 'icon-line',
             title: '画线',
             onClick: this.onAddLine.bind(this)
-        }, {
-            xtype: 'iconbutton',
-            id: 'addPolygonBtn',
-            scope: this.id,
-            icon: 'icon-polygon',
-            title: '画面',
-            onClick: this.onAddPolygon.bind(this)
-        }, {
+        },
+        // {
+        //     xtype: 'iconbutton',
+        //     id: 'addPolygonBtn',
+        //     scope: this.id,
+        //     icon: 'icon-polygon',
+        //     title: '画面',
+        //     onClick: this.onAddPolygon.bind(this)
+        // }, 
+        {
             xtype: 'iconbutton',
             id: 'sprayBtn',
             scope: this.id,
@@ -167,7 +170,7 @@ Toolbar.prototype.onAddPointIntersect = function (obj, event) {
         return;
     }
 
-    var geometry = new THREE.CircleBufferGeometry(0.1, 32, 0, Math.PI * 2);
+    var geometry = new THREE.CircleBufferGeometry(0.4, 32, 0, Math.PI * 2);
 
     var material = new THREE.PointsMaterial({
         color: 0xffffff * Math.random(),
@@ -208,9 +211,11 @@ Toolbar.prototype.onAddLine = function () {
 
         var material = new THREE.LineMaterial({
             color: 0xffffff,
-            linewidth: 5, // in pixels
+            linewidth: 8, // in pixels
             vertexColors: THREE.VertexColors,
-            dashed: false
+            dashed: false,
+            polygonOffset: true,
+            polygonOffsetFactor: -40,
         });
 
         var renderer = this.app.editor.renderer;
@@ -271,29 +276,39 @@ Toolbar.prototype.onAddPolygon = function () {
         this.app.on(`intersect.${this.id}AddPolygon`, this.onAddPolygonIntersect.bind(this));
         this.app.on(`dblclick.${this.id}AddPolygon`, this.onAddPolygonDblClick.bind(this));
 
-        var shape = new THREE.Shape();
-        var geometry = new THREE.ShapeBufferGeometry(shape);
+        var geometry = new THREE.BufferGeometry();
+
+        geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(300), 3));
+        geometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(300), 3));
+        geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(200), 2));
+
+        geometry.attributes.position.count = 0;
+        geometry.attributes.normal.count = 0;
+        geometry.attributes.uv.count = 0;
 
         var material = new THREE.MeshBasicMaterial({
             color: 0xffffff * Math.random(),
             polygonOffset: true,
             polygonOffsetFactor: -40,
+            side: THREE.DoubleSide,
         });
 
         this.polygon = new THREE.Mesh(geometry, material);
 
         this.polygon.name = '面';
+        this.polygon.drawMode = THREE.TriangleStripDrawMode;
 
         this.app.editor.execute(new AddObjectCommand(this.polygon));
 
-        this.polygonVertices = [];
+        this.polygonPoints = [];
     } else {
         addPolygonBtn.unselect();
         this.app.on(`intersect.${this.id}AddPolygon`, null);
         this.app.on(`dblclick.${this.id}AddPolygon`, null);
 
         this.polygon = null;
-        this.polygonVertices = null;
+
+        this.polygonPoints = null;
     }
 };
 
@@ -302,32 +317,32 @@ Toolbar.prototype.onAddPolygonIntersect = function (obj) {
         return;
     }
 
-    this.polygonVertices.push(obj.point.x, obj.point.y, obj.point.z);
+    this.polygonPoints.push(obj.point);
 
-    var shape = new THREE.Shape();
-    shape.autoClose = true;
+    var position = this.polygon.geometry.attributes.position;
+    var normal = this.polygon.geometry.attributes.normal;
+    var uv = this.polygon.geometry.attributes.uv;
 
-    for (var i = 0; i < this.polygonVertices.length / 3; i++) {
-        var x = this.polygonVertices[i * 3];
-        var y = this.polygonVertices[i * 3 + 1];
-        var z = this.polygonVertices[i * 3 + 2];
+    var index = position.count;
 
-        if (i === 0) {
-            shape.moveTo(x, y, z);
-        } else {
-            shape.lineTo(x, y, z);
-        }
-    }
+    position.setXYZ(
+        index,
+        obj.point.x,
+        obj.point.y,
+        obj.point.z,
+    );
+
+    normal.setXYZ(index, obj.face.normal.x, obj.face.normal.y, obj.face.normal.z);
 
-    var geometry = this.polygon.geometry;
-    geometry.dispose();
+    uv.setXY(index, obj.uv.x, obj.uv.y);
 
-    geometry = new THREE.ShapeBufferGeometry(shape, this.polygonVertices.length);
-    geometry.attributes.position.needsUpdate = true;
-    geometry.attributes.normal.needsUpdate = true;
-    geometry.attributes.uv.needsUpdate = true;
+    position.count++;
+    normal.count++;
+    uv.count++;
 
-    this.polygon.geometry = geometry;
+    position.needsUpdate = true;
+    normal.needsUpdate = true;
+    uv.needsUpdate = true;
 };
 
 Toolbar.prototype.onAddPolygonDblClick = function (obj) {

diff --git a/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js b/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js
@@ -179,6 +179,9 @@ ComponentMenu.prototype.onAddCloth = function () {
     var editor = this.app.editor;
 
     var cloth = new Cloth();
+
+    cloth.name = '布';
+
     editor.execute(new AddObjectCommand(cloth));
 };
 

diff --git a/ShadowEditor.Web/src/event/TransformControlsEvent.js b/ShadowEditor.Web/src/event/TransformControlsEvent.js
@@ -131,9 +131,11 @@ TransformControlsEvent.prototype.onObjectSelected = function (object) {
         return;
     }
 
-    if (object && !(object instanceof THREE.Scene) && !(object instanceof THREE.PerspectiveCamera && object.userData.isDefault === true)) {
-        this.app.editor.transformControls.attach(object);
+    if (!object || object === this.app.editor.scene || object === this.app.editor.camera) {
+        return;
     }
+
+    this.app.editor.transformControls.attach(object);
 };
 
 /**