تابز مدیا | آموزش قدم به قدم برنامه نویسی

صحنه (Scene)

🔹 تعریف

Scene یک فضای سه‌بعدی است که تمام اشیاء، دوربین‌ها، نورها و افکت‌ها داخلش قرار می‌گیرند.
به عبارتی، Scene همان "اتاقی" است که تمام المان‌ها در آن زندگی می‌کنند.

🔹 ایجاد یک صحنه


// ایجاد یک صحنه جدید
const scene = new THREE.Scene();

🔹 اضافه کردن اشیاء به صحنه

هر چیزی که بخوای داخل صحنه نمایش بدی، باید به صحنه اضافه بشه:


// ساخت یک مکعب
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// اضافه کردن مکعب به صحنه
scene.add(cube);

🔹 افزودن نور و دوربین به صحنه

Scene خودش فقط یک کانتینر است. برای اینکه چیزی ببینی، باید:

دوربین داشته باشی
نور داشته باشی (برای متریال‌هایی که نیاز به نور دارن)


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

// نور
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

🔹 پس‌زمینه و مه (Background & Fog)

Scene می‌تونه پس‌زمینه داشته باشه یا از Fog استفاده کنه:


// رنگ پس‌زمینه
scene.background = new THREE.Color(0x202020);

// مه
scene.fog = new THREE.Fog(0x202020, 1, 100);

🔹 نکات مهم

Scene تنها یک کانتینر است.
همه چیز باید scene.add(object) شود تا رندر بشه.
Scene می‌تونه شامل صحنه‌های تو در تو باشد (Object3D می‌تواند parent باشد).
Scene با رندرر نمایش داده می‌شود:


renderer.render(scene, camera);

🔹 مثال کامل


const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);

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

const renderer = new THREE.WebGLRenderer();
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(1, 1, 1);
scene.add(light);

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

📌 این مثال ساده نشان می‌دهد که:

Scene ساخته شد
اشیاء، نور و دوربین اضافه شدند
Renderer صحنه را نمایش می‌دهد