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

TorusKnotGeometryComponent

Browse Source
This commit is contained in:
tengge1 2019-07-18 21:05:26 +08:00
parent 13148d5c54
commit f955cccbf5
2 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
ShadowEditor.Web/src/editor2/component/geometry/TorusKnotGeometryComponent.jsx
View File

@ -0,0 +1,95 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, IntegerProperty } from '../../../third_party';
import SetGeometryCommand from '../../../command/SetGeometryCommand';
/**
* 环面纽结组件
* @author tengge / https://github.com/tengge1
*/
class TorusKnotGeometryComponent extends React.Component {
constructor(props) {
super(props);
this.selected = null;
this.state = {
show: false,
expanded: true,
radius: 1,
tube: 1,
tubularSegments: 16,
radialSegments: 16,
p: 20,
q: 20,
};
this.handleExpand = this.handleExpand.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.handleChange = this.handleChange.bind(this);
}
render() {
const { show, expanded, radius, tube, tubularSegments, radialSegments, p, q } = this.state;
if (!show) {
return null;
}
return <PropertyGroup title={L_GEOMETRY_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty name={'radius'} label={L_RADIUS} value={radius} onChange={this.handleChange}></NumberProperty>
<NumberProperty name={'tube'} label={L_TUBE} value={tube} onChange={this.handleChange}></NumberProperty>
<IntegerProperty name={'tubularSegments'} label={L_TUBULAR_SEGMENTS} value={tubularSegments} onChange={this.handleChange}></IntegerProperty>
<IntegerProperty name={'radialSegments'} label={L_RADIAL_SEGMENTS} value={radialSegments} onChange={this.handleChange}></IntegerProperty>
<NumberProperty name={'p'} label={L_TUBE_ARC} value={p} onChange={this.handleChange}></NumberProperty>
<NumberProperty name={'q'} label={L_DISTORTED_ARC} value={q} onChange={this.handleChange}></NumberProperty>
</PropertyGroup>;
}
componentDidMount() {
app.on(`objectSelected.TorusKnotGeometryComponent`, this.handleUpdate);
app.on(`objectChanged.TorusKnotGeometryComponent`, this.handleUpdate);
}
handleExpand(expanded) {
this.setState({
expanded,
});
}
handleUpdate() {
const editor = app.editor;
if (!editor.selected || !(editor.selected instanceof THREE.Mesh) || !(editor.selected.geometry instanceof THREE.TorusKnotBufferGeometry)) {
this.setState({
show: false,
});
return;
}
this.selected = editor.selected;
const state = Object.assign({}, this.selected.geometry.parameters, {
show: true,
});
this.setState(state);
}
handleChange(value, name, event) {
const state = Object.assign({}, this.state, {
[name]: value,
});
this.setState(state);
app.editor.execute(new SetGeometryCommand(this.selected, new THREE.TorusKnotBufferGeometry(
state.radius,
state.tube,
state.tubularSegments,
state.radialSegments,
state.p,
state.q,
)));
}
}
export default TorusKnotGeometryComponent;

2
ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
View File

@ -17,6 +17,7 @@ import PlaneGeometryComponent from '../component/geometry/PlaneGeometryComponent
import SphereGeometryComponent from '../component/geometry/SphereGeometryComponent.jsx';
import TeapotGeometryComponent from '../component/geometry/TeapotGeometryComponent.jsx';
import TorusGeometryComponent from '../component/geometry/TorusGeometryComponent.jsx';
import TorusKnotGeometryComponent from '../component/geometry/TorusKnotGeometryComponent.jsx';
/**
* 属性面板
@ -45,6 +46,7 @@ class PropertyPanel extends React.Component {
<SphereGeometryComponent></SphereGeometryComponent>
<TeapotGeometryComponent></TeapotGeometryComponent>
<TorusGeometryComponent></TorusGeometryComponent>
<TorusKnotGeometryComponent></TorusKnotGeometryComponent>
</PropertyGrid>;
}
}