Three.js چیه و به چه دردی می‌خوره؟

Three.js به چه دردی می‌خوره؟

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

* ساخت بازی‌های سه‌بعدی: اگه می‌خوای یه بازی ساده سه‌بعدی برای وب بسازی، Three.js می‌تونه کمکت کنه.
* بصری‌سازی داده‌ها: نمایش داده‌ها به‌صورت گرافیکی و جذاب.
* طراحی معماری: می‌تونی مدل‌های ساختمون، دکوراسیون و موارد دیگه رو نمایش بدی.
* جلوه‌های ویژه برای وب‌سایت‌ها: اضافه کردن انیمیشن‌های سه‌بعدی به سایتت.
* واقعیت مجازی و افزوده: تجربه‌های VR و AR رو به‌راحتی توی مرورگر اجرا کن.

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

✅ کدنویسی راحت‌تر از WebGL – نیازی نیست وارد جزئیات پیچیده‌ی WebGL بشی.
✅ پشتیبانی از مدل‌های سه‌بعدی – فرمت‌هایی مثل glTF، OBJ و FBX رو می‌تونی لود کنی.
✅ سازگاری بالا – روی بیشتر مرورگرهای مدرن کار می‌کنه.
✅ امکانات پیشرفته – نورپردازی، سایه، بافت، انیمیشن و هر چیزی که بخوای!
✅ مستندات قوی و جامعه‌ی فعال – اگه گیر کردی، کلی آموزش و راهنما براش هست.

چند مثال از Three.js

1. ساخت یه مکعب ساده

این یه کد ساده برای ساخت یه مکعب سبز رنگ چرخان توی صفحه‌ی وبه:

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();

2. لود کردن یه مدل سه‌بعدی

اگه بخوای یه مدل سه‌بعدی رو توی صفحه نمایش بدی، می‌تونی از GLTFLoader استفاده کنی:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('model.gltf', function(gltf) {
   scene.add(gltf.scene);
});

3. ساخت یه محیط سه‌بعدی واقعی

با ترکیب نور، سایه و تکسچرها، می‌تونی یه دنیای کامل سه‌بعدی رو توی مرورگر اجرا کنی!

نتیجه‌گیری

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