🧠 Three.js داخل React مقابل React Three Fiber — مقارنة عملية شاملة

عند بناء تجارب ثلاثية الأبعاد على الويب، Three.js هي مكتبة WebGL الأساسية. لكن دمجها مع React يأتي بنهجين مختلفين جذريًا:

• استخدام Three.js مباشرة داخل React (النهج الأمري)
• استخدام React Three Fiber (أداة عرض تصريحية لـ React فوق Three.js)

يقارن هذا المقال بين النهجين بأمثلة عملية ومعمارية ومفاضلات حقيقية، وتوصية نهائية للمواقع السينمائية الحديثة المعتمدة على التمرير.

1. 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، مناسب للعمل على مستوى المحرك — أي قريبًا جدًا من وحدة الرسومات، مثل أنظمة العرض ومحركات الفيزياء أو خطوط المعالجة المخصصة.

العيوب: كود تمهيدي كثير، وإدارة صعبة لدورة الحياة، وخطر تسرّب الذاكرة، ومعمارية لا تشبه React.

2. 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 الباقي.

🧩 تحكم مجرّد — جزء من التحكم منخفض المستوى مخفي خلف واجهة برمجية أبسط. لا تدير أداة العرض ولا دورة حياة المشهد ولا إعداد حلقة الحركة يدويًا.

⚛️ طبقة React فوق Three.js — Three.js هو المحرك الأساسي، وR3F واجهة React لهذا المحرك.

المزايا: كود نظيف ومقروء، ومعمارية تناسب React، وتطوير سريع، ومثالي للتطبيقات ثلاثية الأبعاد المعتمدة على الواجهة مثل المُهيّئات ولوحات المعلومات وعارضات المنتجات.

العيوب: يخفي WebGL منخفض المستوى، ويعطي تحكمًا مباشرًا أقل بمحرك العرض، ويتطلب عقلية React وتفكيرًا ثلاثي الأبعاد معًا.

3. حالات الاستخدام الواقعية

استخدم Three.js مباشرة عند بناء محركات عرض مخصصة، أو محاكاة فيزيائية ثقيلة، أو خطوط WebGL متقدمة، أو أنظمة شيدر منخفضة المستوى.

استخدم React Three Fiber عند بناء مُهيّئات المنتجات، أو عارضات ثلاثية الأبعاد للمتاجر الإلكترونية، أو لوحات معلومات متكاملة مع الواجهة، أو تطبيقات مبنية على React، أو مواقع سينمائية تعتمد على التمرير.

🌊 4. الاتجاه الحديث: التمرير + 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؟