APIClub تقدم

دليل Three.js المتكامل

اكتشف عالم الرسومات ثلاثية الأبعاد في المتصفح مع أول دليل عربي شامل لمكتبة Three.js

البداية السريعة

كل ما تحتاج لبدء رحلتك مع Three.js

باستخدام Three.js، يمكنك بناء تجارب ثلاثية الأبعاد مذهلة تعمل مباشرة في المتصفح. دليلنا المبسط سيوضح الخطوات الأساسية لإنشاء أول مشهد ثلاثي الأبعاد.

emoji_objects

سهل التعلم

دروس مقسمة بشكل منطقي ومصحوبة بأمثلة عملية وشروحات بصرية

code

أمثلة كود كاملة

كل مفهوم مصحوب بكود JavaScript كامل قابل للنسخ والتطبيق مباشرة

استكشف الدروس arrow_back
hello-threejs.js
// إعداد المشهد والكاميرا والعارض
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();

استكشف مسارات التعلم

دليل متكامل من الأساسيات إلى المستويات المتقدمة

الأساسيات

military_tech
  • check_circle مقدمة في Three.js
  • check_circle إعداد المشهد والكاميرا
  • check_circle الأشكال والمواد الأساسية
  • check_circle التحكم في الكاميرا
  • check_circle الإضاءة الأساسية

المستوى المتوسط

military_tech
  • check_circle التحميل والاستيراد
  • check_circle الانيميشن والتحريك
  • check_circle التفاعل مع العناصر
  • check_circle المواد المتقدمة والقوام
  • check_circle الظلال والإضاءة المتقدمة

المستوى المتقدم

military_tech
  • check_circle الشيدرات المخصصة
  • check_circle تحسين الأداء
  • check_circle دمج WebGL و Three.js
  • check_circle الفيزياء والمحاكاة
  • check_circle تطوير تطبيقات متكاملة

أمثلة عملية

استعرض مجموعة من المشاريع العملية التي يمكنك بناؤها باستخدام Three.js

view_in_ar

عارض النماذج الثلاثية

تطبيق لعرض وتدوير النماذج ثلاثية الأبعاد بصيغة GLTF

watch_later 60 دقيقة عرض المثال
blur_on

تأثيرات الجسيمات

إنشاء تأثيرات جسيمات متحركة وتفاعلية مع Three.js

watch_later 45 دقيقة عرض المثال
public

خريطة العالم التفاعلية

بناء كرة أرضية تفاعلية مع بيانات متغيرة

watch_later 90 دقيقة عرض المثال

انضم إلينا

ابق على اطلاع بأحدث الدروس والتقنيات

سجل في النشرة البريدية للحصول على أحدث الدروس والتقنيات في عالم الرسومات ثلاثية الأبعاد والتطبيقات التفاعلية.

المكتبات والموارد الإضافية

extension

Tween.js

مكتبة تحريك وانتقالات سلسة للكائنات

view_in_ar

GLTF Loader

تحميل نماذج ثلاثية الأبعاد بصيغة GLTF

grain

Particle Systems

أنظمة الجسيمات لتأثيرات بصرية متقدمة

texture

Post-Processing

تأثيرات معالجة ما بعد الرسم

استكشف المكتبات