برای کار با صحنه‌های سه‌بعدی، باید با وکتورها و ماتریس‌ها آشنا باشیم.

۱️⃣ وکتورها (Vectors)

🔹 تعریف

وکتور یک مقدار ریاضی هست که هم مقدار (Magnitude) و هم جهت (Direction) داره.
در سه‌بعدی معمولاً از Vector3 استفاده می‌کنیم که شامل سه محور X، Y و Z هست.

🔹 کاربرد در Three.js

• موقعیت (Position) اشیاء

• جهت نور یا دوربین

• حرکت و سرعت المان‌ها

🔹 مثال

// ایجاد یک وکتور
const v = new THREE.Vector3(1, 2, 3);

// جمع و تفریق وکتورها
const v1 = new THREE.Vector3(1, 0, 0);
const v2 = new THREE.Vector3(0, 1, 0);
v1.add(v2); // v1 = (1,1,0)

// طول وکتور
console.log(v.length()); // √(1^2 + 2^2 + 3^2)

📌 در Three.js اکثر property ها مثل mesh.position و camera.position از Vector3 استفاده می‌کنن.

۲️⃣ ماتریس‌ها (Matrices)

🔹 تعریف

ماتریس یک جدول عددی هست که برای انجام تبدیل‌های هندسی مثل انتقال، چرخش و تغییر مقیاس استفاده میشه.

• در 3D، ماتریس‌ها معمولاً ۴×۴ (4x4) هستن.

🔹 کاربرد در Three.js

• اعمال transform روی اشیاء (Position, Rotation, Scale)

• تبدیل مختصات محلی به جهانی

• چرخش دوربین و نور

🔹 مثال

// ایجاد یک ماتریس هویت
const m = new THREE.Matrix4();

// اعمال translation (جابجایی)
m.makeTranslation(2, 3, 4);

// اعمال scale (تغییر اندازه)
const scale = new THREE.Matrix4();
scale.makeScale(2, 2, 2);
m.multiply(scale);

📌 معمولاً لازم نیست همه چیز رو دستی با ماتریس‌ها انجام بدیم، چون Three.js خودش با Vector3 و Euler یا Quaternion کار می‌کنه و ماتریس‌ها پشت پرده مدیریت میشن.

۳️⃣ ارتباط وکتورها و ماتریس‌ها

• وکتورها برای نمایش موقعیت و جهت استفاده میشن.

• ماتریس‌ها برای تبدیل موقعیت و جهت‌ها استفاده میشن.

• هر بار که یک Object3D رو جابجا، بچرخون یا بزرگ/کوچک کنی، Three.js پشت پرده از ماتریس استفاده می‌کنه تا موقعیت نهایی رو محاسبه کنه.

۴️⃣ نکات مهم

• در Three.js:

  • position → Vector3

  • rotation → Euler (زاویه‌های چرخش)

  • scale → Vector3

  • همه این‌ها پشت صحنه در یک Matrix4 ترکیب میشن و GPU رندر می‌کنه.

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