From acc55580cc24c4154efb9042acecdd4ceea27d2e Mon Sep 17 00:00:00 2001 From: SeannaeS <9564773+seannaes@user.noreply.gitee.com> Date: Sun, 19 Jun 2022 16:33:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E4=BA=86=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=B9=B3=E9=9D=A2=E6=B7=BB=E5=8A=A0=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 +-- js/rainAndWave.js | 157 +++++++++++++++++++++++----------------------- 2 files changed, 82 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 7b21628..18e9623 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,9 @@ Rainbow in the pond - - - + + + @@ -27,7 +27,7 @@

视野

-

@陈卓勋 @林孟颖 @张丁夕

+

@张丁夕 @林孟颖 @陈卓勋

diff --git a/js/rainAndWave.js b/js/rainAndWave.js index 783fbaf..db29d07 100644 --- a/js/rainAndWave.js +++ b/js/rainAndWave.js @@ -26,9 +26,11 @@ const World = { const lighteningPara = { //在从上一次闪电结束，间隔lighteningGap开始的一段长为lighteningDuration的时间内会有闪电 // 闪电时间会随每次闪电结束随机调整 - lighteningGap : 5000, //ms - lighteningDuration : 200, //ms - lastlighteningTime : 0, // 上一次闪电时间 + lighteningGapMax : 10000, // ms + lighteningGapMin : 5000, // ms + lighteningGap : 7500, // ms + lighteningDuration : 200, // ms + lastlighteningTime : 0, // 上一次闪电时刻 lmMax : 200, //最大亮度 lmMin : 20, //最小亮度 } @@ -58,6 +60,8 @@ var wavePara = { // 波纹参数 scaleInc : 0.3, //每次刷新缩放比例增幅 scaleMax : 3, //最大缩放比例 } + +// 页面交互接口 rainPara.density = document.getElementById("rainfall"); AnimPara.refreshTimeGap = document.getElementById("refresh"); windPara.direction = document.getElementById("windDir"); @@ -65,6 +69,7 @@ windPara.windSpeed = document.getElementById("windStr"); World.lookAtMe = document.getElementById("cameraVw"); World.fieldOfView = document.getElementById("cameraFOV"); + function change() { var density = Number(rainPara.density.value), windDir = Number(windPara.direction.value), @@ -86,6 +91,7 @@ function change() { World.lookAtMe.style.backgroundSize = `${cameraVwPercent}%, 100%`; World.fieldOfView.style.backgroundSize = `${cameraFOVPercent}%, 100%`; }; + // Refresh function function refresh(){ /* refreshWindAcc */ @@ -95,17 +101,13 @@ function refresh(){ /* refreshCameraSight */ camera.lookAt(0,Number(World.lookAtMe.value),0); /* refreshfieldview */ - - // TODO: 调整视野参数 - refreshFOV(); + camera.fov = Number(World.fieldOfView.value); + camera.updateProjectionMatrix(); } // 类型定义 -function calcIndex(x) { - return Math.floor(x/World.MAX_X *World.WaterBlockNum); -} //雨滴类。从三维网格对象继承而来。通过参数构造形状、大小、颜色等特征 // 溅起的水珠和雨滴都用雨滴对象表示，使用fromSky属性保证只有从天而降的雨滴才会溅起更多水珠，避免无尽溅起新水珠 @@ -175,8 +177,6 @@ class WaveMesh extends THREE.Mesh { /** * 1.generate scene, camera and renderer. - * the scene contains everything, the camera looks at the - * point (0,0,0) */ const scene = new THREE.Scene(); @@ -188,59 +188,41 @@ camera.lookAt(0,World.MAX_Y/4,0); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); -// var refreshFOV = (function () { -// var lastFOV = 50; -// if(World.fieldOfView != lastFOV) { -// lastFOV = World.fieldOfView; -// } -// })(); - -function refreshFOV() { - camera.fov = Number(World.fieldOfView.value); - camera.updateProjectionMatrix(); - // console.log(camera.fov); - // console.log(World.fieldOfView); -} - /** - * 2.create the pond side, the xy and yz are fence, trees and clouds - * (if time permits, we will add dynamic cloud), + * 2.create the pond side, the xy and yz plane are stones, trees and clouds * the xz are the gound and pond */ -// trees on the sides -var treeGeo = new THREE.PlaneGeometry(World.MAX_X,World.MAX_Y); -var treePic = new THREE.TextureLoader().load('./picture/ddark_tree.jpg'); -treePic.wrapT = THREE.RepeatWrapping; -treePic.wrapS = THREE.RepeatWrapping; -treePic.repeat.set(1,1); - -var treeMeshXY = new THREE.Mesh(treeGeo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:treePic})); -treeMeshXY.position.set(World.MAX_X/2,World.MAX_Y/2,0); -var treeMeshYZ = new THREE.Mesh(treeGeo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:treePic})); -treeMeshYZ.position.set(0,World.MAX_Y/2,World.MAX_Z/2); -treeMeshYZ.rotateY(Math.PI/2); -scene.add(treeMeshXY); -scene.add(treeMeshYZ); -treeMeshXY = new THREE.Mesh(treeGeo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:treePic})); -treeMeshXY.position.set(World.MAX_X/2,World.MAX_Y/2,World.MAX_Z); -treeMeshYZ = new THREE.Mesh(treeGeo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:treePic})); -treeMeshYZ.position.set(World.MAX_X,World.MAX_Y/2,World.MAX_Z/2); -treeMeshYZ.rotateY(Math.PI/2); -scene.add(treeMeshXY); -scene.add(treeMeshYZ); +function createPlane(xSize,ySize,texture,repeatX,repeatY,px,py,pz,dx,dy,dz) { + let Geo = new THREE.PlaneGeometry(xSize,ySize); + let Pic = new THREE.TextureLoader().load(texture); + Pic.wrapT = THREE.RepeatWrapping; + Pic.wrapS = THREE.RepeatWrapping; + Pic.repeat.set(repeatX,repeatY); + let mesh = new THREE.Mesh(Geo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:Pic})); + mesh.position.set(px,py,pz); + // var direct; + mesh.rotateX((new THREE.Vector2(dz,dy).angle())) ; + // console.log(-(new THREE.Vector2(dy,dz).angle())); + mesh.rotateY((new THREE.Vector2(dz,dx).angle())) ; + mesh.rotateZ(-(new THREE.Vector2(dx,dy).angle())) ; + return mesh; + +} + +scene.add(createPlane(World.MAX_X,World.MAX_Y,'./picture/ddark_tree.jpg',1,1,World.MAX_X/2,World.MAX_Y/2,0,0,0,1)); +scene.add(createPlane(World.MAX_X,World.MAX_Y,'./picture/ddark_tree.jpg',1,1,0,World.MAX_Y/2,World.MAX_Z/2,1,0,0)); +scene.add(createPlane(World.MAX_X,World.MAX_Y,'./picture/ddark_tree.jpg',1,1,World.MAX_X/2,World.MAX_Y/2,World.MAX_Z,0,0,1)); +scene.add(createPlane(World.MAX_X,World.MAX_Y,'./picture/ddark_tree.jpg',1,1,World.MAX_X,World.MAX_Y/2,World.MAX_Z/2,1,0,0)); +scene.add(createPlane(World.MAX_X,World.MAX_Y,'./picture/processed/water_wave.jpg',World.WaterBlockNum,World.WaterBlockNum,World.MAX_X/2,0,World.MAX_Z/2,0,1,0)); //water -var waterGeo = new THREE.PlaneGeometry(World.MAX_X,World.MAX_Y); -var waterPic = new THREE.TextureLoader().load('./picture/processed/water_wave.jpg'); -waterPic.wrapT = THREE.RepeatWrapping; -waterPic.wrapS = THREE.RepeatWrapping; -waterPic.repeat.set(World.WaterBlockNum,World.WaterBlockNum); -var waterMesh = new THREE.Mesh(waterGeo,new THREE.MeshBasicMaterial({side:THREE.DoubleSide,map:waterPic})); -waterMesh.position.set(World.MAX_X/2,0,World.MAX_Z/2); -waterMesh.rotateX(Math.PI/2); -scene.add(waterMesh); + + +function calcIndex(x) { + return Math.floor(x/World.MAX_X *World.WaterBlockNum); +} var leaveGeo = new THREE.PlaneGeometry(World.MAX_X/World.WaterBlockNum,World.MAX_Y/World.WaterBlockNum); var leavePic = new THREE.TextureLoader().load('./picture/processed/water_leave.png'); @@ -248,11 +230,17 @@ var leavePic = new THREE.TextureLoader().load('./picture/processed/water_leave.p var haveLotus = new Array(World.WaterBlockNum); +/** + * 3.initialize the lotus array randomly, + * (generate frogs if we still have time) + */ + + // generate leaves for(let i =0; i { if(amesh.isRain) @@ -418,14 +418,14 @@ function allFallsDown() { lightening.power = Math.random()*(lighteningPara.lmMax - lighteningPara.lmMin); } if(deltaTime > longestBound) { - lighteningPara.lighteningGap = lighteningPara.lighteningGap * (0.5+Math.random()); + lighteningPara.lighteningGap = lighteningPara.lighteningGapMin + (lighteningPara.lighteningGapMax - lighteningPara.lighteningGapMin) *Math.random(); + lightening.power = lighteningPara.lmMin; lighteningPara.lastlighteningTime = nowTime; - // setInterval(() => { - // hoooongloooongloooongOnce(); - // TODO: 把这里打雷的函数充实一下。 - // }, lighteningPara.lighteningGap); + setTimeout(() => { + sound.play(); + }, lighteningPara.lighteningGap); } @@ -448,5 +448,4 @@ btn.addEventListener('click', function(e) { // 动态添加类名和删除类名 control.classList.toggle("slide"); }) -setCanvaSize(); -document.getElementById("rain_sound").play(); \ No newline at end of file +setCanvaSize(); \ No newline at end of file -- Gitee From d80b16d0645d0bc47a5bb0dce1e52137708062b9 Mon Sep 17 00:00:00 2001 From: SeannaeS <9564773+seannaes@user.noreply.gitee.com> Date: Sun, 19 Jun 2022 16:35:58 +0800 Subject: [PATCH 2/2] Update rainAndWave.js --- js/rainAndWave.js | 35 ++++++++++++----------------------- 1 file changed, 12 insertions(+), 23 deletions(-) diff --git a/js/rainAndWave.js b/js/rainAndWave.js index db29d07..6102f35 100644 --- a/js/rainAndWave.js +++ b/js/rainAndWave.js @@ -289,45 +289,35 @@ for(let i =0 ; i< World.cloudNum;i++){ scene.add(new cloudMesh()); } - - -// 环境光 - - +// 闪电 var lightening = new THREE.PointLight(World.lightColor,1,1000); -// lightening.position.set(World.MAX_X/2,World.MAX_Y/2,World.MAX_Z * World.cloudToBackRatio *2); lightening.position.set(World.MAX_X/2,World.MAX_Y/2,World.MAX_Z/2); scene.add(lightening); +//环境光 var ambLight = new THREE.AmbientLight(World.lightColor,2.5) scene.add(ambLight); - -// prepare for the rain and wave - -let rainGroup = new THREE.Group; -let waveGroup = new THREE.Group; - -scene.add(rainGroup); -scene.add(waveGroup); - -// 声音 -// create an AudioListener and add it to the camera +// 雷声 const listener = new THREE.AudioListener(); camera.add( listener ); - -// create a global audio source const sound = new THREE.Audio( listener ); - -// load a sound and set it as the Audio object's buffer const audioLoader = new THREE.AudioLoader(); audioLoader.load( './sound/thunder.mp3', function( buffer ) { sound.setBuffer( buffer ); sound.setLoop( false ); sound.setVolume( 0.5 ); - // sound.play(); }); +// prepare for the rain and wave + +let rainGroup = new THREE.Group; +let waveGroup = new THREE.Group; + +scene.add(rainGroup); +scene.add(waveGroup); + + // loop stage function draw() { @@ -394,7 +384,6 @@ function allFallsDown() { if(amesh.isWave) { amesh.expand(wavePara.scaleInc); - // console.log("Here"); //8. wave disappear if(amesh.reachMaxSize(wavePara.scaleMax)) waveGroup.children.splice(index,1); -- Gitee