Garis Jala Animasi

Satu set lima demo dengan garis WebGL animasi yang dibuat dengan perpustakaan THREE.MeshLine. Cari tahu cara menghidupkan dan membuat garis-garis ini untuk membuat animasi Anda sendiri.

Lihat demo Unduh Sumber

Dari sponsor bulanan kami: HelloSign API: Semua yang diinginkan dan disukai pengembang. Coba gratis hari ini.

Dua tahun lalu, saya mulai bermain dengan garis-garis di WebGL menggunakan THREE.MeshLine , perpustakaan yang dibuat oleh Jaume Sanchez Elias untuk Three.js .

Pustaka ini menangani masalah yang Anda tidak bisa menangani lebar garis Anda dengan garis klasik di Three.js. MeshLine membuat strip segitiga yang dipasang di papan reklame untuk membuat geometri khusus alih-alih menggunakan metode WebGL GL_LINE asli yang tidak mendukung parameter lebar.

Garis-garis ini berbentuk pita memiliki gaya grafis yang sangat menarik. Mereka juga memiliki simpul lebih sedikit dari TubeGeometry yang biasanya digunakan untuk membuat garis tebal.

Hidupkan sebuah MeshLine

Satu-satunya hal yang hilang adalah kemampuan untuk menghidupkan garis tanpa harus membangun kembali geometri untuk setiap frame. 
Berdasarkan apa yang sudah dimulai dan bagaimana animasi SVG Line bekerja , saya menambahkan tiga parameter baru ke MeshLineMaterial untuk memvisualisasikan animasi garis putus-putus langsung melalui shader.

• DashRatio: Rasio antara apa yang terlihat atau tidak ( ~0: lebih terlihat ,:~1 kurang terlihat)
• DashArray: Panjang tanda hubung dan ruangnya (0 == tanpa tanda hubung)
• DashOffset: Lokasi di mana tanda hubung pertama dimulai

Seperti halnya jalur SVG, parameter ini memungkinkan Anda untuk menghidupkan seluruh garis yang dilacak jika ditangani dengan benar.

Berikut ini adalah contoh lengkap tentang cara membuat dan menghidupkan MeshLine:

  // Build an array of points
  const segmentLength = 1;
  const nbrOfPoints = 10;
  const points = [];
  for (let i = 0; i < nbrOfPoints; i++) {
    points.push(i * segmentLength, 0, 0);
  }

  // Build the geometry
  const line = new MeshLine();
  line.setGeometry(points);
  const geometry = line.geometry;

  // Build the material with good parameters to animate it.
  const material = new MeshLineMaterial({
    transparent: true,
    lineWidth: 0.1,
    color: new Color('#ff0000'),
    dashArray: 2,     // always has to be the double of the line
    dashOffset: 0,    // start the dash at zero
    dashRatio: 0.75,  // visible length range min: 0.99, max: 0.5
  });

  // Build the Mesh
  const lineMesh = new Mesh(geometry, material);
  lineMesh.position.x = -4.5;

  // ! Assuming you have your own webgl engine to add meshes on scene and update them.
  webgl.add(lineMesh);

  // ! Call each frame
  function update() {
    // Check if the dash is out to stop animate it.
    if (lineMesh.material.uniforms.dashOffset.value < -2) return;

    // Decrement the dashOffset value to animate the path with the dash.
    lineMesh.material.uniforms.dashOffset.value -= 0.01;
  }

Buat gaya garis Anda sendiri

Sekarang setelah Anda tahu cara menghidupkan garis, saya akan menunjukkan kepada Anda beberapa tips tentang cara menyesuaikan bentuk garis Anda.

Gunakan SplineCurve atau CatmullRomCurve3

Kelas-kelas ini memperlancar berbagai titik yang diposisikan secara kasar. Mereka sempurna untuk membangun garis melengkung dan cair dan tetap mengendalikannya (panjang, orientasi, turbulensi ...).

Sebagai contoh, mari kita tambahkan beberapa turbulensi ke array poin kami sebelumnya:

  const segmentLength = 1;
  const nbrOfPoints = 10;
  const points = [];
  const turbulence = 0.5;
  for (let i = 0; i < nbrOfPoints; i++) {
    // ! We have to wrapped points into a THREE.Vector3 this time
    points.push(new Vector3(
      i * segmentLength,
      (Math.random() * (turbulence * 2)) - turbulence,
      (Math.random() * (turbulence * 2)) - turbulence,
    ));
  }

Kemudian, gunakan salah satu dari kelas-kelas ini untuk memuluskan array baris Anda sebelum Anda membuat geometri:

  // 2D spline
  // const linePoints = new Geometry().setFromPoints(new SplineCurve(points).getPoints(50));

  // 3D spline
  const linePoints = new Geometry().setFromPoints(new CatmullRomCurve3(points).getPoints(50));

  const line = new MeshLine();
  line.setGeometry(linePoints);
  const geometry = line.geometry;

Dan seperti itulah Anda membuat garis lengkung halus Anda !

Perhatikan bahwa SplineCurve hanya menghaluskan dalam 2D ​​(sumbu x dan y) dibandingkan dengan CatmullRomCurve3 yang memperhitungkan tiga sumbu.

Saya merekomendasikan untuk menggunakan SplineCurve . Lebih performan untuk menghitung garisdan seringkali cukup untuk membuat efek melengkung yang diinginkan.

Misalnya, demo saya, Confetti, dan Energi hanya dibuat dengan metode SplineCurve :

Gunakan Raycasting

Teknik lain yang diambil dari contoh THREE.MeshLine adalah menggunakan Raycaster untuk memindai Mesh yang sudah ada di tempat kejadian.

Dengan demikian, Anda bisa membuat garis yang mengikuti bentuk objek:

  const radius = 4;
  const yMax = -4;
  const points = [];
  const origin = new Vector3();
  const direction = new Vector3();
  const raycaster = new Raycaster();

  let y = 0;
  let angle = 0;
  // Start the scan
  while (y < yMax) {
    // Update the orientation and the position of the raycaster
    y -= 0.1;
    angle += 0.2;
    origin.set(radius * Math.cos(angle), y, radius * Math.sin(angle));
    direction.set(-origin.x, 0, -origin.z);
    direction.normalize();
    raycaster.set(origin, direction);

    // Save the coordinates raycsted.
    // !Assuming the raycaster cross the object in the scene each time
    const intersect = raycaster.intersectObject(objectToRaycast, true);
    if (intersect.length) {
      points.push(
        intersect[0].point.x,
        intersect[0].point.y,
        intersect[0].point.z,
      );
    }
  }

Metode ini digunakan dalam demo Boreal Sky . Di sini saya menggunakan bagian bola sebagai geometri untuk membuat mesh objectToRaycast:

Sekarang, Anda memiliki cukup alat untuk bermain dan menghidupkan MeshLines . Banyak dari metode ini terinspirasi oleh contoh-contoh perpustakaan . Merasa bebas untuk mengeksplorasi ini dan berbagi eksperimen dan metode Anda sendiri untuk membuat jalur Anda sendiri!

Referensi dan Kredit

• Three.js
• TIGA. Garis
• THREE.MeshLine - Contoh bentuk
• Gsap