增加三维沙盘天气模块

src/jlmap3d/config/SetCamera.js

@@ -1,7 +1,10 @@
+import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+
 export function SetCamera(dom) {
-  var camera = new THREE.PerspectiveCamera(60, dom.clientWidth/dom.clientHeight, 1, 2000);
+  var camera = new THREE.PerspectiveCamera(60, dom.clientWidth/dom.clientHeight, 1, 3000);
   camera.position.set( 0, 0, 0 );
   camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
+
   return camera;
 }

src/jlmap3d/config/SetScene.js

@@ -12,6 +12,7 @@ export function SetScene(project) {
     bgTexture = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/background/other.jpg");
   }
   scene.background = bgTexture;
+
   // cubeTexture.dispos e();
   return scene;
 }

src/jlmap3d/config/WeatherManager.js

@@ -0,0 +1,105 @@
+import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+
+export function WeatherManager(){
+  let scope = this;
+  let spriteSwitch = false;
+  let spriteSpeed = 0;
+  let spriteRota = 0;
+
+  let sunnyTexture = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/background/sunny.jpg" );
+  let eveningTexture = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/background/evening.jpg" );
+  let rainTexture = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/background/rain.png" );
+
+  let rainPoint = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/sprite/rainsprite.png" );
+  let snowPoint = new THREE.TextureLoader().load(JL3D_LOCAL_STATIC+"/sprite/snowsprite.png" );
+
+  let geometry = new THREE.SphereGeometry( 3000, 32, 32 );
+  let material = new THREE.MeshBasicMaterial( {map:sunnyTexture,side:THREE.DoubleSide} );
+  scope.skybox = new THREE.Mesh( geometry, material);
+  scope.skybox.position.set( 0, 0, 0 );
+
+  let spritMaterial = new THREE.PointsMaterial({    //用图片初始化顶点材质
+    size: 2,
+    map: snowPoint,
+    transparent: true
+  });
+
+  let positions = [];
+
+  this.drops = 20000;
+  this.geom = new THREE.BufferGeometry();
+  this.velocityY = [];
+
+  for(let i = 0; i < this.drops; i++){
+    positions.push( Math.random() * 800 - 400 );
+    positions.push( Math.random() * 800 );
+    positions.push( Math.random() * 800 - 400 );
+    this.velocityY.push(0.5 + Math.random() / 2);  //初始化每个粒子的坐标和粒子在Y方向的速度
+  }
+
+  //确定各个顶点的位置坐标
+  this.geom.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+  this.instance = new THREE.Points(this.geom, spritMaterial);  //初始化粒子系统
+
+
+
+  this.changeweather = function(type){
+    if(type == "sunny"){
+      scope.skybox.material.map = sunnyTexture;
+      spriteSwitch = false;
+    }
+    if(type == "evening"){
+      scope.skybox.material.map = eveningTexture;
+      spriteSwitch = false;
+    }
+    if(type == "rain"){
+      scope.skybox.material.map = rainTexture;
+      scope.instance.material.map = rainPoint;
+      spriteSwitch = true;
+      spriteSpeed = 0.01;
+      spriteRota = 0;
+      scope.instance.material.size = 0.5;
+    }
+    if(type == "snow"){
+      scope.skybox.material.map = rainTexture;
+      scope.instance.material.map = snowPoint;
+      spriteSwitch = true;
+      spriteSpeed = 0.0001;
+      spriteRota = 0.002;
+      scope.instance.material.size = 1.5;
+    }
+
+    if(spriteSwitch == true){
+      if(scope.skybox.children.length == 0){
+        scope.skybox.add(scope.instance);
+      }
+    }else{
+      scope.skybox.remove(scope.instance);
+    }
+
+    scope.skybox.material.map.needsUpdate = true;
+    scope.instance.material.map.needsUpdate = true;
+  }
+
+  this.update = function(cameraPos){
+
+    scope.skybox.position.x = cameraPos.x;
+    scope.skybox.position.z = cameraPos.z;
+
+    if(spriteSwitch == true){
+      let positions = this.geom.attributes.position.array;
+
+      for(let i=0; i<this.drops * 3; i+=3){    //改变Y坐标，加速运动
+        this.velocityY[i/3] += Math.random() * spriteSpeed;
+        positions[ i + 1 ] -=  this.velocityY[i/3];
+        if(positions[ i + 1 ] < 30){
+          positions[ i + 1 ] =  800;
+          this.velocityY[i/3] = 0.5 + Math.random()* spriteSpeed;
+        }
+      }
+      this.instance.rotation.y += spriteRota;
+      this.geom.attributes.position.needsUpdate = true;
+    }
+
+  }
+}

src/jlmap3d/jl3dsimulation/jlmap3d.js

@@ -14,6 +14,8 @@ import { SetRender } from '@/jlmap3d/config/SetRender';
 import { SetScene } from '@/jlmap3d/config/SetScene';
 import { SetLights } from '@/jlmap3d/config/SetLights';
 
+import { WeatherManager } from '@/jlmap3d/config/WeatherManager';
+
 //controls
 import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
 // import { DragControls } from '@/jlmap3d/main/control/DragControls';
@@ -55,12 +57,20 @@ export function JLmap3d(dom, data,skinCode,storemod,routegroup,project) {
   let scenestation = new THREE.Group();
   scene.add(scenesimulation);
   scene.add(scenestation);
+
+  let weatherManager = new WeatherManager();
+  scene.add(weatherManager.skybox);
+  // scene.add(weatherManager.instance);
+
+  // scene.add(sphere);
+
   //定义镜头操作
   let controls = new THREE.OrbitControls(camera);
   controls.maxPolarAngle = Math.PI/2;
   // controls.screenSpacePanning = true;
   //controls.minPolarAngle = Math.PI/8;
-  controls.maxDistance = 1000;
+  controls.maxDistance = 800;
+
   //模型加载器
   this.assetloader = new AssetLoader();
   //替换材质组，例：信号机不同灯光
@@ -124,6 +134,14 @@ export function JLmap3d(dom, data,skinCode,storemod,routegroup,project) {
     //循环渲染
     requestAnimationFrame(animate);
     //根据相机渲染场景
+
+    // sphere
+    // if(sphere){
+    //   sphere.position.x = camera.position.x;
+    //   sphere.position.z = camera.position.z;
+    // }
+    weatherManager.update(camera.position);
+    // console.log(camera.position);
     renderer.render(scene,camera);
     // stats.update();
   }
@@ -219,7 +237,6 @@ export function JLmap3d(dom, data,skinCode,storemod,routegroup,project) {
 
   //切换显示列车信息
   this.showtrainmsg = function(showtype){
-    console.log(trainlisttest);
     if(showtype == "show"){
       for(let st=0;st<trainlisttest.textlist.length;st++){
         trainlisttest.list[trainlisttest.textlist[st].name].children[0].add(trainlisttest.textlist[st]);
@@ -230,7 +247,10 @@ export function JLmap3d(dom, data,skinCode,storemod,routegroup,project) {
       }
     }
   };
-
+  this.changeweather = function(weathertype){
+    // console.log(weathertype);
+    weatherManager.changeweather(weathertype);
+  }
   //开启轨道镜头交互
   this.animateon = function(){
     controls.enabled = true;

src/views/jlmap3d/simulation/jl3dsimulation.vue

@@ -18,7 +18,7 @@
 
     <Jlmap3d-Menu :trainlist="trainlist" :stationlist="stationlist" @sstation="sstation" @strain="strain" />
 
-    <Jlmap3d-Config @showstationmsg="showstationmsg" @showtrainmsg="showtrainmsg" />
+    <Jlmap3d-Config @showstationmsg="showstationmsg" @showtrainmsg="showtrainmsg" @changeweather="changeweather"/>
 
     <!-- <Jlmap3d-Msg v-bind:msgdata="msgdata" >
     </Jlmap3d-Msg > -->
@@ -26,7 +26,6 @@
     <div id="testjlmap3d" class="jlmap3ddraw">
       <canvas id="canvastexture" />
     </div>
-
   </div>
 
 </template>
@@ -167,6 +166,9 @@ export default {
         showtrainmsg(showtype) {
             this.jlmap3d.showtrainmsg(showtype);
         },
+        changeweather(weathertype){
+          this.jlmap3d.changeweather(weathertype);
+        },
         updatemenulist(stationlist, trainlist) {
             const stations = [];
             for (const k in stationlist) {

src/views/jlmap3d/simulation/show/configmenu.vue

@@ -2,9 +2,16 @@
 
   <div class="configmenu">
     <el-button-group>
+      <el-button type="primary" @click="showweather">天气设置</el-button>
       <el-button type="primary" @click="showstation">{{bt1name}}</el-button>
       <el-button type="primary" @click="showtrain">{{bt2name}}</el-button>
     </el-button-group>
+
+    <div class="weathermanager"v-if="isShowWeather" >
+      <div  class="weatherbtn" v-for="(element,index) in weatherMenu" @click="changeweather(element.type,index)" :class="{active:index==isActive}"  :style="{'background-image': 'url('+element.pic+')'}"></div>
+    </div>
+
+
   </div>
 
 </template>
@@ -12,6 +19,9 @@
 <script>
 
 
+import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+
+
 export default {
   name: 'Jlmap3dConfig',
   components: {
@@ -19,8 +29,28 @@ export default {
   },
   data() {
     return {
-        bt1name:this.$t('jlmap3d.stationInfoDisplay'),
-        bt2name:this.$t('jlmap3d.trainInfoDisplay'),
+      isActive:0,
+      isShowWeather:false,
+      bt1name:this.$t('jlmap3d.stationInfoDisplay'),
+      bt2name:this.$t('jlmap3d.trainInfoDisplay'),
+      weatherMenu:[
+        {
+          type:'sunny',
+          pic:JL3D_LOCAL_STATIC+'/sprite/sunny.png',
+        },
+        {
+          type:'evening',
+          pic:JL3D_LOCAL_STATIC+'/sprite/evening.png',
+        },
+        {
+          type:'rain',
+          pic:JL3D_LOCAL_STATIC+'/sprite/rain.png',
+        },
+        {
+          type:'snow',
+          pic:JL3D_LOCAL_STATIC+'/sprite/snow.png',
+        }
+      ],
     }
   },
   beforeDestroy() {
@@ -56,7 +86,17 @@ export default {
       }
 
     },
-
+    showweather(){
+      if(this.isShowWeather == true){
+        this.isShowWeather = false;
+      }else{
+        this.isShowWeather = true;
+      }
+    },
+    changeweather(type,index){
+      this.isActive=index;
+      this.$emit('changeweather',type);
+    },
   },
   mounted() {
 
@@ -75,4 +115,26 @@ export default {
     top: 28px;
   }
 
+
+  .weathermanager{
+    position:absolute;
+    width:240px;
+    height:60px;
+    //
+
+    // display: inline;
+  }
+
+  .weatherbtn{
+    float: left;
+    border-radius: 8px;
+    border-color: #409EFF;
+    // background-color: #ffffff;
+    width:60px;
+    height:60px;
+  }
+
+  .active{
+    background-color:#409EFF;
+  }
 </style>