<template>
|
<div class="setBox">
|
<div class="closeBtn">
|
<span>设置与场景</span><span class="closeSpan" @click="closeJm">×</span>
|
</div>
|
<hr />
|
<div class="tx">
|
<div class="tx-in">
|
<div class="in-yxw">
|
<!-- <el-checkbox
|
v-model="checkedYu"
|
class="y"
|
label="雨"
|
@change="yu('checkbox')"
|
></el-checkbox> -->
|
|
<label class="labelText">亮度</label>
|
<el-slider
|
class="sl"
|
v-model="brightness"
|
@input="ld()"
|
:step="0.1"
|
:min="0"
|
:max="2"
|
></el-slider>
|
</div>
|
<div class="in-yxw">
|
<!-- <el-checkbox
|
v-model="checkedXue"
|
class="y"
|
label="雪"
|
@change="xue('checkbox')"
|
></el-checkbox> -->
|
|
<label class="labelText">对比度</label>
|
<el-slider
|
class="sl"
|
v-model="contrast"
|
@input="dbd()"
|
:step="0.1"
|
:min="0"
|
:max="2"
|
></el-slider>
|
</div>
|
<div class="in-yxw">
|
<!-- <el-checkbox
|
v-model="checkedWu"
|
class="y"
|
label="雾"
|
@change="wu('checkbox')"
|
></el-checkbox> -->
|
<label class="labelText">饱和度</label>
|
<el-slider
|
class="sl"
|
v-model="saturation"
|
@input="bhd()"
|
:step="0.1"
|
:min="0"
|
:max="2"
|
></el-slider>
|
</div>
|
|
<div class="in-yxw">
|
<el-checkbox
|
v-model="checkedYu"
|
class="y"
|
label="雨"
|
@change="yu('checkbox')"
|
></el-checkbox>
|
<el-slider
|
class="sl"
|
v-model="value1"
|
:show-tooltip="false"
|
@change="yu"
|
:disabled="!checkedYu"
|
></el-slider>
|
</div>
|
<div class="in-yxw">
|
<el-checkbox
|
v-model="checkedXue"
|
class="y"
|
label="雪"
|
@change="xue('checkbox')"
|
></el-checkbox>
|
<el-slider
|
class="sl"
|
v-model="value2"
|
:show-tooltip="false"
|
@change="xue"
|
:disabled="!checkedXue"
|
></el-slider>
|
</div>
|
<div class="in-yxw">
|
<el-checkbox
|
v-model="checkedWu"
|
class="y"
|
label="雾"
|
@change="wu('checkbox')"
|
></el-checkbox>
|
<el-slider
|
class="sl"
|
v-model="value3"
|
:show-tooltip="false"
|
@change="wu"
|
:disabled="!checkedWu"
|
></el-slider>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "effects",
|
data() {
|
return {
|
brightness: 1, // 亮度
|
contrast: 1, //对比度
|
saturation: 1, //饱和度
|
status: false, //特效
|
checkedYu: false,
|
checkedXue: false,
|
checkedWu: false,
|
value1: 0,
|
value2: 0,
|
value3: 0,
|
enableLight: false,
|
};
|
},
|
mounted() {
|
sgworld.environment.showEffect("colorAdjustment");
|
},
|
methods: {
|
ld() {
|
sgworld.environment.colorAdjustment.brightness = this.brightness;
|
},
|
dbd() {
|
sgworld.environment.colorAdjustment.contrast = this.contrast;
|
},
|
bhd() {
|
sgworld.environment.colorAdjustment.saturation = this.saturation;
|
},
|
|
closeJm() {
|
this.$store.commit("showSetBox", false);
|
},
|
// yhadd
|
//雨雪雾
|
yu(type) {
|
this.passSta();
|
if (type === "checkbox") {
|
if (this.checkedYu) {
|
!this.value1 && (this.value1 = 20);
|
} else {
|
this.value1 = 0;
|
}
|
}
|
if (!this.value1) {
|
sgworld.Analysis.createWeather("rain", false);
|
} else {
|
var rainValue = {
|
test1: this.value1 / 10,
|
test2: 0.3,
|
test3: -0.4,
|
test4: 1.0,
|
};
|
sgworld.Analysis.createWeather("rain", true, rainValue);
|
}
|
},
|
xue(type) {
|
this.passSta();
|
if (type === "checkbox") {
|
if (this.checkedXue) {
|
!this.value2 && (this.value2 = 20);
|
} else {
|
this.value2 = 0;
|
}
|
}
|
if (!this.value2) {
|
sgworld.Analysis.createWeather("snow", false);
|
} else {
|
var snowValue = {
|
test1: this.value2 / 10,
|
test2: 1.0,
|
test3: 0.5,
|
test4: 0.5,
|
};
|
sgworld.Analysis.createWeather("snow", true, snowValue);
|
}
|
},
|
wu(type) {
|
this.passSta();
|
if (type === "checkbox") {
|
if (this.checkedWu) {
|
!this.value3 && (this.value3 = 20);
|
} else {
|
this.value3 = 0;
|
}
|
}
|
if (!this.value3) {
|
sgworld.Analysis.createWeather("fog", false);
|
} else {
|
var fogValue = {
|
distance: 5050 - this.value3 * 50.3,
|
color: "rgba(255,255,255,0.9)",
|
};
|
sgworld.Analysis.createWeather("fog", true, fogValue);
|
}
|
},
|
passSta() {
|
var sta = this.checkedYu || this.checkedXue || this.checkedWu;
|
if (sta) {
|
this.$parent.$parent.$parent.speEffectImgSta = true;
|
// this.$parent.$parent.$parent.sceneImgSta = true;
|
} else {
|
this.$parent.$parent.$parent.speEffectImgSta = false;
|
// this.$parent.$parent.$parent.sceneImgSta = false;
|
}
|
},
|
},
|
};
|
</script>
|
|
|
<style scoped>
|
.setBox {
|
width: 250px;
|
padding: 20px;
|
position: absolute;
|
z-index: 9999999;
|
pointer-events: all;
|
background: rgba(14, 50, 143, 0.6);
|
border: 3px rgba(255, 255, 255, 0.5) solid;
|
border-radius: 7px;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
|
color: #fff;
|
top: 40%;
|
right: 350px;
|
transform: translate(0, -50%);
|
}
|
|
/* yhadd */
|
.el-checkbox {
|
color: white;
|
}
|
|
.el-checkbox /deep/ .el-checkbox__label {
|
font-size: 16px;
|
}
|
|
.closeBtn {
|
color: white;
|
position: relative;
|
height: 21px;
|
line-height: 21px;
|
font-size: 17px;
|
padding-left: 10px;
|
}
|
|
.closeSpan {
|
position: absolute;
|
font-size: 30px;
|
right: 0;
|
color: white;
|
transition: 1s;
|
}
|
|
.closeSpan:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
|
.tx {
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
|
.tx::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
.tx::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
.tx::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.in-yxw {
|
width: 255px;
|
margin-right: 20px;
|
display: inline-block;
|
}
|
|
.slider {
|
width: 50px;
|
}
|
|
.y {
|
float: left;
|
top: 8px;
|
}
|
|
.check {
|
float: unset;
|
margin: 3px 0;
|
}
|
|
.sl {
|
margin-left: 60px;
|
width: calc(100% - 90px);
|
}
|
|
.tx-in {
|
padding: 0 10px;
|
}
|
|
.labelText {
|
color: white;
|
display: block;
|
float: left;
|
padding-top: 6px;
|
}
|
</style>
|
