From 2638b4e39cc6c5e2348bf6f9dcfc78a74859cd30 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Sun, 9 Sep 2018 20:29:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=86=E6=9F=B1=E7=BB=84=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/GeometryComponent.js | 4 +- .../geometry/CylinderGeometryComponent.js | 164 ++++++++++++++++++ 2 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 ShadowEditor.Web/src/component/geometry/CylinderGeometryComponent.js diff --git a/ShadowEditor.Web/src/component/GeometryComponent.js b/ShadowEditor.Web/src/component/GeometryComponent.js index 740ca292..751d83f2 100644 --- a/ShadowEditor.Web/src/component/GeometryComponent.js +++ b/ShadowEditor.Web/src/component/GeometryComponent.js @@ -2,6 +2,7 @@ import BaseComponent from './BaseComponent'; import PlaneGeometryComponent from './geometry/PlaneGeometryComponent'; import BoxGeometryComponent from './geometry/BoxGeometryComponent'; import CircleGeometryComponent from './geometry/CircleGeometryComponent'; +import CylinderGeometryComponent from './geometry/CylinderGeometryComponent'; /** * 几何体组件 @@ -48,7 +49,8 @@ GeometryComponent.prototype.render = function () { }, new PlaneGeometryComponent({ app: this.app }), new BoxGeometryComponent({ app: this.app }), - new CircleGeometryComponent({ app: this.app }) + new CircleGeometryComponent({ app: this.app }), + new CylinderGeometryComponent({ app: this.app }) ] }; diff --git a/ShadowEditor.Web/src/component/geometry/CylinderGeometryComponent.js b/ShadowEditor.Web/src/component/geometry/CylinderGeometryComponent.js new file mode 100644 index 00000000..75539409 --- /dev/null +++ b/ShadowEditor.Web/src/component/geometry/CylinderGeometryComponent.js @@ -0,0 +1,164 @@ +import BaseComponent from '../BaseComponent'; +import SetGeometryCommand from '../../command/SetGeometryCommand'; + +/** + * 圆柱组件 + * @param {*} options + */ +function CylinderGeometryComponent(options) { + BaseComponent.call(this, options); + this.selected = null; +} + +CylinderGeometryComponent.prototype = Object.create(BaseComponent.prototype); +CylinderGeometryComponent.prototype.constructor = CylinderGeometryComponent; + +CylinderGeometryComponent.prototype.render = function () { + var data = { + xtype: 'div', + parent: this.parent, + id: 'geometryPanel', + scope: this.id, + style: { + borderTop: 0, + marginTop: '8px', + display: 'none' + }, + children: [{ + xtype: 'row', + children: [{ + xtype: 'label', + text: '顶部半径' + }, { + xtype: 'number', + id: 'radiusTop', + scope: this.id, + value: 1, + onChange: this.onChangeGeometry.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '底部半径' + }, { + xtype: 'number', + id: 'radiusBottom', + scope: this.id, + value: 1, + onChange: this.onChangeGeometry.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '高度' + }, { + xtype: 'number', + id: 'height', + scope: this.id, + value: 1, + onChange: this.onChangeGeometry.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '圆形分段' + }, { + xtype: 'int', + id: 'radialSegments', + scope: this.id, + value: 16, + range: [1, Infinity], + onChange: this.onChangeGeometry.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '高度分段' + }, { + xtype: 'int', + id: 'heightSegments', + scope: this.id, + value: 1, + range: [1, Infinity], + onChange: this.onChangeGeometry.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '两端开口' + }, { + xtype: 'checkbox', + id: 'openEnded', + scope: this.id, + value: false, + onChange: this.onChangeGeometry.bind(this) + }] + }] + }; + + var control = UI.create(data); + control.render(); + + this.app.on(`objectSelected.${this.id}`, this.onObjectSelected.bind(this)); + this.app.on(`objectChanged.${this.id}`, this.onObjectChanged.bind(this)); +}; + +CylinderGeometryComponent.prototype.onObjectSelected = function () { + this.updateUI(); +}; + +CylinderGeometryComponent.prototype.onObjectChanged = function () { + this.updateUI(); +}; + +CylinderGeometryComponent.prototype.updateUI = function () { + var container = UI.get('geometryPanel', this.id); + var editor = this.app.editor; + if (editor.selected && editor.selected instanceof THREE.Mesh && editor.selected.geometry instanceof THREE.CylinderBufferGeometry) { + container.dom.style.display = ''; + } else { + container.dom.style.display = 'none'; + return; + } + + this.selected = editor.selected; + + var radiusTop = UI.get('radiusTop', this.id); + var radiusBottom = UI.get('radiusBottom', this.id); + var height = UI.get('height', this.id); + var radialSegments = UI.get('radialSegments', this.id); + var heightSegments = UI.get('heightSegments', this.id); + var openEnded = UI.get('openEnded', this.id); + + radiusTop.setValue(this.selected.geometry.parameters.radiusTop); + radiusBottom.setValue(this.selected.geometry.parameters.radiusBottom); + height.setValue(this.selected.geometry.parameters.height); + radialSegments.setValue(this.selected.geometry.parameters.radialSegments); + heightSegments.setValue(this.selected.geometry.parameters.heightSegments); + openEnded.setValue(this.selected.geometry.parameters.openEnded); +}; + +CylinderGeometryComponent.prototype.onChangeGeometry = function () { + var radiusTop = UI.get('radiusTop', this.id); + var radiusBottom = UI.get('radiusBottom', this.id); + var height = UI.get('height', this.id); + var radialSegments = UI.get('radialSegments', this.id); + var heightSegments = UI.get('heightSegments', this.id); + var openEnded = UI.get('openEnded', this.id); + + this.app.editor.execute(new SetGeometryCommand(this.selected, new THREE.CylinderBufferGeometry( + radiusTop.getValue(), + radiusBottom.getValue(), + height.getValue(), + radialSegments.getValue(), + heightSegments.getValue(), + openEnded.getValue() + ))); +}; + +export default CylinderGeometryComponent; \ No newline at end of file