Three.js چطور ازش استفاده کنیم؟

چرا Three.js رو انتخاب کنیم؟

سادگی و راحتی: اگه بخوای مستقیم با WebGL کار کنی، باید کلی کد بنویسی. ولی Three.js این کارو برات راحت‌تر می‌کنه.

مستندات قوی و جامعه‌ی فعال: توی گیت‌هاب و سایت رسمی Three.js، کلی آموزش و مثال پیدا می‌کنی که کارت رو جلو می‌بره.

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

سازگاری با مرورگرها: Three.js روی اکثر مرورگرها اجرا می‌شه و نیازی به نصب افزونه خاصی نداره.

شروع کار با Three.js

1. نصب و راه‌اندازی

برای شروع، می‌تونی کتابخونه رو با npm نصب کنی:

npm install three

یا از CDN استفاده کنی:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

2. ساخت اولین صحنه سه‌بعدی

حالا بریم یه صحنه‌ی ساده با یه مکعب بسازیم:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

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

اینجا یه مکعب سبز رنگ داریم که دور خودش می‌چرخه. این یکی از ساده‌ترین مثال‌هاییه که می‌تونی با Three.js پیاده کنی.

ویژگی‌های جذاب Three.js

سیستم ذرات: می‌تونی جلوه‌های خاص مثل برف، دود و آتش بسازی.

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

افکت‌های ویژه: مثل سایه‌ها، انعکاس و شکست نور.

نتیجه‌گیری

Three.js یه ابزار قدرتمند و در عین حال ساده‌ست که بهت کمک می‌کنه گرافیک سه‌بعدی رو بدون دردسر به پروژه‌های وب اضافه کنی. اگه عاشق طراحی‌های سه‌بعدی هستی یا می‌خوای یه بازی یا محیط تعاملی توی وب بسازی، حتما Three.js رو امتحان کن.