From c6318b3f89366e8d8df01e4f6f86178ff2aea606 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Wed, 19 Sep 2018 12:16:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A9=E7=A9=BA=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/SceneComponent.js | 48 +-------------- .../src/editor/menubar/ComponentMenu.js | 61 +++++++++++-------- ShadowEditor.Web/src/object/Sky.js | 34 +++++++++++ 3 files changed, 72 insertions(+), 71 deletions(-) diff --git a/ShadowEditor.Web/src/component/SceneComponent.js b/ShadowEditor.Web/src/component/SceneComponent.js index 5c5e1de0..96427506 100644 --- a/ShadowEditor.Web/src/component/SceneComponent.js +++ b/ShadowEditor.Web/src/component/SceneComponent.js @@ -47,8 +47,7 @@ SceneComponent.prototype.render = function () { options: { 'Color': '纯色', 'Image': '背景图片', - 'SkyBox': '立体贴图', - 'Sky': '天空' + 'SkyBox': '立体贴图' }, onChange: this.onChangeBackgroundType.bind(this) }] @@ -371,56 +370,11 @@ SceneComponent.prototype.onChangeBackgroundType = function () { // 切换背景 backgroundPosZRow.dom.style.display = ''; backgroundNegZRow.dom.style.display = ''; break; - case 'Sky': - backgroundColorRow.dom.style.display = 'none'; - backgroundImageRow.dom.style.display = 'none'; - backgroundPosXRow.dom.style.display = 'none'; - backgroundNegXRow.dom.style.display = 'none'; - backgroundPosYRow.dom.style.display = 'none'; - backgroundNegYRow.dom.style.display = 'none'; - backgroundPosZRow.dom.style.display = 'none'; - backgroundNegZRow.dom.style.display = 'none'; - this.showSky(); - break; } this.update(); }; -SceneComponent.prototype.showSky = function () { - var editor = this.app.editor; - - var distance = 400000; - - var sky = new THREE.Sky(); - sky.scale.setScalar(450000); - editor.execute(new AddObjectCommand(sky)); - - var sunSphere = new THREE.Mesh( - new THREE.SphereBufferGeometry(20000, 16, 8), - new THREE.MeshBasicMaterial({ color: 0xffffff }) - ); - - sunSphere.position.y = - 700000; - sunSphere.visible = false; - - editor.execute(new AddObjectCommand(sunSphere)); - - var uniforms = sky.material.uniforms; - uniforms.turbidity.value = 10; - uniforms.rayleigh.value = 2; - uniforms.luminance.value = 1; - uniforms.mieCoefficient.value = 0.005; - uniforms.mieDirectionalG.value = 0.8; - var theta = Math.PI * (0.49 - 0.5); - var phi = 2 * Math.PI * (0.25 - 0.5); - sunSphere.position.x = distance * Math.cos(phi); - sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta); - sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta); - sunSphere.visible = true; - uniforms.sunPosition.value.copy(sunSphere.position); -}; - SceneComponent.prototype.onChangeFogType = function () { // 切换雾类型 var fogType = UI.get('fogType', this.id); var fogColorRow = UI.get('fogColorRow', this.id); diff --git a/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js b/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js index 7a0f5aa4..3c5f11c7 100644 --- a/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js +++ b/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js @@ -1,5 +1,6 @@ import UI from '../../ui/UI'; import AddObjectCommand from '../../command/AddObjectCommand'; +import Sky from '../../object/Sky'; import Smoke from '../../particle/Smoke'; /** @@ -28,18 +29,6 @@ ComponentMenu.prototype.render = function () { xtype: 'div', cls: 'options', children: [{ - xtype: 'div', - html: '刚体', - cls: 'option', - onClick: this.addRigidBody.bind(this) - }, { - xtype: 'div', - html: '碰撞体', - cls: 'option', - onClick: this.addCollision.bind(this) - }, { - xtype: 'hr' - }, { xtype: 'div', html: '背景音乐', cls: 'option', @@ -49,6 +38,11 @@ ComponentMenu.prototype.render = function () { html: '粒子发射器', cls: 'option', onClick: this.ParticleEmitter.bind(this) + }, { + xtype: 'div', + html: '天空', + cls: 'option', + onClick: this.onAddSky.bind(this) }, { xtype: 'div', html: '火焰', @@ -59,6 +53,18 @@ ComponentMenu.prototype.render = function () { html: '烟', cls: 'option', onClick: this.onAddSmoke.bind(this) + }, { + xtype: 'hr' + }, { + xtype: 'div', + html: '刚体', + cls: 'option', + onClick: this.addRigidBody.bind(this) + }, { + xtype: 'div', + html: '碰撞体', + cls: 'option', + onClick: this.addCollision.bind(this) }] }] }); @@ -66,18 +72,6 @@ ComponentMenu.prototype.render = function () { container.render(); } -// --------------------------- 添加刚体 ------------------------------------ - -ComponentMenu.prototype.addRigidBody = function () { - -}; - -// ---------------------------- 添加碰撞体 ----------------------------------- - -ComponentMenu.prototype.addCollision = function () { - -}; - // ---------------------------- 添加背景音乐 ---------------------------------- ComponentMenu.prototype.onAddBackgroundMusic = function () { @@ -149,6 +143,13 @@ ComponentMenu.prototype.ParticleEmitter = function () { group.tick(0); }; +// ---------------------------- 天空 ---------------------------------------- + +ComponentMenu.prototype.onAddSky = function () { + var obj = new Sky(); + this.app.editor.execute(new AddObjectCommand(obj)); +}; + // ---------------------------- 添加火焰 ------------------------------------- ComponentMenu.prototype.onAddFire = function () { @@ -223,4 +224,16 @@ ComponentMenu.prototype.onAddSmoke = function () { smoke.update(0); }; +// --------------------------- 添加刚体 ------------------------------------ + +ComponentMenu.prototype.addRigidBody = function () { + +}; + +// ---------------------------- 添加碰撞体 ----------------------------------- + +ComponentMenu.prototype.addCollision = function () { + +}; + export default ComponentMenu; \ No newline at end of file diff --git a/ShadowEditor.Web/src/object/Sky.js b/ShadowEditor.Web/src/object/Sky.js index d376aa75..2daf6f29 100644 --- a/ShadowEditor.Web/src/object/Sky.js +++ b/ShadowEditor.Web/src/object/Sky.js @@ -1,7 +1,41 @@ import BaseObject from './BaseObject'; +/** + * 天空 + */ function Sky() { BaseObject.call(this); + + var distance = 400000; + + var sky = new THREE.Sky(); + sky.scale.setScalar(450000); + + this.add(sky); + + var sunSphere = new THREE.Mesh( + new THREE.SphereBufferGeometry(20000, 16, 8), + new THREE.MeshBasicMaterial({ color: 0xffffff }) + ); + + sunSphere.position.y = - 700000; + sunSphere.visible = false; + + this.add(sunSphere); + + var uniforms = sky.material.uniforms; + uniforms.turbidity.value = 10; + uniforms.rayleigh.value = 2; + uniforms.luminance.value = 1; + uniforms.mieCoefficient.value = 0.005; + uniforms.mieDirectionalG.value = 0.8; + var theta = Math.PI * (0.49 - 0.5); + var phi = 2 * Math.PI * (0.25 - 0.5); + sunSphere.position.x = distance * Math.cos(phi); + sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta); + sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta); + sunSphere.visible = true; + uniforms.sunPosition.value.copy(sunSphere.position); } Sky.prototype = Object.create(BaseObject.prototype);