لطفا صبر کنید ...

نحوه متحرک سازی یک MeshLine

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 124
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

Meshline برای ایجاد یک شکل هندسی مورد نظر، به جای استفاده از متد نیتیو WebGL GL_Line که از پارامتر عرض پشتیبانی نمی‌کند، یک نوار مثلثی بیلبوردی می‌سازد. در ادامه مقاله همراه لیداوب باشید.


دو سال قبل شروع به بازی با خطوط در WebGL با استفاده از کتابخانه THREE MeshLine برای Three.js کردم. این کتابخانه بر مشکل تغییر نکردن عرض خطوط کلاسیک در three.js فائق آمده است. این خطوط یک روبان را تشکیل داده و استایل گرافیکی بسیار جالبی دارند. همچنین، رگه‌های کمتری از TubeGeometry که معمولا برای ایجاد خطوط قطور به کار می‌رود، دارد.

متحرک سازی یک MeshLine

 بیشتر بخوانید:

۱۰ نمونه از وب سایت هایی که از WebGL استفاده می کنند

تنها چیزی که باقی می‌ماند توانایی متحرک سازی خطوط بدون نیاز به بازسازی شکل هندسی برای هر فریم است. بر همین اساس، سه پارامتر جدید به MeshLineMaterial اضافه می‌کنیم تا خطوط تیره متحرک را مستقیما از میان سایه به تصویر بکشیم. این سه پارامتر شامل موارد زیر هستند:

DashRatio: نسبت میان آنچه قابل رویت است و آنچه قابل رویت نیست ( ‍~0 یعنی قابلیت رویت بیشتر و ~1 یعنی قابلیت رویت کمتر)

DashArray: طول یک خط تیره و فضای آن است (0== یعنی هیچ خط تیره‌ای نیست)

DashOffset: موقعیت مکانی که اولین خط فاصله از آن شروع می‌شود.

مانند یک SVG path، این پارامترها به شما امکان متحرک سازی کل خط را می‌دهد. در اینجا کدهای مربوط به نمونه‌ای از یک 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;
  }

حالا که می‌دانید چطور خطوط را متحرک کنید، می‌خواهیم چند نکته در مورد نحوه کاستومایز کردن شکل خطوط را نیز به شما بگوییم. از SplineCurve یا CatmullRomCurve3 استفاده کنید. این کلاس‌ها برای ساخت خطوط منحنی و سیال و کنترل آن‌ها (طول، جهت گیری، آشفتگی و غیره) عالی هستند. برای مثال، بیایید کمی آشفتگی به آرایه قبلی اضافه کنیم:

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

سپس، پیش از ایجاد شکل هندسی، یکی از این کلاس‌ها را برای مرتب سازی آرایه خطوط به کار ببرید:

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

شما توانستید خط منحنی نرم خود را ایجاد کنید. توجه داشته باشید که SplineCurve فقط در حالت دو بعدی محور x و y عمل می‌کند اما CatmullRomCurve3 سه محور را در نظر می‌گیرد. ما SplineCurve را توصیه می‌کنیم چون محاسبه خطوط ساده‌تر بوده و اغلب همین کلاس برای ایجاد اثر منحنی کفایت می‌کند. برای مثال، این دمو‌ها فقط با متد SplinCurve ایجاد شده‌اند:

 Confetti: https://tympanus.net/Development/AnimatedMeshLines/demo2.html

Energy: https://tympanus.net/Development/AnimatedMeshLines/demo3.html

استفاده از پرتاب اشعه

تکنیک دیگری که از یک نمونه ThreeMeshline الهام گرفته شده است، استفاده از پرتاب اشعه برای اسکن یک Mesh است که در صفحه از قبل وجود داشته است. بنابراین، می‌توانید خطوطی ایجاد کنید که شکل یک شئ را دنبال می‌کنند:

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

استفاده از این متد در دموی Boreal Sky: https://tympanus.net/Development/AnimatedMeshLines/demo5.html

مطالعه مقالات بیشتر در لیداوب:

اکنون، ابزار کافی برای بازی و متحرک سازی Meshline در اختیار دارید. می‌توانید از آن در پروژه‌های تحت وب خود استفاده کنید. برای مطالعه مقالات بیشتر در زمینه طراحی سایت، لیداوب را دنبال کنید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.