فرمت‌هایی مثل glTF, OBJ, FBX و غیره

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

۱️⃣ glTF / GLB (Recommended)

🔹 تعریف

  • فرمت مدرن و استاندارد متن‌باز

  • پشتیبانی از Geometry, Material, Animation, PBR, Textures

  • GLB نسخه باینری glTF است (تمام فایل در یک فایل باینری)

🔹 Loader

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('model.glb', (gltf) => { scene.add(gltf.scene); });

📌 مناسب برای واقع‌گرایی، بازی و وب

۲️⃣ OBJ

🔹 تعریف

  • فرمت قدیمی، متن ساده

  • تنها شامل Geometry و Vertexهاست

  • Material جداگانه با .mtl

🔹 Loader

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'; const mtlLoader = new MTLLoader(); mtlLoader.load('model.mtl', (materials) => { materials.preload(); const objLoader = new OBJLoader(); objLoader.setMaterials(materials); objLoader.load('model.obj', (object) => { scene.add(object); }); });

📌 مناسب برای مدل‌های ساده، بدون انیمیشن و PBR

۳️⃣ FBX

🔹 تعریف

  • فرمت قدیمی‌تر Autodesk

  • پشتیبانی از Geometry, Material, Animation, Rigging

  • حجم فایل معمولاً بیشتر از glTF

🔹 Loader

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; const loader = new FBXLoader(); loader.load('model.fbx', (object) => { scene.add(object); });

📌 مناسب برای انیمیشن‌های اسکلت‌بندی و پروژه‌های قدیمی

۴️⃣ دیگر فرمت‌ها

فرمتتوضیح
COLLADA (.dae)پشتیبانی از Geometry، Material و Animation
STLمدل‌های سه‌بعدی چاپ سه‌بعدی (3D Printing)
PLYداده‌های سه‌بعدی با نقاط و رنگ
3DSفرمت قدیمی Autodesk 3ds Max
VRML/X3Dمدل‌های وب سه‌بعدی، قدیمی‌تر

🔹 Loaderهای مربوطه

  • ColladaLoader, STLLoader, PLYLoader, TDSLoader, VRMLLoader

۵️⃣ نکات مهم

  • glTF استاندارد جدید و سریع، حجم کم و بهینه برای وب است

  • OBJ و STL مناسب برای مدل‌های ساده و بدون انیمیشن

  • FBX و Collada مناسب برای مدل‌های انیمیشن‌دار و اسکلت‌بندی

  • همیشه Textureها و Materialها را بررسی کن؛ برخی فرمت‌ها نیاز به MTL یا فایل‌های جداگانه دارند

۶️⃣ مثال کامل glTF

import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const scene = new THREE.Scene(); 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 loader = new GLTFLoader(); loader.load('model.glb', (gltf) => { scene.add(gltf.scene); }); const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5,5,5); scene.add(light); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();

📌 این مثال نشان می‌دهد چگونه یک مدل glTF ساده را به صحنه اضافه کنیم.