feat:添加圆环

ZhangXianQiang

2024-04-16 ee17debc7eff4af0bbfc1f28a256f2a05993b0c5

feat:添加圆环

 src/assets/map/texture/circle-point.png

 src/assets/map/texture/rotating-point2.png

 src/assets/map/texture/rotatingAperture.png

 src/assets/map/texture/scene-bg2.png

 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;
    }
  }
}

 src/views/screen/components/screen-map-three/experience/world/map.js

@@ -101,11 +101,6 @@
            transparent: true,
            opacity: 1,
        })


        console.log(geometry);


        return new THREE.Mesh(geometry, this.material);
    }
}

 src/views/screen/components/screen-map-three/experience/world/world.js

@@ -1,6 +1,5 @@
import EventEmitter from '../utils/eventEmitter';
import Enviroment from './enviroment';

import Map from './map';

export default class World extends EventEmitter  {
@@ -13,6 +12,6 @@
  }

  update() {

    this.enviroment.update();
  }
}