From ee17debc7eff4af0bbfc1f28a256f2a05993b0c5 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 16 四月 2024 17:19:36 +0800
Subject: [PATCH] feat:添加圆环

---
 src/views/screen/components/screen-map-three/experience/world/enviroment.js |   86 +++++++++++++++++++++++++++++++++++-------
 1 files changed, 71 insertions(+), 15 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..4eae921 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,76 @@
 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';
 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.setSunLight();
+    this.setBackground();
+  }
+  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);
+  }
+
+  setBackground() {
+    const texture = new THREE.TextureLoader();
+    const rotatingApertureTexture = texture.load(rotatingAperture);
+    const rotatingPointTexture = texture.load(rotatingPoint);
+    const circlePointTexture = texture.load(circlePoint);
+    const sceneBgTexture = texture.load(sceneBg);
+    let meshConfig1 = {
+      width: 100,
+      height: 100,
+      texture: rotatingApertureTexture,
+      positionList: [0, 0.13, 0.3],
+      scaleList: [0.048, 0.048, 0.048],
+      rotateList: [-Math.PI / 2, 0, 0]
+    };
+    let meshConfig2 = {
+      width: 100,
+      height: 100,
+      texture: rotatingPointTexture,
+      positionList: [0, 0.1, 0.3],
+      scaleList: [0.04, 0.04, 0.04],
+      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);
+  }
+
+  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: true,
+    });
+    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;
+    }
   }
 }
\ No newline at end of file

--
Gitblit v1.8.0