diff --git a/src/jlmap3d/config/SetCamera.js b/src/jlmap3d/config/SetCamera.js index 7a41dfeca..d1a4894c1 100644 --- a/src/jlmap3d/config/SetCamera.js +++ b/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; } diff --git a/src/jlmap3d/config/SetScene.js b/src/jlmap3d/config/SetScene.js index 1014154be..c83223890 100644 --- a/src/jlmap3d/config/SetScene.js +++ b/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; } diff --git a/src/jlmap3d/config/WeatherManager.js b/src/jlmap3d/config/WeatherManager.js new file mode 100644 index 000000000..e49c6d76c --- /dev/null +++ b/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 - + @@ -26,7 +26,6 @@
- @@ -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) { diff --git a/src/views/jlmap3d/simulation/show/configmenu.vue b/src/views/jlmap3d/simulation/show/configmenu.vue index 779a5c4bd..9ffedcf35 100644 --- a/src/views/jlmap3d/simulation/show/configmenu.vue +++ b/src/views/jlmap3d/simulation/show/configmenu.vue @@ -2,9 +2,16 @@
+ 天气设置 {{bt1name}} {{bt2name}} + +
+
+
+ +
@@ -12,6 +19,9 @@