From f609134185e75d2d464873dd35b69084bfbf65ca Mon Sep 17 00:00:00 2001
From: SeannaeS <9564773+seannaes@user.noreply.gitee.com>
Date: Sun, 19 Jun 2022 10:46:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E8=A7=86?=
=?UTF-8?q?=E9=87=8E=E8=8C=83=E5=9B=B4=E7=9A=84=E5=8A=A8=E6=80=81=E8=B0=83?=
=?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=8A=A0=E4=B8=8A=E5=B7=A6=E5=8F=B3=E8=83=8C?=
=?UTF-8?q?=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
原来是需要调用camera的方法更新投影矩阵
---
index.html | 12 ++++++------
js/rainAndWave.js | 31 ++++++++++++++++++++++++-------
2 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 2e99ac5..2468a59 100644
--- a/index.html
+++ b/index.html
@@ -54,17 +54,17 @@
-
池塘夜降彩色雨 2022
-
@陈卓勋 @张丁夕 @林孟颖
+
@张丁夕 @林孟颖 @陈卓勋
diff --git a/js/rainAndWave.js b/js/rainAndWave.js
index de4e16a..faefebc 100644
--- a/js/rainAndWave.js
+++ b/js/rainAndWave.js
@@ -20,7 +20,7 @@ const World = {
cloudNum : 200,
lightColor : 0x556666,
lookAtMe : null,
- fieldOfView : 50,
+ fieldOfView : null,
}
const lighteningPara = {
@@ -63,6 +63,7 @@ AnimPara.refreshTimeGap = document.getElementById("refresh");
windPara.direction = document.getElementById("windDir");
windPara.windSpeed = document.getElementById("windStr");
World.lookAtMe = document.getElementById("cameraVw");
+World.fieldOfView = document.getElementById("cameraFOV");
// Refresh function
function refresh(){
@@ -75,7 +76,7 @@ function refresh(){
/* refreshfieldview */
// TODO: 调整视野参数
-
+ refreshFOV();
}
@@ -160,14 +161,24 @@ class WaveMesh extends THREE.Mesh {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer();
-camera.position.set(World.MAX_X,World.MAX_Y/2,World.MAX_Z);
+camera.position.set(World.MAX_X*0.9,World.MAX_Y/2,World.MAX_Z*0.9);
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 = World.fieldOfView;
+ camera.fov = Number(World.fieldOfView.value);
+ camera.updateProjectionMatrix();
+ // console.log(camera.fov);
+ // console.log(World.fieldOfView);
}
@@ -185,12 +196,19 @@ 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);
+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);
//water
var waterGeo = new THREE.PlaneGeometry(World.MAX_X,World.MAX_Y);
@@ -294,7 +312,7 @@ function draw() {
renderer.render(scene,camera);
allFallsDown();
refresh();
- console.log(camera.fov);
+ // console.log(camera.fov);
requestAnimationFrame(draw);
}
@@ -335,7 +353,6 @@ function allFallsDown() {
let nposition = new THREE.Vector3(amesh.position.x,0,amesh.position.z);
mesh = new RainMesh(nposition,speed,amesh.mySize/2,amesh.myColor,0);
rainGroup.add(mesh);
- console.log("new bal");
}
}
else if(amesh.fromSky)
--
Gitee
From 3d3fce8b63a90f6474a4db969f80cce476b14d16 Mon Sep 17 00:00:00 2001
From: SeannaeS <9564773+seannaes@user.noreply.gitee.com>
Date: Sun, 19 Jun 2022 10:58:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
打雷和调节的步数
---
index.html | 8 ++++----
js/rainAndWave.js | 3 ++-
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 2468a59..56e9396 100644
--- a/index.html
+++ b/index.html
@@ -48,17 +48,17 @@
diff --git a/js/rainAndWave.js b/js/rainAndWave.js
index faefebc..676d4aa 100644
--- a/js/rainAndWave.js
+++ b/js/rainAndWave.js
@@ -26,7 +26,7 @@ const World = {
const lighteningPara = {
//在从上一次闪电结束，间隔lighteningGap开始的一段长为lighteningDuration的时间内会有闪电
// 闪电时间会随每次闪电结束随机调整
- lighteningGap : 2000, //ms
+ lighteningGap : 5000, //ms
lighteningDuration : 200, //ms
lastlighteningTime : 0, // 上一次闪电时间
lmMax : 200, //最大亮度
@@ -398,6 +398,7 @@ function allFallsDown() {
}
if(deltaTime > longestBound) {
lighteningPara.lighteningGap = lighteningPara.lighteningGap * (0.5+Math.random());
+
lightening.power = lighteningPara.lmMin;
lighteningPara.lastlighteningTime = nowTime;
// setInterval(() => {
--
Gitee