diff --git a/ShadowEditor.Web/src/component/SceneComponent.js b/ShadowEditor.Web/src/component/SceneComponent.js new file mode 100644 index 00000000..9c5c1cc5 --- /dev/null +++ b/ShadowEditor.Web/src/component/SceneComponent.js @@ -0,0 +1,69 @@ +import BaseComponent from './BaseComponent'; +import SetValueCommand from '../command/SetValueCommand'; + +/** + * 场景组件 + * @author tengge / https://github.com/tengge1 + * @param {*} options + */ +function SceneComponent(options) { + BaseComponent.call(this, options); + this.selected = null; +} + +SceneComponent.prototype = Object.create(BaseComponent.prototype); +SceneComponent.prototype.constructor = SceneComponent; + +SceneComponent.prototype.render = function () { + var data = { + xtype: 'div', + id: 'scenePanel', + scope: this.id, + parent: this.parent, + cls: 'Panel', + style: { + borderTop: 0, + display: 'none' + }, + children: [{ + xtype: 'row', + children: [{ + xtype: 'label', + style: { + color: '#555', + fontWeight: 'bold' + }, + text: '场景组件' + }] + }] + }; + + 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)); +}; + +SceneComponent.prototype.onObjectSelected = function () { + this.updateUI(); +}; + +SceneComponent.prototype.onObjectChanged = function () { + this.updateUI(); +}; + +SceneComponent.prototype.updateUI = function () { + var container = UI.get('scenePanel', this.id); + var editor = this.app.editor; + if (editor.selected && editor.selected instanceof THREE.Scene) { + container.dom.style.display = ''; + } else { + container.dom.style.display = 'none'; + return; + } + + this.selected = editor.selected; +}; + +export default SceneComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js b/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js index 8402d504..0f35bc43 100644 --- a/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js +++ b/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js @@ -6,6 +6,7 @@ import LightComponent from '../../component/LightComponent'; import ShadowComponent from '../../component/ShadowComponent'; import GeometryComponent from '../../component/GeometryComponent'; import MaterialComponent from '../../component/MaterialComponent'; +import SceneComponent from '../../component/SceneComponent'; /** * 属性面板 @@ -27,6 +28,7 @@ PropertyPanel.prototype.render = function () { children: [ new BasicComponent({ app: this.app }), new TransformComponent({ app: this.app }), + new SceneComponent({ app: this.app }), new CameraComponent({ app: this.app }), new LightComponent({ app: this.app }), new ShadowComponent({ app: this.app }),