Three.js چند نوع Renderer دارد که هر کدام کاربرد و محدودیت‌های خاص خودشون رو دارن:

۱️⃣ WebGLRenderer (رایج‌ترین)

🔹 تعریف

• بر پایه WebGL

• سرعت بالا، GPU محور

• پشتیبانی از سایه‌ها، نور و PBR

🔹 ایجاد WebGLRenderer

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // فعال‌سازی سایه‌ها
document.body.appendChild(renderer.domElement);

📌 مناسب اکثر پروژه‌ها، بازی‌ها، شبیه‌سازی‌ها و واقع‌گرایی

۲️⃣ CanvasRenderer (قدیمی و ساده)

🔹 تعریف

• بر پایه Canvas 2D

• سریع‌تر برای صحنه‌های ساده

• پشتیبانی محدود از سایه، نور و متریال پیشرفته

🔹 نکات

• از نسخه r110 به بعد رسمی حذف شده، فقط برای پروژه‌های ساده قدیمی

۳️⃣ CSS3DRenderer

🔹 تعریف

• اشیاء DOM (HTML/CSS) را به صورت سه‌بعدی رندر می‌کند

• تعامل با HTML واقعی ممکن است

🔹 مثال

const renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

📌 مناسب UI سه‌بعدی، تابلوها، متن‌های HTML در صحنه

۴️⃣ SVGRenderer

🔹 تعریف

• رندر کردن صحنه به صورت SVG

• خروجی برداری (Vector)

• قابل بزرگنمایی بدون افت کیفیت

🔹 نکات

• سرعت کمتر نسبت به WebGL

• مناسب گرافیک‌های دو بعدی، نمودارها و اشکال ساده

۵️⃣ مقایسه سریع Rendererها

۶️⃣ نکات مهم

• WebGLRenderer تقریبا استاندارد تمام پروژه‌هاست

• CSS3DRenderer و SVGRenderer بیشتر برای ترکیب با DOM و بردارها کاربرد دارند

• CanvasRenderer امروزه کاربرد چندانی ندارد مگر پروژه‌های قدیمی یا آموزشی

۷️⃣ مثال ساده WebGLRenderer

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,5,5);
scene.add(light);

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

📌 در این مثال، WebGLRenderer صحنه را با نور و سایه بهینه نمایش می‌دهد.