From b76fd2fa93c2036d66e5142654cf66cf1e371531 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期二, 30 四月 2024 17:12:34 +0800
Subject: [PATCH] 改为连表查询
---
src/views/screen/components/screen-map-three/experience/world/enviroment.js | 183 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 170 insertions(+), 13 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 ec16969..833dc82 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
@@ -1,20 +1,177 @@
import * as THREE from 'three';
+import rotatingAperture from '@/assets/map/texture/rotatingAperture.png';
+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;
- this.scene = this.experience.scene;
- this.setSunLight();
+ constructor(experience) {
+ this.experience = experience;
+ this.scene = this.experience.scene;
+ this.textureLoader = new THREE.TextureLoader();
+
+ this.setSunLight();
+ this.setRotateHola();
+ this.setBackground();
+ this.setCirclePoint();
+
+ // this.debuger();
+ }
+ setSunLight() {
+ // 骞宠鍏�1
+ this.directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
+ this.directionalLight1.position.set(0, 57, 33);
+ // 骞宠鍏�2
+ this.directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+ this.directionalLight2.position.set(-95, 28, -33);
+ // 鐜鍏�
+ this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+
+ this.scene.add(this.directionalLight1);
+ this.scene.add(this.directionalLight2);
+ this.scene.add(this.ambientLight);
+ }
+
+ setRotateHola() {
+ const rotatingApertureTexture = this.textureLoader.load(rotatingAperture);
+ const rotatingPointTexture = this.textureLoader.load(rotatingPoint);
+ const meshConfig1 = {
+ width: 48,
+ height: 48,
+ texture: rotatingApertureTexture,
+ positionList: [0, 0.4, 0],
+ scaleList: [1, 1, 1],
+ rotateList: [-Math.PI / 2, 0, 0]
+ };
+ const meshConfig2 = {
+ width: 40,
+ height: 40,
+ texture: rotatingPointTexture,
+ positionList: [0, 0.3, 0],
+ scaleList: [1, 1, 1],
+ rotateList: [-Math.PI / 2, 0, 0]
+ };
+ this.hola1 = this.createMesh(meshConfig1);
+ this.hola2 = this.createMesh(meshConfig2);
+ this.scene.add(this.hola1);
+ this.scene.add(this.hola2);
+ }
+
+ setBackground() {
+ const sceneBgTexture = this.textureLoader.load(sceneBg);
+ const plane = new THREE.PlaneGeometry(120, 120);
+ const material = new THREE.MeshPhongMaterial({
+ // color: 0x061920,
+ color: 0xffffff,
+ map: sceneBgTexture,
+ transparent: true,
+ opacity: 1,
+ // depthTest: true
+ });
+ this.background = new THREE.Mesh(plane, material);
+ this.background.rotation.set(-Math.PI / 2, 0, 0);
+ this.background.position.set(0, 0.1, 0);
+ this.scene.add(this.background);
+ }
+
+ setCirclePoint() {
+ const circleTexture = this.textureLoader.load(circlePoint);
+ const plane = new THREE.PlaneGeometry(45, 45);
+ const material = new THREE.MeshPhongMaterial({
+ color: 0x00ffff,
+ map: circleTexture,
+ transparent: true,
+ opacity: 1,
+ depthTest: false,
+ });
+ this.circle = new THREE.Mesh(plane, material);
+ this.circle.rotation.set(-Math.PI / 2, 0, 0);
+ this.circle.position.set(0, 0.2, 0);
+ this.scene.add(this.circle);
+ }
+
+ createMesh(config) {
+ let { width, height, texture, positionList, rotateList, scaleList } = config;
+ let plane = new THREE.PlaneGeometry(width, height);
+ let material = new THREE.MeshBasicMaterial({
+ map: texture,
+ transparent: true,
+ opacity: 1,
+ depthTest: false,
+ });
+ let mesh = new THREE.Mesh(plane, material);
+ mesh.position.set(...positionList);
+ mesh.scale.set(...scaleList);
+ mesh.rotation.set(...rotateList);
+ return mesh;
+ }
+
+ update() {
+ if (this.hola1) {
+ this.hola1.rotation.z += 0.001;
}
- setSunLight() {
- this.sunLight = new THREE.DirectionalLight('#ffffff', 4);
- this.sunLight.castShadow = true;
- this.sunLight.shadow.camera.far = 15;
- this.sunLight.shadow.mapSize.set(2048, 2048);
- this.sunLight.shadow.normalBias = 0.05;
- this.sunLight.position.set(-1.3, 7, 10);
- this.scene.add(this.sunLight);
+ if (this.hola2) {
+ this.hola2.rotation.z -= 0.001;
+ }
+ }
+
+ destroy() {
+ this.disposeObject();
+ this.removeObject();
+ this.resetObject();
+ }
+
+ disposeObject() {
+ this.hola1.geometry.dispose();
+ this.hola1.material.dispose();
+ this.hola2.geometry.dispose();
+ this.hola2.material.dispose();
+ this.background.geometry.dispose();
+ this.background.material.dispose();
+ this.circle.geometry.dispose();
+ this.circle.material.dispose();
+ this.directionalLight1.dispose();
+ this.directionalLight2.dispose();
+ this.ambientLight.dispose();
+ }
+
+ removeObject() {
+ this.scene.remove(this.hola1);
+ this.scene.remove(this.hola2);
+ this.scene.remove(this.background);
+ this.scene.remove(this.circle);
+ }
+
+ resetObject() {
+ this.hola1 = null;
+ this.hola2 = null;
+ this.background = null;
+ this.circle = null;
+ this.directionalLight1 = null;
+ this.directionalLight2 = null;
+ this.ambientLight = null;
+ }
+
+ 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
--
Gitblit v1.8.0