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

增加天空组件。

Browse Source
This commit is contained in:
liteng 2018-09-19 12:16:26 +08:00
parent 3ddaea4cb0
commit c6318b3f89
3 changed files with 72 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ShadowEditor.Web/src/component/SceneComponent.js
View File

@ -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);

61
ShadowEditor.Web/src/editor/menubar/ComponentMenu.js
View File

@ -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;

34
ShadowEditor.Web/src/object/Sky.js
View File

@ -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);