دليل المبتدئين لـ Three.js: دروس تعليمية

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

قبل أن نبدأ في تطوير Three.js، فكر في تجربة Apidog كبديل لـ Postman لاحتياجات اختبار واجهات برمجة التطبيقات الخاصة بك. يقدم Apidog واجهة بديهية مع ميزات قوية لتطوير واجهات برمجة التطبيقات، والاختبار، والتوثيق - كل ذلك دون زيادة الازعاج الذي يجد الكثير من المستخدمين أنه محبط مع Postman. إنها أداة ممتازة رفيقة عند تطوير تطبيقات ويب تتفاعل مع واجهات برمجة التطبيقات.

زر

الآن، لنبدأ رحلتنا في Three.js!

1. إعداد بيئتك

التثبيت

هناك عدة طرق لتضمين Three.js في مشروعك:

الخيار 1: استخدام npm (موصى به)

npm install three

ثم استيراده في ملف JavaScript الخاص بك:

import * as THREE from 'three';

الخيار 2: استخدام CDN

أضف هذا في ملف HTML الخاص بك:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

الخيار 3: التنزيل والتضمين محليًا

قم بتنزيل المكتبة من موقع Three.js، وقم بتضمينها في HTML الخاص بك:

<script src="path/to/three.min.js"></script>

هيكل المشروع

لإنشاء مشروع ثلاثي الأبعاد بسيط باستخدام Three.js، ستحاج إلى:

project-folder/
├── index.html
├── style.css
└── script.js

يجب أن يتضمن ملف index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>تطبيق Three.js الخاص بي</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. فهم الأساسيات

تعمل Three.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 geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// حلقة الرسوم المتحركة
function animate() {
    requestAnimationFrame(animate);
    
    // تدوير المكعب
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

3. جعل تطبيقك متجاوبًا

لضمان أن تطبيق Three.js الخاص بك يبدو جيدًا على جميع الأجهزة، تحتاج إلى التعامل مع إعادة حجم النافذة:

// التعامل مع إعادة حجم النافذة
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // تحديث الراصد
    renderer.setSize(width, height);
    
    // تحديث الكاميرا
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. إضافة المواد والإضاءة

تعد المشاهد الأساسية مجرد بداية. دعنا نعزز الجودة البصرية باستخدام المواد والإضاءة:

المواد

// مادة قياسية مع انعكاس
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // لون أزرق
    roughness: 0.5,        // لامع بعض الشيء
    metalness: 0.5,        // معدني بعض الشيء
});

// مادة فونغ لسطوح لامعة بسيطة
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // لون أحمر
    shininess: 100,        // لامع جدًا
    specular: 0x111111     // لون اللمعان
});

الإضاءة

// إضافة ضوء محيطي
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// إضافة ضوء اتجاهي (مثل الشمس)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// إضافة ضوء نقطي (مثل لمبة)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. إنشاء أشكال هندسية مختلفة

تأتي Three.js مع العديد من الأشكال الهندسية المضمنة:

// كرة
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// أسطوانة
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// حلقة (دونات)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. إنشاء نص في Three.js

يمكن إضافة نص إلى مشهدك باستخدام TextGeometry:

// أولاً، قم بتحميل الخط
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('مرحبا Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // مركز النص
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. رسم الخطوط

يمكنك إنشاء خطوط في Three.js لأطر السلك أو تصور المسارات:

// إنشاء نقاط للخط
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// إنشاء هندسة الخط
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// إنشاء المادة
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// إنشاء الخط
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. التفاعل والتحكم

لتمكين المستخدمين من التفاعل مع مشهدك ثلاثي الأبعاد، يمكنك إضافة أدوات تحكم:

// استيراد OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// إنشاء أدوات التحكم
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // إضافة تأثير تلطيف سلس
controls.dampingFactor = 0.05;

// تحديث حلقة الرسوم المتحركة
function animate() {
    requestAnimationFrame(animate);
    
    // تحديث أدوات التحكم
    controls.update();
    
    renderer.render(scene, camera);
}

9. تحميل نماذج ثلاثية الأبعاد

يمكنك استيراد نماذج تم إنشاؤها في برامج مثل Blender:

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

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // يتم استدعاؤه عند التحميل
    function(gltf) {
        scene.add(gltf.scene);
    },
    // يتم استدعاؤه أثناء التحميل
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% محملة');
    },
    // يتم استدعاؤه عند الخطأ
    function(error) {
        console.error('حدث خطأ ما', error);
    }
);

10. تصحيح الأخطاء ونصائح الأداء

لوحة الإحصائيات

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // كود الرسوم المتحركة الخاص بك هنا
    
    stats.end();
    renderer.render(scene, camera);
}

نصائح الأداء

استخدم BufferGeometry بدلاً من Geometry (الذي أصبح قديمًا)
إعادة استخدام المواد والهندسات عند الإمكان
قم设置 renderer.powerPreference = 'high-performance' لتحسين استخدام وحدة معالجة الرسومات
استخدم Object3D.frustumCulled = true لإخفاء الكائنات خارج عرض الكاميرا
قم بتحسين تعقيد النموذج باستخدام عدد أقل من المضلعات عند الإمكان

الخاتمة

لقد تعلمت الآن أساسيات Three.js، بدءًا من إعداد بيئتك إلى إنشاء مشاهد ثلاثية الأبعاد التفاعلية. هذه مجرد البداية - Three.js توفر مجموعة واسعة من الميزات لإنشاء تجارب ويب ثلاثية الأبعاد مذهلة.

لإغناء معرفتك، استكشف التوثيق الرسمي لـ Three.js و معرض الأمثلة. المجتمع أيضًا نشط في المنتديات وGitHub، مقدماً الموارد والدعم للمطورين من جميع المستويات.

تذكر، أفضل طريقة للتعلم هي من خلال التجربة. ابدأ بمشاريع بسيطة وتدريجياً اعمل على مشاريع أكثر تعقيدًا. مع الممارسة والصبر، ستبدأ في إنشاء تجارب ويب ثلاثية الأبعاد رائعة في أي وقت!

ترميز سعيد مع Three.js!

زر