Three.js چیست؟

Three.js یک کتابخانه جاوااسکریپت (JavaScript Library) برای ساخت و نمایش گرافیک‌های سه‌بعدی (3D) روی مرورگر هست.
این کتابخونه در واقع کار با WebGL (زبان گرافیکی سطح پایین مرورگر) رو ساده‌تر می‌کنه.

🔹 چرا Three.js؟

بدون Three.js، برای کار با WebGL باید صدها خط کد سخت بنویسی (Shaderها، بافرها، ماتریس‌ها و …).
اما Three.js مثل یه ابزار آماده میاد و همه اون سختی‌ها رو با کلاس‌ها و متدهای ساده حل می‌کنه.

🔸 امکانات Three.js

✅ ایجاد اشکال هندسی سه‌بعدی (مکعب، کره، استوانه و …)
✅ پشتیبانی از نورپردازی (Light) و سایه‌ها (Shadows)
✅ پشتیبانی از متریال‌ها و تکسچرها برای واقعی‌تر کردن اجسام
✅ دوربین (Camera) برای کنترل دید کاربر
✅ امکان انیمیشن‌سازی و حرکت اجسام
✅ قابلیت بارگذاری مدل‌های سه‌بعدی ساخته شده در نرم‌افزارهایی مثل Blender
✅ کار با فیزیک و تعامل با کاربر

🔹 مثال ساده: نمایش یک مکعب چرخان

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js Example</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.153.0/build/three.min.js"></script>
  <script>
    // صحنه
    const scene = new THREE.Scene();

    // دوربین
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 3;

    // رندر
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // مکعب
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // انیمیشن
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

📌 نتیجه → یه مکعب سبز رنگ سه‌بعدی توی مرورگر ظاهر می‌شه که می‌چرخه 🚀

🔸 کاربردهای Three.js

  • بازی‌های سه‌بعدی تحت وب 🎮

  • ساخت انیمیشن و جلوه‌های ویژه ✨

  • مدل‌سازی سه‌بعدی محصولات در فروشگاه‌ها 🛍️

  • شبیه‌سازی علمی و آموزشی 🧑‍🏫

  • نقشه‌ها و داده‌های سه‌بعدی 🗺️

✅ خلاصه:
Three.js کتابخونه‌ایه که بهت اجازه می‌ده سه‌بعدی‌سازی، انیمیشن و رندرینگ رو خیلی راحت‌تر و حرفه‌ای توی وب انجام بدی.