archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

圆柱组件。

Browse Source
This commit is contained in:
liteng 2018-09-09 20:29:22 +08:00
parent f6997d08c3
commit 2638b4e39c
2 changed files with 167 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ShadowEditor.Web/src/component/GeometryComponent.js
View File

@ -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 })
]
};

164
ShadowEditor.Web/src/component/geometry/CylinderGeometryComponent.js Normal file
View File

@ -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;