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

ShadowComponent

Browse Source
This commit is contained in:
tengge1 2019-07-20 21:18:08 +08:00
parent 334b03c7a0
commit 3f5bb3aaeb
1 changed files with 93 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
ShadowEditor.Web/src/editor2/component/ShadowComponent.jsx
View File

@ -12,10 +12,10 @@ class ShadowComponent extends React.Component {
this.selected = null;
this.mapSize = {
512: '512*512',
1024: '1024*1024',
2048: '2048*2048',
4096: '4096*4096',
'512': '512*512',
'1024': '1024*1024',
'2048': '2048*2048',
'4096': '4096*4096',
};
this.state = {
@ -48,7 +48,17 @@ class ShadowComponent extends React.Component {
this.handleExpand = this.handleExpand.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleChangeCastShadow = this.handleChangeCastShadow.bind(this);
this.handleChangeReceiveShadow = this.handleChangeReceiveShadow.bind(this);
this.handleChangeShadowRadius = this.handleChangeShadowRadius.bind(this);
this.handleChangeMapSize = this.handleChangeMapSize.bind(this);
this.handleChangeBias = this.handleChangeBias.bind(this);
this.handleChangeCameraLeft = this.handleChangeCameraLeft.bind(this);
this.handleChangeCameraRight = this.handleChangeCameraRight.bind(this);
this.handleChangeCameraTop = this.handleChangeCameraTop.bind(this);
this.handleChangeCameraBottom = this.handleChangeCameraBottom.bind(this);
this.handleChangeCameraNear = this.handleChangeCameraNear.bind(this);
this.handleChangeCameraFar = this.handleChangeCameraFar.bind(this);
}
render() {
@ -60,17 +70,17 @@ class ShadowComponent extends React.Component {
}
return <PropertyGroup title={L_SHADOW_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
<CheckBoxProperty label={L_CAST} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChange}></CheckBoxProperty>
<CheckBoxProperty label={L_RECEIVE} name={'receiveShadow'} value={receiveShadow} show={receiveShadow} onChange={this.handleChange}></CheckBoxProperty>
<NumberProperty label={L_RADIUS} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChange}></NumberProperty>
<SelectProperty label={L_MAP_SIZE} options={this.mapSize} name={'mapSize'} value={mapSize} show={mapSizeShow} onChange={this.handleChange}></SelectProperty>
<NumberProperty label={L_BIAS} name={'bias'} value={bias} show={biasShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_LEFT} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_RIGHT} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_TOP} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_BOTTOM} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_NEAR} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={L_CAMERA_FAR} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChange}></NumberProperty>
<CheckBoxProperty label={L_CAST} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChangeCastShadow}></CheckBoxProperty>
<CheckBoxProperty label={L_RECEIVE} name={'receiveShadow'} value={receiveShadow} show={receiveShadowShow} onChange={this.handleChangeReceiveShadow}></CheckBoxProperty>
<NumberProperty label={L_RADIUS} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChangeShadowRadius}></NumberProperty>
<SelectProperty label={L_MAP_SIZE} options={this.mapSize} name={'mapSize'} value={mapSize.toString()} show={mapSizeShow} onChange={this.handleChangeMapSize}></SelectProperty>
<NumberProperty label={L_BIAS} name={'bias'} value={bias} show={biasShow} onChange={this.handleChangeBias}></NumberProperty>
<NumberProperty label={L_CAMERA_LEFT} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChangeCameraLeft}></NumberProperty>
<NumberProperty label={L_CAMERA_RIGHT} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChangeCameraRight}></NumberProperty>
<NumberProperty label={L_CAMERA_TOP} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChangeCameraTop}></NumberProperty>
<NumberProperty label={L_CAMERA_BOTTOM} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChangeCameraBottom}></NumberProperty>
<NumberProperty label={L_CAMERA_NEAR} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChangeCameraNear}></NumberProperty>
<NumberProperty label={L_CAMERA_FAR} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChangeCameraFar}></NumberProperty>
</PropertyGroup>;
}
@ -108,7 +118,7 @@ class ShadowComponent extends React.Component {
receiveShadowShow: false,
shadowRadius: this.selected.shadow.radius,
shadowRadiusShow: true,
mapSize: this.selected.shadow.mapSize,
mapSize: this.selected.shadow.mapSize.x,
mapSizeShow: true,
bias: this.selected.shadow.bias,
biasShow: true,
@ -134,53 +144,85 @@ class ShadowComponent extends React.Component {
this.setState(state);
}
handleChange(value, name) {
const state = Object.assign({}, this.state, {
[name]: value,
});
handleChangeCastShadow(value) {
this.selected.castShadow = value;
const { size, lifetime } = state;
this.selected.userData.size = size
this.selected.userData.lifetime = lifetime;
this.selected.material.uniforms.size.value = size;
this.selected.material.uniforms.lifetime.value = lifetime;
if (this.selected instanceof THREE.Mesh) {
this.updateMaterial(this.selected.material);
}
app.call(`objectChanged`, this, this.selected);
}
handlePreview() {
if (this.isPlaying) {
this.stopPreview();
handleChangeReceiveShadow(value) {
this.selected.receiveShadow = value;
if (this.selected instanceof THREE.Mesh) {
this.updateMaterial(this.selected.material);
}
app.call(`objectChanged`, this, this.selected);
}
handleChangeShadowRadius(value) {
this.selected.shadow.radius = value;
app.call(`objectChanged`, this, this.selected);
}
updateMaterial(material) {
if (Array.isArray(material)) {
material.forEach(n => {
n.needsUpdate = true;
});
} else {
this.startPreview();
material.needsUpdate = true;
}
}
startPreview() {
this.isPlaying = true;
this.setState({
previewText: L_CANCEL,
});
app.on(`animate.${this.id}`, this.onAnimate);
handleChangeMapSize(value) {
this.selected.shadow.mapSize.x = this.selected.shadow.mapSize.y = parseInt(value);
app.call(`objectChanged`, this, this.selected);
}
stopPreview() {
this.isPlaying = false;
this.setState({
previewText: L_PREVIEW,
});
app.on(`animate.${this.id}`, null);
handleChangeBias(value) {
this.selected.shadow.bias = value;
app.call(`objectChanged`, this, this.selected);
}
onAnimate(clock, deltaTime) {
let elapsed = clock.getElapsedTime();
this.selected.update(elapsed);
handleChangeCameraLeft(value) {
this.selected.shadow.camera.left = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
handleChangeCameraRight(value) {
this.selected.shadow.camera.right = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
handleChangeCameraTop(value) {
this.selected.shadow.camera.top = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
handleChangeCameraBottom(value) {
this.selected.shadow.camera.bottom = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
handleChangeCameraNear(value) {
this.selected.shadow.camera.near = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
handleChangeCameraFar(value) {
this.selected.shadow.camera.far = value;
this.selected.shadow.camera.updateProjectionMatrix();
app.call(`objectChanged`, this, this.selected);
}
}