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

1. Camera – دید دوربین

2. Lights – نورپردازی

3. Scenegraph – ساختار سلسله‌مراتبی اشیاء

4. Renderers – رندرینگ صحنه

۱️⃣ Camera (دوربین)

🔹 تعریف

• دوربین تعیین می‌کند چه چیزی و از چه زاویه‌ای دیده شود

• دو نوع رایج:
  | Camera | توضیح |
  |--------|-------|
  | PerspectiveCamera | دید پرسپکتیو، شبیه چشم انسان |
  | OrthographicCamera | دید بدون پرسپکتیو، برای نقشه و UI |

🔹 مثال

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

۲️⃣ Lights (نورها)

🔹 تعریف

• نورها ظاهر و سایه اشیاء را تعیین می‌کنند

• انواع نور رایج:
  | Light | توضیح |
  |-------|-------|
  | AmbientLight | نور عمومی، بدون جهت |
  | DirectionalLight | نور شبیه خورشید، قابل سایه‌اندازی |
  | PointLight | نور نقطه‌ای در همه جهات |
  | SpotLight | نور مخروطی با جهت مشخص |
  | HemisphereLight | نور آسمان و زمین |

🔹 مثال

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

۳️⃣ Scenegraph (ساختار سلسله‌مراتبی)

🔹 تعریف

• صحنه یک درخت سلسله‌مراتبی از Object3Dهاست

• هر Object می‌تواند فرزند داشته باشد و Transform فرزندها به والدها وابسته است

🔹 مثال

const parent = new THREE.Object3D();
const child = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({ color: 0xff0000 }));
parent.add(child);
scene.add(parent);

📌 چرخش یا حرکت parent روی child نیز تاثیر می‌گذارد

۴️⃣ Renderers (رندرینگ)

🔹 تعریف

• Renderer صحنه و دوربین را به خروجی نمایش می‌دهد

• انواع رایج:
  | Renderer | توضیح |
  |----------|-------|
  | WebGLRenderer | سریع، قابل استفاده برای اکثر پروژه‌ها |
  | CSS3DRenderer | رندر HTML/CSS به عنوان سه‌بعدی |
  | SVGRenderer | رندر SVG، مناسب برای گرافیک ساده |

🔹 مثال WebGLRenderer

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

۵️⃣ مثال کامل

const scene = new THREE.Scene();

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

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

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

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

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

📌 این مثال شامل:

• دوربین پرسپکتیو

• نور Directional

• ساختار سلسله‌مراتبی صحنه

• Renderer WebGL برای نمایش

۶️⃣ نکات مهم

• هر Scene شامل Object3Dها و نورهاست

• Camera دید شما را تعیین می‌کند

• Renderer خروجی صحنه را نمایش می‌دهد

• Scenegraph امکان مدیریت سلسله‌مراتبی اشیاء و Transformها را می‌دهد