برای اینکه صحنه سه‌بعدی رو روی صفحه نمایش بدیم، Three.js از Renderer استفاده می‌کنه.
Renderer وظیفه داره صحنه و دوربین رو به Canvas یا DOM یا WebGL منتقل کنه.

۱️⃣ Canvas و WebGLRenderer

🔹 Canvas

• رندر دو بعدی با <canvas>

• WebGL از Canvas استفاده می‌کنه، اما خودش سه‌بعدی رو پشتیبانی می‌کنه.

• Canvas به خودی خود سه‌بعدی نیست، WebGLRenderer روی Canvas سه‌بعدی رو فراهم می‌کنه.

🔹 WebGLRenderer

• متداول‌ترین و قدرتمندترین Renderer در Three.js

• از GPU استفاده می‌کنه → سریع و مناسب برای صحنه‌های پیچیده

• اکثر پروژه‌های Three.js روی WebGLRenderer اجرا میشن

🔹 مثال WebGLRenderer

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

// ساخت صحنه
const scene = new THREE.Scene();

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

// مکعب ساده
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();

📌 مزیت WebGLRenderer: سریع، GPU-friendly، پشتیبانی کامل از متریال، سایه و نور.

۲️⃣ CSS3DRenderer

🔹 تعریف

• یک Renderer برای ترکیب المان‌های DOM با صحنه سه‌بعدی

• اشیاء HTML یا CSS می‌تونن داخل صحنه سه‌بعدی قرار بگیرن

• GPU کمتر استفاده میشه → برای انیمیشن‌های سبک مناسب

🔹 مثال CSS3DRenderer

import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

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

const element = document.createElement('div');
element.innerHTML = 'سلام Three.js';
const cssObject = new CSS3DObject(element);
scene.add(cssObject);

📌 کاربرد: نمایش پنجره‌ها، متن‌ها، یا المان‌های HTML در فضای سه‌بعدی

۳️⃣ SVGRenderer

🔹 تعریف

• خروجی صحنه به صورت SVG

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

• سرعت کمتر از WebGL

• اکثر افکت‌های سه‌بعدی و سایه‌ها پشتیبانی نمی‌شن

🔹 مثال SVGRenderer

import { SVGRenderer } from 'three/examples/jsm/renderers/SVGRenderer.js';

const renderer = new SVGRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

📌 کاربرد: گرافیک برداری سبک، نمودارها یا صحنه‌های ساده

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

✅ نکات مهم

• بیشتر پروژه‌ها WebGLRenderer دارند.

• CSS3DRenderer و SVGRenderer برای پروژه‌های سبک یا ترکیبی مناسبند.

• همیشه Renderer با Canvas ایجاد میشه (renderer.domElement) و باید به DOM اضافه بشه.