🧠 Three.js در React در برابر React Three Fiber — یک مقایسه کامل و کاربردی

هنگام ساخت تجربه‌های سه‌بعدی در وب، Three.js کتابخانه اصلی WebGL است. اما ترکیب آن با React دو رویکرد کاملاً متفاوت دارد:

• استفاده مستقیم از Three.js داخل React (رویکرد دستوری)
• استفاده از React Three Fiber (یک رندرر اعلانی React برای Three.js)

این مقاله دو رویکرد را با مثال‌های کاربردی، معماری، بده‌بستان‌های واقعی و یک پیشنهاد نهایی برای سایت‌های سینمایی مبتنی بر اسکرول مقایسه می‌کند.

۱. Three.js در React (رویکرد دستوری)

در این مدل React فقط یک ظرف است. صحنه، دوربین، رندرر و حلقه انیمیشن را خودتان می‌سازید و مدیریت می‌کنید. حسش مثل ساختن یک موتور گرافیکی کوچک داخل React است.

import { useEffect, useRef } from "react";
import * as THREE from "three";

export default function ThreeScene() {
  const mountRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(500, 500);
    mountRef.current?.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({ color: "red" });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 3;
    scene.add(new THREE.AmbientLight(0xffffff, 1));

    const animate = () => {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };
    animate();

    return () => {
      renderer.dispose();
      mountRef.current?.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={mountRef} />;
}

ویژگی‌ها

🧱 کد تکراری زیاد — حتی برای کارهای ساده باید کلی کد راه‌اندازی بنویسید. یک مکعب ساده هم صحنه + دوربین + رندرر + هندسه + متریال + حلقه لازم دارد.

🎮 دستوری — قدم به قدم به سیستم می‌گویید چه کند: صحنه را بساز، مکعب را اضافه کن، مکعب را حرکت بده، صحنه را رندر کن. همه قدم‌ها دست شماست.

مزایا: حداکثر انعطاف، کنترل کامل WebGL، مناسب کار در سطح موتور — یعنی کار خیلی نزدیک به GPU، مثل سیستم‌های رندر، موتورهای فیزیک یا پایپ‌لاین‌های سفارشی.

معایب: کد تکراری زیاد، مدیریت سخت چرخه عمر، خطر نشت حافظه و معماری‌ای که حس React ندارد.

۲. React Three Fiber (رویکرد اعلانی)

R3F، Three.js را به کامپوننت‌های React تبدیل می‌کند. به جای کنترل دستی همه چیز، صحنه را با JSX توصیف می‌کنید.

import { Canvas, useFrame } from "@react-three/fiber";
import { useRef } from "react";
import * as THREE from "three";

function Cube() {
  const meshRef = useRef<THREE.Mesh | null>(null);

  useFrame(() => {
    if (!meshRef.current) return;
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="red" />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 3] }}>
      <ambientLight intensity={1} />
      <Cube />
    </Canvas>
  );
}

ویژگی‌ها

🌿 اعلانی — توصیف می‌کنید چه می‌خواهید، نه اینکه چطور ساخته شود. ساختاری مثل <mesh><boxGeometry /></mesh> می‌نویسید و بقیه با React است.

🧩 کنترل انتزاعی — بخشی از کنترل سطح پایین پشت یک API ساده‌تر پنهان شده. رندرر، چرخه عمر صحنه و راه‌اندازی حلقه انیمیشن را دستی مدیریت نمی‌کنید.

⚛️ یک لایه React روی Three.js — Three.js موتور اصلی است و R3F رابط React برای آن موتور.

مزایا: کد تمیز و خوانا، معماری سازگار با React، توسعه سریع، عالی برای اپ‌های سه‌بعدی مبتنی بر رابط کاربری مثل کانفیگوراتور، داشبورد و نمایشگر محصول.

معایب: WebGL سطح پایین را پنهان می‌کند، کنترل مستقیم کمتری روی موتور رندر می‌دهد و هم ذهنیت React و هم تفکر سه‌بعدی را با هم لازم دارد.

۳. کاربردهای واقعی

از Three.js مستقیم استفاده کنید وقتی موتور رندر سفارشی، شبیه‌سازی‌های سنگین فیزیکی، پایپ‌لاین‌های پیشرفته WebGL یا سیستم‌های شیدر سطح پایین می‌سازید.

از React Three Fiber استفاده کنید وقتی کانفیگوراتور محصول، نمایشگر سه‌بعدی فروشگاه، داشبورد یکپارچه با رابط کاربری، اپ‌های مبتنی بر React یا سایت‌های سینمایی مبتنی بر اسکرول می‌سازید.

🌊 ۴. روند امروز: اسکرول + GSAP + سایت‌های سبک Awwwards

سایت‌های حرفه‌ای امروزی اغلب GSAP را برای انیمیشن‌های اسکرول و تایم‌لاین، Three.js یا R3F را برای صحنه‌های سه‌بعدی و شیدرهای GLSL را برای افکت‌های بصری ترکیب می‌کنند.

🏆 بهترین رویکرد: React Three Fiber + GSAP + GLSL

این پروژه‌ها نیاز دارند به:

1. همگام‌سازی رابط کاربری و سه‌بعدی — اسکرول باید روی آبجکت‌های سه‌بعدی اثر بگذارد.
2. هماهنگی انیمیشن — GSAP تایم‌لاین را کنترل می‌کند و R3F رندر را.
3. یکپارچگی شیدر — R3F استفاده از شیدر را ساده‌تر و واکنشی‌تر می‌کند.

🚀 پیشنهاد نهایی

• اگر گرافیک در سطح موتور می‌سازید ← Three.js در React
• اگر تجربه‌های وب مدرن (سبک Awwwards) می‌سازید ← React Three Fiber

💬 در تجربه شما، کدام رویکرد برای کار واقعی قدرتمندتر است — کنترل کامل با Three.js خام، یا توسعه سریع‌تر مبتنی بر React با React Three Fiber؟