Verwenden von vue3 + threejs, um das Beispiel für Big Wave-Spezialeffekte der offiziellen iView-Website zu imitieren

npm install --save drei

<Vorlage>
  <div id="iviewBg"></div>
</Vorlage>

<Skript>
importiere * als DREI von "drei";
Zeigen Sie das FPS-Feld in der oberen rechten Ecke an. // Importieren Sie Statistiken aus „./stats.module“.
importiere { onMounted } von "vue";
Standard exportieren {
  Requisiten: {
  	//Länge der Welle auf der X-Achse steuern amountX: {
      Typ: Nummer,
      Standard: 50,
    },
    //Länge der Welle auf der Y-Achse steuern amountY: {
      Typ: Nummer,
      Standard: 50,
    },
    //Kontrollpunktfarbecolor: {
      Typ: Zeichenfolge,
      Standard: "#097bdb",
    },
    //Position der Wellenspitze kontrollieren: {
      Typ: Nummer,
      Standard: 350,
    },
  },

  setup(Requisiten) {
    Konstante Trennung = 100;

    // lass Statistiken;
    Let-Container, Kamera, Szene, Renderer;

    lass Teilchen,
      Anzahl = 0;

    sei mouseX = 0;

    let windowHalfX = window.innerWidth / 2;

    Funktion init() {
      Container = Dokument.ErstellenElement("div");
      document.getElementById("iviewBg").appendChild(container);

      //Erstellen Sie eine perspektivische Kamera Kamera = neue THREE.PerspectiveCamera(
        75, //Vertikales Sichtfeld des Kamerakegels window.innerWidth / window.innerHeight, //Seitenverhältnis des Kamerakegels 1, //Nahseite des Kamerakegels 10000 //Entfernte Seite des Kamerakegels);

      //Sichtfeld der Z-Achse der Kamera einstellen camera.position.z = 1000;

      //Szene erstellen scene = new THREE.Scene();

      const AnzahlPartikel = Eigenschaften.MengeX * Eigenschaften.MengeY;

      Konstante Positionen = neues Float32Array (Anzahl Partikel * 3);
      const scales = neues Float32Array(AnzahlPartikel);

      sei i = 0,
        j = 0;

      // Initialisiere Partikelposition und -größe für (let ix = 0; ix < props.amountX; ix++) {
        für (sei iy = 0; iy < props.amountY; iy++) {
          Positionen[i] = ix * Trennung - (Eigenschaften.BetragX * Trennung) / 2; // x
          Positionen[i + 1] = 0; // y
          Positionen[i + 2] = iy * TRENNUNG - (Eigenschaften.BetragY * TRENNUNG) / 2; // z
          Skalen[j] = 1;
          ich += 3;
          }
        }
      }

      // ist eine gültige Darstellung einer Patch-, Linien- oder Punktgeometrie. Beinhaltet Scheitelpunktpositionen, Patch-Indizes, Normalen, Farbwerte, UV-Koordinaten und benutzerdefinierte Cache-Attributwerte. Durch die Verwendung von BufferGeometry kann der zum Übertragen der obigen Daten auf die GPU erforderliche Overhead effektiv reduziert werden. const geometry = new THREE.BufferGeometry();
      Geometrie.setAttribute(
        "Position",
        neu DREI.Pufferattribut(Positionen, 3)
      );
      geometry.setAttribute("Skala", neues THREE.BufferAttribute(Skalen, 1));

      //ShaderMaterial, Größe, Farbe usw. des Balls festlegen const material = new THREE.ShaderMaterial({
        Uniformen:
          //Lege die Farbe des Balls fest color: { value: new THREE.Color(props.color) },
        },
        //Steuern Sie die Größe des Balls vertexShader:
          "Attribut Float Scale; void main() {vec4 mvPosition = modelViewMatrix * vec4(Position, 1,0);gl_PointSize = Scale * (300,0 / - mvPosition.z);gl_Position = ProjectionMatrix * mvPosition;}",
        Fragmentshader:
          "einheitliche vec3-Farbe; void main() {wenn (Länge( gl_PointCoord - vec2(0,5, 0,5)) > 0,475) verwerfen; gl_FragColor = vec4(Farbe, 1,0);}",
      });

      //Eine Klasse zum Anzeigen von Punkten.
      Partikel = neue DREI.Punkte(Geometrie, Material);
      //Punkte zur Szene hinzufügen scene.add(particles);

      //Alpha – ob die Leinwand Alpha (Transparenz) enthält. Der Standardwert ist „false“.
      //Die Standardhintergrundfarbe des Renderers ist Schwarz. Stellen Sie die Hintergrundfarbe des Renderers auf transparent ein. renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setClearAlpha(0);
      renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
      container.anhängenUntergeordnetesElement(renderer.domElement);

      //FPS-Feld in der oberen rechten Ecke anzeigen //stats = new Stats();
      // container.appendChild(stats.dom);

      container.style.touchAction = "keine";
      //Auf Mausbewegungsereignisse warten container.addEventListener("pointermove", onPointerMove);

      //Position der Welle anpassen container.style.position = "relative";
      Container.Stil.oben = `${props.oben}px`;

      window.addEventListener("Größe ändern", beiFensterGrößenänderung);
    }

    Funktion rendern() {
      Kamera.position.x += (MausX - Kamera.position.x) * 0,05;
      Kamera.position.y = 400;
      Kamera.Blick auf(Szene.Position);

      const Positionen = Partikel.Geometrie.Attribute.Position.Array;
      const scales = Partikel.Geometrie.Attribute.Scale.Array;

      // Partikelposition und -größe festlegen sei i = 0,
        j = 0;
      für (let ix = 0; ix < props.amountX; ix++) {
        für (sei iy = 0; iy < props.amountY; iy++) {
          Positionen[i + 1] =
            Math.sin((ix + Anzahl) * 0,3) * 50 +
            Math.sin((iy + Anzahl) * 0,5) * 50;

          Skalen[j] =
            (Math.sin((ix + Anzahl) * 0,3) + 1) * 10 +
            (Math.sin((iy + Anzahl) * 0,5) + 1) * 10;

          ich += 3;
          }
        }
      }

      Partikel.Geometrie.Attribute.Position.NeedsUpdate = wahr;
      Partikel.Geometrie.Attribute.Scale.NeedsUpdate = wahr;

      renderer.render(Szene, Kamera);

      Anzahl += 0,1;
    }

    Funktion beiFenstergrößeändern() {
      windowHalfX = Fenster.innereBreite / 2;
      Kamera.Aspekt = Fenster.Innenbreite / Fenster.Innenhöhe;
      Kamera.updateProjectionMatrix();
      renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
    }

    //Auf Mausbewegungsereignisse warten function onPointerMove(event) {
      console.log(Ereignis);
      wenn (event.isPrimary === false) zurückgeben;
      MausX = Ereignis.ClientX - FensterhälfteX;
    }

    Funktion animieren() {
      requestAnimationFrame(animieren);
      machen();
      //fps Echtzeit-Update// stats.update();
    }

    beimMounted(() => {
      init();
      animieren();
    });
    zurückkehren {};
  },
};
</Skript>

<style lang="scss" scoped>
#iviewBg {
  Breite: 100 %;
  Höhe: 100vh;
  Hintergrund: URL("../assets/wavesBg.png") keine Wiederholung;
  Überlauf: versteckt;
}
</Stil>

<Vorlage>
  <wavesBg:top="250"></wavesBg>
  
  <div Klasse="Login-Container">
  </div>
</Vorlage>

<Skript>
importiere wavesBg aus "../components/wavesBg";
Standard exportieren {
  Name: "",
  Komponenten:
    WellenBg,
  },
  aufstellen() {
    
    zurückkehren {
     
    };
  },
};
</Skript>