From d2287f96e80fc572a832de889c740ca336ef09bf Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 17 四月 2024 15:59:54 +0800
Subject: [PATCH] feat:添加光照GUI
---
src/views/screen/components/screen-map-three/experience/world/enviroment.js | 42 ++++++++++++++++++++++++++++++++++--------
src/views/screen/components/screen-map-three/experience/world/map.js | 5 +++--
2 files changed, 37 insertions(+), 10 deletions(-)
diff --git a/src/views/screen/components/screen-map-three/experience/world/enviroment.js b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
index 6ee6381..6af5286 100644
--- a/src/views/screen/components/screen-map-three/experience/world/enviroment.js
+++ b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
@@ -3,6 +3,9 @@
import rotatingPoint from '@/assets/map/texture/rotating-point2.png';
import circlePoint from '@/assets/map/texture/circle-point.png';
import sceneBg from '@/assets/map/texture/scene-bg2.png';
+
+import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
+
export default class Enviroment {
constructor(experience) {
this.experience = experience;
@@ -13,20 +16,22 @@
this.setRotateHola();
this.setBackground();
this.setCirclePoint();
+
+ this.debuger();
}
setSunLight() {
// 骞宠鍏�1
- let directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
- directionalLight1.position.set(400, 200, 200);
+ this.directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
+ this.directionalLight1.position.set(0, 57, 33);
// 骞宠鍏�2
- let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
- directionalLight2.position.set(-400, -200, -300);
+ this.directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+ this.directionalLight2.position.set(-95, 28, -33);
// 鐜鍏�
- let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+ this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
- this.scene.add(directionalLight1);
- this.scene.add(directionalLight2);
- this.scene.add(ambientLight);
+ this.scene.add(this.directionalLight1);
+ this.scene.add(this.directionalLight2);
+ this.scene.add(this.ambientLight);
}
setRotateHola() {
@@ -111,4 +116,25 @@
this.hola2.rotation.z -= 0.001;
}
}
+
+ debuger() {
+ const gui = new GUI();
+
+ const folder1 = gui.addFolder('骞宠鍏�1');
+ const folder2 = gui.addFolder('骞宠鍏�2');
+ const folder3 = gui.addFolder('鐜鍏�');
+
+ folder1.add(this.directionalLight1.position, 'x').min(-200).max(200).step(1).name("x杞寸殑浣嶇疆");
+ folder1.add(this.directionalLight1.position, 'y').min(-200).max(200).step(1).name("y杞寸殑浣嶇疆");
+ folder1.add(this.directionalLight1.position, 'z').min(-200).max(200).step(1).name("z杞寸殑浣嶇疆");
+ folder1.add(this.directionalLight1, 'intensity').min(0).max(1).step(0.1).name("寮哄害");
+
+ folder2.add(this.directionalLight2.position, 'x').min(-200).max(200).step(1).name("x杞寸殑浣嶇疆");
+ folder2.add(this.directionalLight2.position, 'y').min(-200).max(200).step(1).name("y杞寸殑浣嶇疆");
+ folder2.add(this.directionalLight2.position, 'z').min(-200).max(200).step(1).name("z杞寸殑浣嶇疆");
+ folder2.add(this.directionalLight2, 'intensity').min(0).max(1).step(0.1).name("寮哄害");
+
+
+ folder3.add(this.ambientLight, 'intensity').min(0).max(1).step(0.1).name("寮哄害");
+ }
}
\ No newline at end of file
diff --git a/src/views/screen/components/screen-map-three/experience/world/map.js b/src/views/screen/components/screen-map-three/experience/world/map.js
index d7da5f6..ab8c988 100644
--- a/src/views/screen/components/screen-map-three/experience/world/map.js
+++ b/src/views/screen/components/screen-map-three/experience/world/map.js
@@ -29,7 +29,8 @@
textureMapFx.repeat.set(scale, scale);
this.topFaceMaterial = new THREE.MeshPhongMaterial({
map: textureMap,
- color: 0xb4eeea,
+ // color: 0xb4eeea,
+ color: 0xb3fffa,
combine: THREE.MultiplyOperation,
transparent: true,
opacity: 1,
@@ -80,7 +81,7 @@
}
this.map.add(province);
});
- this.map.position.set(1, 1, -2);
+ this.map.position.set(1, 1, -1.5);
this.map.scale.set(10, 10, 10);
this.map.rotation.set(THREE.MathUtils.degToRad(-90), 0, THREE.MathUtils.degToRad(20));
this.container = new THREE.Object3D();
--
Gitblit v1.8.0