mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-01-25 15:08:11 +00:00
462 lines
16 KiB
JavaScript
462 lines
16 KiB
JavaScript
import BaseEvent from '../BaseEvent';
|
|
import UI from '../../ui/UI';
|
|
import SetPositionCommand from '../../command/SetPositionCommand';
|
|
import SetRotationCommand from '../../command/SetRotationCommand';
|
|
import SetScaleCommand from '../../command/SetScaleCommand';
|
|
import SetUuidCommand from '../../command/SetUuidCommand';
|
|
import SetValueCommand from '../../command/SetValueCommand';
|
|
import SetColorCommand from '../../command/SetColorCommand';
|
|
|
|
/**
|
|
* 物体面板事件
|
|
* @author tengge / https://github.com/tengge1
|
|
* @param {*} app
|
|
*/
|
|
function ObjectPanelEvent(app) {
|
|
BaseEvent.call(this, app);
|
|
this.tabName = '物体';
|
|
}
|
|
|
|
ObjectPanelEvent.prototype = Object.create(BaseEvent.prototype);
|
|
ObjectPanelEvent.prototype.constructor = ObjectPanelEvent;
|
|
|
|
ObjectPanelEvent.prototype.start = function () {
|
|
this.app.on(`selectPropertyTab.${this.id}`, this.onSelectPropertyTab.bind(this));
|
|
this.app.on(`objectSelected.${this.id}`, this.onObjectSelected.bind(this));
|
|
this.app.on(`objectChanged.${this.id}`, this.onObjectChanged.bind(this));
|
|
this.app.on(`refreshSidebarObject3D.${this.id}`, this.onRefreshSidebarObject3D.bind(this));
|
|
this.app.on(`updateScaleX.${this.id}`, this.updateScaleX.bind(this));
|
|
this.app.on(`updateScaleY.${this.id}`, this.updateScaleY.bind(this));
|
|
this.app.on(`updateScaleZ.${this.id}`, this.updateScaleZ.bind(this));
|
|
this.app.on(`updateObject.${this.id}`, this.update.bind(this));
|
|
this.app.on(`updateObjectPanel.${this.id}`, this.updateUI.bind(this));
|
|
};
|
|
|
|
ObjectPanelEvent.prototype.stop = function () {
|
|
this.app.on(`selectPropertyTab.${this.id}`, null);
|
|
this.app.on(`objectSelected.${this.id}`, null);
|
|
this.app.on(`objectChanged.${this.id}`, null);
|
|
this.app.on(`refreshSidebarObject3D.${this.id}`, null);
|
|
this.app.on(`updateScaleX.${this.id}`, null);
|
|
this.app.on(`updateScaleY.${this.id}`, null);
|
|
this.app.on(`updateScaleZ.${this.id}`, null);
|
|
this.app.on(`updateObject.${this.id}`, null);
|
|
this.app.on(`updateObjectPanel.${this.id}`, null);
|
|
};
|
|
|
|
/**
|
|
* 选择物体选项卡
|
|
* @param {*} tabName
|
|
*/
|
|
ObjectPanelEvent.prototype.onSelectPropertyTab = function (tabName) {
|
|
this.tabName = tabName;
|
|
if (this.app.editor.selected != null && tabName === '物体') {
|
|
UI.get('objectPanel').dom.style.display = '';
|
|
} else {
|
|
UI.get('objectPanel').dom.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 物体选中事件
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.onObjectSelected = function (object) {
|
|
var container = UI.get('objectPanel');
|
|
|
|
// 设置物体面板显示隐藏
|
|
if (this.tabName === '物体' && object != null) {
|
|
container.dom.style.display = '';
|
|
} else {
|
|
container.dom.style.display = 'none';
|
|
}
|
|
|
|
if (object !== null) {
|
|
this.updateRows(object);
|
|
this.app.call('updateObjectPanel', this, object);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 选中物体改变
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.onObjectChanged = function (object) {
|
|
var editor = this.app.editor;
|
|
if (object !== editor.selected) return;
|
|
|
|
this.app.call('updateObjectPanel', this, object);
|
|
};
|
|
|
|
/**
|
|
* 刷新物体面板
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.onRefreshSidebarObject3D = function (object) {
|
|
var editor = this.app.editor;
|
|
if (object !== editor.selected) return;
|
|
|
|
this.app.call('updateObjectPanel', this, object);
|
|
};
|
|
|
|
/**
|
|
* 更新物体缩放x
|
|
*/
|
|
ObjectPanelEvent.prototype.updateScaleX = function () {
|
|
var editor = this.app.editor;
|
|
var object = editor.selected;
|
|
var objectScaleLock = UI.get('objectScaleLock');
|
|
var objectScaleX = UI.get('objectScaleX');
|
|
var objectScaleY = UI.get('objectScaleY');
|
|
var objectScaleZ = UI.get('objectScaleZ');
|
|
|
|
if (objectScaleLock.getValue() === true) {
|
|
var scale = objectScaleX.getValue() / object.scale.x;
|
|
objectScaleY.setValue(objectScaleY.getValue() * scale);
|
|
objectScaleZ.setValue(objectScaleZ.getValue() * scale);
|
|
}
|
|
|
|
this.app.call('updateObject', this);
|
|
};
|
|
|
|
/**
|
|
* 更新物体缩放y
|
|
*/
|
|
ObjectPanelEvent.prototype.updateScaleY = function () {
|
|
var editor = this.app.editor;
|
|
var object = editor.selected;
|
|
var objectScaleLock = UI.get('objectScaleLock');
|
|
var objectScaleX = UI.get('objectScaleX');
|
|
var objectScaleY = UI.get('objectScaleY');
|
|
var objectScaleZ = UI.get('objectScaleZ');
|
|
|
|
if (objectScaleLock.getValue() === true) {
|
|
var scale = objectScaleY.getValue() / object.scale.y;
|
|
|
|
objectScaleX.setValue(objectScaleX.getValue() * scale);
|
|
objectScaleZ.setValue(objectScaleZ.getValue() * scale);
|
|
}
|
|
|
|
this.app.call('updateObject', this);
|
|
};
|
|
|
|
/**
|
|
* 更新物体缩放z
|
|
*/
|
|
ObjectPanelEvent.prototype.updateScaleZ = function () {
|
|
var editor = this.app.editor;
|
|
var object = editor.selected;
|
|
var objectScaleLock = UI.get('objectScaleLock');
|
|
var objectScaleX = UI.get('objectScaleX');
|
|
var objectScaleY = UI.get('objectScaleY');
|
|
var objectScaleZ = UI.get('objectScaleZ');
|
|
|
|
if (objectScaleLock.getValue() === true) {
|
|
var scale = objectScaleZ.getValue() / object.scale.z;
|
|
|
|
objectScaleX.setValue(objectScaleX.getValue() * scale);
|
|
objectScaleY.setValue(objectScaleY.getValue() * scale);
|
|
}
|
|
|
|
this.app.call('updateObject', this);
|
|
};
|
|
|
|
/**
|
|
* 更新物体面板更新物体属性
|
|
*/
|
|
ObjectPanelEvent.prototype.update = function () {
|
|
var editor = this.app.editor;
|
|
var object = editor.selected;
|
|
|
|
var objectPositionX = UI.get('objectPositionX');
|
|
var objectPositionY = UI.get('objectPositionY');
|
|
var objectPositionZ = UI.get('objectPositionZ');
|
|
var objectRotationX = UI.get('objectRotationX');
|
|
var objectRotationY = UI.get('objectRotationY');
|
|
var objectRotationZ = UI.get('objectRotationZ');
|
|
var objectScaleX = UI.get('objectScaleX');
|
|
var objectScaleY = UI.get('objectScaleY');
|
|
var objectScaleZ = UI.get('objectScaleZ');
|
|
var objectFov = UI.get('objectFov');
|
|
var objectNear = UI.get('objectNear');
|
|
var objectFar = UI.get('objectFar');
|
|
var objectIntensity = UI.get('objectIntensity');
|
|
var objectColor = UI.get('objectColor');
|
|
var objectGroundColor = UI.get('objectGroundColor');
|
|
var objectDistance = UI.get('objectDistance');
|
|
var objectAngle = UI.get('objectAngle');
|
|
var objectPenumbra = UI.get('objectPenumbra');
|
|
var objectDecay = UI.get('objectDecay');
|
|
var objectVisible = UI.get('objectVisible');
|
|
var objectCastShadow = UI.get('objectCastShadow');
|
|
var objectReceiveShadow = UI.get('objectReceiveShadow');
|
|
var objectShadowRadius = UI.get('objectShadowRadius');
|
|
var objectUserData = UI.get('objectUserData');
|
|
|
|
if (object !== null) {
|
|
var newPosition = new THREE.Vector3(objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue());
|
|
|
|
if (object.position.distanceTo(newPosition) >= 0.01) {
|
|
editor.execute(new SetPositionCommand(object, newPosition));
|
|
}
|
|
|
|
var newRotation = new THREE.Euler(
|
|
objectRotationX.getValue() * THREE.Math.DEG2RAD,
|
|
objectRotationY.getValue() * THREE.Math.DEG2RAD,
|
|
objectRotationZ.getValue() * THREE.Math.DEG2RAD);
|
|
if (object.rotation.toVector3().distanceTo(newRotation.toVector3()) >= 0.01) {
|
|
editor.execute(new SetRotationCommand(object, newRotation));
|
|
}
|
|
|
|
var newScale = new THREE.Vector3(objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue());
|
|
if (object.scale.distanceTo(newScale) >= 0.01) {
|
|
editor.execute(new SetScaleCommand(object, newScale));
|
|
}
|
|
|
|
if (object.fov !== undefined && Math.abs(object.fov - objectFov.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'fov', objectFov.getValue()));
|
|
object.updateProjectionMatrix();
|
|
}
|
|
|
|
if (object.near !== undefined && Math.abs(object.near - objectNear.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'near', objectNear.getValue()));
|
|
}
|
|
|
|
if (object.far !== undefined && Math.abs(object.far - objectFar.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'far', objectFar.getValue()));
|
|
}
|
|
|
|
if (object.intensity !== undefined && Math.abs(object.intensity - objectIntensity.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'intensity', objectIntensity.getValue()));
|
|
}
|
|
|
|
if (object.color !== undefined && object.color.getHex() !== objectColor.getHexValue()) {
|
|
editor.execute(new SetColorCommand(object, 'color', objectColor.getHexValue()));
|
|
}
|
|
|
|
if (object.groundColor !== undefined && object.groundColor.getHex() !== objectGroundColor.getHexValue()) {
|
|
editor.execute(new SetColorCommand(object, 'groundColor', objectGroundColor.getHexValue()));
|
|
}
|
|
|
|
if (object.distance !== undefined && Math.abs(object.distance - objectDistance.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'distance', objectDistance.getValue()));
|
|
}
|
|
|
|
if (object.angle !== undefined && Math.abs(object.angle - objectAngle.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'angle', objectAngle.getValue()));
|
|
}
|
|
|
|
if (object.penumbra !== undefined && Math.abs(object.penumbra - objectPenumbra.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'penumbra', objectPenumbra.getValue()));
|
|
}
|
|
|
|
if (object.decay !== undefined && Math.abs(object.decay - objectDecay.getValue()) >= 0.01) {
|
|
editor.execute(new SetValueCommand(object, 'decay', objectDecay.getValue()));
|
|
}
|
|
|
|
if (object.visible !== objectVisible.getValue()) {
|
|
editor.execute(new SetValueCommand(object, 'visible', objectVisible.getValue()));
|
|
}
|
|
|
|
if (object.castShadow !== undefined && object.castShadow !== objectCastShadow.getValue()) {
|
|
editor.execute(new SetValueCommand(object, 'castShadow', objectCastShadow.getValue()));
|
|
}
|
|
|
|
if (object.receiveShadow !== undefined && object.receiveShadow !== objectReceiveShadow.getValue()) {
|
|
editor.execute(new SetValueCommand(object, 'receiveShadow', objectReceiveShadow.getValue()));
|
|
object.material.needsUpdate = true;
|
|
}
|
|
|
|
if (object.shadow !== undefined) {
|
|
if (object.shadow.radius !== objectShadowRadius.getValue()) {
|
|
editor.execute(new SetValueCommand(object.shadow, 'radius', objectShadowRadius.getValue()));
|
|
}
|
|
}
|
|
|
|
try {
|
|
var userData = JSON.parse(objectUserData.getValue());
|
|
|
|
if (JSON.stringify(object.userData) != JSON.stringify(userData)) {
|
|
editor.execute(new SetValueCommand(object, 'userData', userData));
|
|
}
|
|
} catch (exception) {
|
|
console.warn(exception);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 控制每行显示隐藏
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.updateRows = function (object) {
|
|
var objectFovRow = UI.get('objectFovRow');
|
|
var objectNearRow = UI.get('objectNearRow');
|
|
var objectFarRow = UI.get('objectFarRow');
|
|
var objectIntensityRow = UI.get('objectIntensityRow');
|
|
var objectColorRow = UI.get('objectColorRow');
|
|
var objectGroundColorRow = UI.get('objectGroundColorRow');
|
|
var objectDistanceRow = UI.get('objectDistanceRow');
|
|
var objectAngleRow = UI.get('objectAngleRow');
|
|
var objectPenumbraRow = UI.get('objectPenumbraRow');
|
|
var objectDecayRow = UI.get('objectDecayRow');
|
|
var objectShadowRow = UI.get('objectShadowRow');
|
|
var objectReceiveShadow = UI.get('objectReceiveShadow');
|
|
var objectShadowRadius = UI.get('objectShadowRadius');
|
|
|
|
var properties = {
|
|
'fov': objectFovRow,
|
|
'near': objectNearRow,
|
|
'far': objectFarRow,
|
|
'intensity': objectIntensityRow,
|
|
'color': objectColorRow,
|
|
'groundColor': objectGroundColorRow,
|
|
'distance': objectDistanceRow,
|
|
'angle': objectAngleRow,
|
|
'penumbra': objectPenumbraRow,
|
|
'decay': objectDecayRow,
|
|
'castShadow': objectShadowRow,
|
|
'receiveShadow': objectReceiveShadow,
|
|
'shadow': objectShadowRadius
|
|
};
|
|
|
|
for (var property in properties) {
|
|
properties[property].dom.style.display = object[property] !== undefined ? '' : 'none';
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 更新平移旋转缩放面板
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.updateTransformRows = function (object) {
|
|
var objectRotationRow = UI.get('objectRotationRow');
|
|
var objectScaleRow = UI.get('objectScaleRow');
|
|
|
|
if (object instanceof THREE.Light || (object instanceof THREE.Object3D && object.userData.targetInverse)) {
|
|
objectRotationRow.dom.style.display = 'none';
|
|
objectScaleRow.dom.style.display = 'none';
|
|
} else {
|
|
objectRotationRow.dom.style.display = '';
|
|
objectScaleRow.dom.style.display = '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 刷新物体面板ui
|
|
* @param {*} object
|
|
*/
|
|
ObjectPanelEvent.prototype.updateUI = function (object) {
|
|
var objectType = UI.get('objectType');
|
|
var objectUUID = UI.get('objectUUID');
|
|
var objectName = UI.get('objectName');
|
|
var objectPositionX = UI.get('objectPositionX');
|
|
var objectPositionY = UI.get('objectPositionY');
|
|
var objectPositionZ = UI.get('objectPositionZ');
|
|
var objectRotationX = UI.get('objectRotationX');
|
|
var objectRotationY = UI.get('objectRotationY');
|
|
var objectRotationZ = UI.get('objectRotationZ');
|
|
var objectScaleX = UI.get('objectScaleX');
|
|
var objectScaleY = UI.get('objectScaleY');
|
|
var objectScaleZ = UI.get('objectScaleZ');
|
|
var objectFov = UI.get('objectFov');
|
|
var objectNear = UI.get('objectNear');
|
|
var objectFar = UI.get('objectFar');
|
|
var objectIntensity = UI.get('objectIntensity');
|
|
var objectColor = UI.get('objectColor');
|
|
var objectGroundColor = UI.get('objectGroundColor');
|
|
var objectDistance = UI.get('objectDistance');
|
|
var objectAngle = UI.get('objectAngle');
|
|
var objectPenumbra = UI.get('objectPenumbra');
|
|
var objectDecay = UI.get('objectDecay');
|
|
var objectVisible = UI.get('objectVisible');
|
|
var objectCastShadow = UI.get('objectCastShadow');
|
|
var objectReceiveShadow = UI.get('objectReceiveShadow');
|
|
var objectShadowRadius = UI.get('objectShadowRadius');
|
|
var objectVisible = UI.get('objectVisible');
|
|
var objectUserData = UI.get('objectUserData');
|
|
|
|
objectType.setValue(object.type);
|
|
|
|
objectUUID.setValue(object.uuid);
|
|
objectName.setValue(object.name);
|
|
|
|
objectPositionX.setValue(object.position.x);
|
|
objectPositionY.setValue(object.position.y);
|
|
objectPositionZ.setValue(object.position.z);
|
|
|
|
objectRotationX.setValue(object.rotation.x * THREE.Math.RAD2DEG);
|
|
objectRotationY.setValue(object.rotation.y * THREE.Math.RAD2DEG);
|
|
objectRotationZ.setValue(object.rotation.z * THREE.Math.RAD2DEG);
|
|
|
|
objectScaleX.setValue(object.scale.x);
|
|
objectScaleY.setValue(object.scale.y);
|
|
objectScaleZ.setValue(object.scale.z);
|
|
|
|
if (object.fov !== undefined) {
|
|
objectFov.setValue(object.fov);
|
|
}
|
|
|
|
if (object.near !== undefined) {
|
|
objectNear.setValue(object.near);
|
|
}
|
|
|
|
if (object.far !== undefined) {
|
|
objectFar.setValue(object.far);
|
|
}
|
|
|
|
if (object.intensity !== undefined) {
|
|
objectIntensity.setValue(object.intensity);
|
|
}
|
|
|
|
if (object.color !== undefined) {
|
|
objectColor.setHexValue(object.color.getHexString());
|
|
}
|
|
|
|
if (object.groundColor !== undefined) {
|
|
objectGroundColor.setHexValue(object.groundColor.getHexString());
|
|
}
|
|
|
|
if (object.distance !== undefined) {
|
|
objectDistance.setValue(object.distance);
|
|
}
|
|
|
|
if (object.angle !== undefined) {
|
|
objectAngle.setValue(object.angle);
|
|
}
|
|
|
|
if (object.penumbra !== undefined) {
|
|
objectPenumbra.setValue(object.penumbra);
|
|
}
|
|
|
|
if (object.decay !== undefined) {
|
|
objectDecay.setValue(object.decay);
|
|
}
|
|
|
|
if (object.castShadow !== undefined) {
|
|
objectCastShadow.setValue(object.castShadow);
|
|
}
|
|
|
|
if (object.receiveShadow !== undefined) {
|
|
objectReceiveShadow.setValue(object.receiveShadow);
|
|
}
|
|
|
|
if (object.shadow !== undefined) {
|
|
objectShadowRadius.setValue(object.shadow.radius);
|
|
}
|
|
|
|
objectVisible.setValue(object.visible);
|
|
|
|
try {
|
|
objectUserData.setValue(JSON.stringify(object.userData, null, ' '));
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
|
|
objectUserData.dom.style.borderColor = 'transparent';
|
|
objectUserData.dom.style.backgroundColor = '';
|
|
|
|
this.updateTransformRows(object);
|
|
};
|
|
|
|
export default ObjectPanelEvent; |