المكتبة اللي أعطت الويب البُعد الثالث
The Library That Gave the Web a Third Dimension
كيف أصبحت Three.js العمود الفقري للرسومات ثلاثية الأبعاد في المتصفح، ولماذا يرجع إليها مطوّرو الألعاب مراراً.
How Three.js became the backbone of real-time 3D on the browser, and why game developers keep coming back to it.
01 ما هي Three.js؟ What Is Three.js?
قبل ما تجي Three.js، بناء أي شيء ثلاثي الأبعاد في المتصفح كان يعني تتصارع مباشرةً مع الـ WebGL، وهي واجهة برمجية منخفضة المستوى صعبة ومطوّلة لدرجة إن عرض مثلث واحد بس كان يحتاج عشرات الأسطر من الكود. كانت قوية، بس العقبة للدخول كانت كبيرة.
Before Three.js existed, building anything three-dimensional in a browser meant wrestling directly with WebGL, a low-level graphics API so verbose and unforgiving that even rendering a single triangle required dozens of lines of boilerplate. It was powerful, but the barrier to entry was brutal.
Three.js غيّرت المعادلة. صدرت سنة ٢٠١٠ على يد Ricardo Cabello المعروف بـ mrdoob، وهي مكتبة جافاسكريبت تجلس فوق الـ WebGL وتخفي تعقيداتها خلف واجهة نظيفة وسهلة. بدل ما تكتب برامج الـ shader يدوياً وتدير بفرات الـ GPU بنفسك، تشتغل مع مفاهيم مألوفة: مشهد، كاميرا، كائنات، إضاءة، ومواد.
Three.js changed that. Released in 2010 by Ricardo Cabello (known online as mrdoob), Three.js is a JavaScript library that sits on top of WebGL and abstracts its complexity into a clean, approachable API. Instead of manually writing shader programs and managing GPU buffers, you work with familiar concepts: a scene, a camera, objects, lights, and materials.
«Three.js ما بس سهّلت الثلاثي الأبعاد، خلّته في متناول أي شخص يعرف جافاسكريبت.»
"Three.js didn't just make 3D easier. It made it accessible to anyone who already knew JavaScript."
في صميمها، Three.js هي محرك عرض قائم على الـ scene graph. تبني هرمية من الكائنات ثلاثية الأبعاد: شبكات، إضاءات، كاميرات، أنظمة جسيمات، وهي تتولى رسمها بكفاءة على عنصر canvas في المتصفح. تدعم طيفاً واسعاً من ميزات العرض تشمل الظلال، تأثيرات ما بعد المعالجة، المواد المبنية فيزيائياً، وبرامج GLSL للمطوّرين اللي يبون يتعمّقون أكثر.
At its core, Three.js is a scene graph renderer. You build a hierarchy of 3D objects: meshes, lights, cameras, particle systems, and Three.js figures out how to render them efficiently onto a 2D canvas in your browser. It supports shadows, post-processing effects, physically based materials, environment maps, and GLSL shader programs for developers who want to go deeper.
المكتبة مفتوحة المصدر، محدّثة بنشاط، ولها واحد من أكبر الأنظمة البيئية في عالم جافاسكريبت ثلاثي الأبعاد. تشغّل كل شيء من مُكوِّنات عرض المنتجات وتصوّر البيانات إلى منشآت فنية تفاعلية وألعاب متكاملة داخل المتصفح.
The library is open source, actively maintained, and has one of the largest ecosystems in the JavaScript 3D world. It powers everything from product configurators and data visualizations to interactive art installations and full browser-based games.
02 وش تُستخدم له؟ What Is It Used For?
نطاق التطبيقات المبنية بـ Three.js يدهشك بجد. أكثر حالات الاستخدام شيوعاً تقع في فئات:
The range of applications built with Three.js is genuinely surprising. Its most common use cases fall into a few broad categories:
عرض المنتجات
Product Visualization
مواقع التجارة الإلكترونية تستخدم Three.js عشان تخلّي المستخدم يدير المنتج ويفحصه ويخصّصه ثلاثياً: أحذية، أثاث، سيارات، مباشرةً في المتصفح بدون أي إضافة.
E-commerce sites use Three.js to let users rotate, inspect, and configure products in 3D: shoes, furniture, cars, directly in the browser with no plugin required.
تصوّر البيانات
Data Visualization
مجموعات البيانات المعقدة، رسوم مالية، خرائط شبكية، بيانات جغرافية، تتحوّل لبيئات ثلاثية الأبعاد قابلة للتنقل بدل ما تكون رسوم مسطّحة.
Complex datasets, financial graphs, network maps, geospatial data, become navigable 3D environments rather than flat charts, dramatically improving comprehension.
الفن التفاعلي والإبداعي
Creative & Interactive Art
الفنانون الرقميون والاستوديوهات يستخدمون Three.js للفن التوليدي، تجارب الويب الغامرة، وصفحات العلامات التجارية المتحركة.
Digital artists and studios use Three.js for generative art, immersive web experiences, animated brand pages, and award-winning portfolio sites.
ألعاب المتصفح
Browser Games
ألعاب ثلاثية الأبعاد خفيفة: ألغاز، عدّاءون لا نهائيون، ألعاب استراتيجية، تُبنى كلياً في المتصفح باستخدام Three.js كعمود رسومي.
Lightweight 3D games: puzzles, endless runners, strategy games, are built entirely in the browser using Three.js as the rendering backbone.
وبعيداً عن الألعاب، Three.js تُستخدم على نطاق واسع في التصوّر المعماري، حيث يقدر العملاء يتجوّلون في تصاميم المباني افتراضياً قبل ما يُبنى أي حجر.
Beyond games, Three.js is widely used in architectural visualization, where clients can walk through virtual building designs before a single brick is laid. It powers virtual try-on experiences in fashion retail, interactive training simulations in education, and immersive storytelling for journalism and documentary work.
03 كيف تشتغل بالضبط؟ How Does It Actually Work?
Three.js تنظّم كل شيء حول ثلاثة كائنات أساسية: المشهد (Scene)، الكاميرا (Camera)، والمُصيّر (Renderer). المشهد هو حاوية لكل كائناتك ثلاثية الأبعاد. الكاميرا تحدّد نقطة النظر والمنظور. المُصيّر يأخذ المشهد والكاميرا ويرسم النتيجة على عنصر canvas في HTML.
Three.js organizes everything around three essential objects: a Scene, a Camera, and a Renderer. The scene is a container for all your 3D objects. The camera defines the viewpoint and perspective. The renderer takes the scene and camera and draws the result onto an HTML canvas element.
// Scene, Camera, Renderer: the holy trinity
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
// Create a mesh and add it to the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: '#1a7a3c' });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Render loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
هذا مشهد ثلاثي الأبعاد كامل وشغّال بأقل من ٢٠ سطر. Three.js تتولى كل تجميع الـ shader، إدارة البفرات، وأوامر الرسم خلف الكواليس. من هنا، تقدر تضيف إضاءات، تحمّل نماذج ثلاثية الأبعاد بصيغ مثل GLTF، تطبّق قوام، تعمل ظلال، وتربط فيزياء باستخدام مكتبات مثل Cannon.js أو Rapier.
That is a complete, working 3D scene in under 20 lines. Three.js handles all the shader compilation, buffer management, and draw calls behind the scenes. From here, you can add lights, load 3D models in GLTF format, apply textures, cast shadows, and wire up physics using companion libraries like Cannon.js or Rapier.
04 Three.js في الألعاب Three.js in Games
Three.js مو محرك ألعاب بالمعنى التقليدي، ما عندها فيزياء مدمجة، ولا نظام كائنات ومكوّنات، ولا إيجاد مسار، ولا إدارة صوت. بس هذا بالضبط اللي يخلّي كثير من مطوّري الألعاب يلجؤون إليها. هي مكتبة عرض، ومتميزة جداً في ذلك، وهذا يعني إنك تركّب بقية المحرك بنفسك باستخدام الأدوات اللي تبيها.
Three.js is not a game engine in the traditional sense. It has no built-in physics, no entity-component system, no pathfinding, and no audio management. But that is precisely why many game developers reach for it. It is a rendering library, and a remarkably good one, which means you compose the rest of the engine yourself using the tools you want.
عملياً، مكدّس لعبة Three.js نموذجي يبدو كذا: Three.js تتولى كل العرض، مكتبة فيزياء مثل Rapier أو Cannon.js تدير التصادمات والأجسام الصلبة، مدير حالة يتتبّع منطق اللعبة، وواجهة Web Audio API تشغّل الصوت. كثير من المطوّرين كذلك يستخدمون React Three Fiber، وهو محرك React لـ Three.js، اللي يجيب نموذج مكوّنات تعريفياً لبناء المشاهد ثلاثية الأبعاد.
In practice, a typical Three.js game stack looks like this: Three.js handles all rendering, a physics library like Rapier or Cannon.js manages collisions and rigid bodies, a state manager tracks game logic, and the Web Audio API drives sound. Many developers also reach for React Three Fiber, a React renderer for Three.js, which brings a declarative component model to 3D scene construction.
الألعاب المبنية بـ Three.js تتراوح بين الألغاز البسيطة والمشاريع الطموحة بشكل مفاجئ. لعبة HexGL المبنية للمتصفح، لعبة سباق مستقبلية، أثبتت إن Three.js تقدر تقدّم رسومات بجودة الكونسول بسرعة ٦٠ إطاراً في الثانية.
Games built with Three.js range from casual puzzles to surprisingly ambitious projects. The browser-based game HexGL, a futuristic racing game, demonstrated that Three.js could deliver console-quality visuals at 60 frames per second.
من أبرز نقاط قوّتها في سياق الألعاب هي الدخول الفوري بدون تنصيب. اللاعب ينقر رابط واللعبة تشتغل. ما في مشغّل، ما في تنزيل، ما في فحوصات توافق.
One of its biggest strengths in the games context is zero install friction. A player clicks a link and the game is running. No launcher, no download, no compatibility checks.
«اللاعب ينقر رابط واللعبة تشتغل. ما في تنصيب. ما في مشغّل. بس رابط ولحظة دهشة.»
"A player clicks a link and the game runs. No install. No launcher. Just a URL and a moment of wonder."
Three.js كذلك تتكامل بسلاسة مع واجهة WebXR الأشمل، ويعني هذا إن الألعاب المبنية بها تقدر تُمتَد لتجارب الواقع الافتراضي والواقع المعزّز بجهد إضافي معقول.
Three.js also plays nicely with the broader WebXR API, meaning games built with it can be extended into virtual reality and augmented reality experiences with relatively modest additional work.
05 ليش لا تزال مهمة؟ Why It Still Matters
في مشهد مزدحم بإصدارات Unity WebGL وبنايات Godot HTML5 ومحركات متصفح متخصصة، Three.js تصمد لأنها بالضبط ما تقول إنها: مكتبة جافاسكريبت ثلاثية الأبعاد خفيفة وقابلة للتركيب وذات قدرات عميقة. ما تفترض شيئاً عن معمارية مشروعك، ولا تطلب منك تتبنّى سير عمل معيّن، ولا تحزّم ميزات لن تستخدمها.
In a landscape crowded with Unity WebGL exports, Godot HTML5 builds, and purpose-built browser engines, Three.js holds its ground by being exactly what it says it is: a lightweight, composable, deeply capable 3D library for JavaScript. It does not make assumptions about your architecture, does not demand you adopt a particular workflow, and does not bundle features you will never use.
للمطوّرين اللي يريدون التحكم، في الأداء، في حجم الحزمة، في كيفية تكامل المشهد ثلاثي الأبعاد مع بقية تطبيق الويب، Three.js تبقى الأداة الأكثر عملية وتعبيرية المتاحة. بعد خمسة عشر سنة ومئات الإصدارات، ما تتباطأ.
For developers who want control, over performance, over bundle size, over how their 3D scene integrates with the rest of a web application, Three.js remains the most practical and expressive tool available. After fifteen years and hundreds of releases, it is not slowing down.
سواء كنت تعرض منتجاً في متجر إلكتروني، تُصوِّر مدار قمر صناعي، أو تطلق لعبة تشتغل في تاب، Three.js على الأرجح موجودة في مكان ما في المكدّس.
Whether you are rendering a product in an online shop, visualizing a satellite orbit, or shipping a game that runs in a tab, Three.js is almost certainly somewhere in the stack.