Docs: Arabic Update added Libraries and Plugins page (#27140)

* started updating arabic documentation

starting translating the Creating a scene page and planing to update all and added a class in css to properly display the code file name in RTL

* Update Creating-a-scene.html

* more improvment to the arabic documentation

more changes to the creating a scene in ar documentation

* finished updating the creating scene page in arabic

finished updating arabic documentation according to the english version of the creating a scene

* minor fixes

* added Libraries and plugins html to arabic docs

added according to the english version the libraries and plugins pages

* Update How-to-update-things.html

docs/list.json

@@ -448,6 +448,7 @@
 				"رسم خطوط": "manual/ar/introduction/Drawing-lines",
 				"إنشاء نص": "manual/ar/introduction/Creating-text",
 				"تحميل نماذج ثلاثية الأبعاد": "manual/ar/introduction/Loading-3D-models",
+				"المكتبات والإضافات": "manual/ar/introduction/Libraries-and-Plugins",
 				"الأسئلة الشائعة": "manual/ar/introduction/FAQ",
 				"روابط مفيدة": "manual/ar/introduction/Useful-links"
 			},

docs/manual/ar/introduction/How-to-update-things.html

@@ -11,24 +11,24 @@
 		<div>
 			<p>تقوم كل الكائنات بشكل ألي بتحديث حالتها تلقائيًا إذا تمت إضافتها إلى المشهد باستخدام</p>
 			<code>
-const object = new THREE.Object3D();
-scene.add( object );
+			const object = new THREE.Object3D();
+			scene.add( object );
 			</code>
 			<p>أو إذا كانوا أبناء كائن آخر تمت إضافته إلى المشهد:</p>
 			<code>
-const object1 = new THREE.Object3D();
-const object2 = new THREE.Object3D();
+			const object1 = new THREE.Object3D();
+			const object2 = new THREE.Object3D();
 
-object1.add( object2 );
-scene.add( object1 ); //object1 and object2 will automatically update their matrices
+			object1.add( object2 );
+			scene.add( object1 ); //object1 and object2 will automatically update their matrices
 			</code>
 		</div>
 
 		<p>ومع ذلك ، إذا كنت تعلم أن الكائن سيكون ثابتًا ، فيمكنك تعطيل هذا وتحديث وضيفة التحديث يدويًا عند الحاجة فقط.</p>
 
 		<code>
-object.matrixAutoUpdate = false;
-object.updateMatrix();
+		object.matrixAutoUpdate = false;
+		object.updateMatrix();
 		</code>
 
 		<h2>BufferGeometry</h2>
@@ -48,62 +48,67 @@ object.updateMatrix();
 				سنستخدم مثال السطر الذي سيتم تمديده في وقت العرض. سنخصص مساحة في المخزن المؤقت لـ 500 رأس لكننا نرسم اثنين فقط في البداية ، باستخدام [page:BufferGeometry.drawRange].
 			</p>
 			<code>
-const MAX_POINTS = 500;
+			const MAX_POINTS = 500;
 
-// geometry
-const geometry = new THREE.BufferGeometry();
+			// geometry
+			const geometry = new THREE.BufferGeometry();
 
-// attributes
-const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
-geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			// attributes
+			const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
+			geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-// draw range
-const drawCount = 2; // draw the first 2 points, only
-geometry.setDrawRange( 0, drawCount );
+			// draw range
+			const drawCount = 2; // draw the first 2 points, only
+			geometry.setDrawRange( 0, drawCount );
 
-// material
-const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
+			// material
+			const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
 
-// line
-const line = new THREE.Line( geometry, material );
-scene.add( line );
+			// line
+			const line = new THREE.Line( geometry, material );
+			scene.add( line );
 			</code>
 		 	<p>
 				بعد ذلك سنضيف نقاطًا بشكل عشوائي إلى الخط باستخدام نمط مثل:
 			</p>
 			<code>
-const positionAttribute = line.geometry.getAttribute( 'position' );
+			const positionAttribute = line.geometry.getAttribute( 'position' );
 
-let x = 0, y = 0, z = 0;
+			let x = 0, y = 0, z = 0;
 
-for ( let i = 0; i < positionAttribute.count; i ++ ) {
+			for ( let i = 0; i < positionAttribute.count; i ++ ) {
 
-	positionAttribute.setXYZ( i, x, y, z );
+				positionAttribute.setXYZ( i, x, y, z );
 
-	x += ( Math.random() - 0.5 ) * 30;
-	y += ( Math.random() - 0.5 ) * 30;
-	z += ( Math.random() - 0.5 ) * 30;
+				x += ( Math.random() - 0.5 ) * 30;
+				y += ( Math.random() - 0.5 ) * 30;
+				z += ( Math.random() - 0.5 ) * 30;
 
-}
+			}
 			</code>
+			
 			<p>
 				إذا كنت تريد تغيير <em>عدد النقاط</em> التي تم إظهارها بعد العرض الأول ، فقم بما يلي:
 			</p>
+
 			<code>
-line.geometry.setDrawRange( 0, newValue );
+			line.geometry.setDrawRange( 0, newValue );
 			</code>
+			
 			<p>
 				إذا كنت تريد تغيير قيم بيانات الموضع بعد العرض الأول ، فأنت بحاجة إلى تعيين علامة needsUpdate على النحو التالي:
 			</p>
+			
 			<code>
-positionAttribute.needsUpdate = true; // required after the first render
+			positionAttribute.needsUpdate = true; // required after the first render
 			</code>
 
 			<p>
 				إذا قمت بتغيير قيم بيانات الموقع بعد التصيير الأولي ، فقد تحتاج إلى استدعاء `` .computeBoundingSphere () 'لإعادة حساب المجال المحيط للهندسة.
 			</p>
+			
 			<code>
-line.geometry.computeBoundingSphere();
+			line.geometry.computeBoundingSphere();
 			</code>
 
 			<p>
@@ -143,6 +148,7 @@ line.geometry.computeBoundingSphere();
 			</ul>
 
 			<p>تتطلب التغييرات في هذه بناء برنامج شادر (shader) جديد. سوف تحتاج إلى ضبط</p>
+			
 			<code>material.needsUpdate = true</code>
 
 			<p>ضع في اعتبارك أن هذا قد يكون بطيئًا للغاية ويؤدي إلى اهتزاز في معدل الإطارات (خاصة على Windows ، حيث أن التحويل البرمجي للشادر (shader) يكون أبطأ في DirectX منه في OpenGL).</p>
@@ -152,11 +158,13 @@ line.geometry.computeBoundingSphere();
 			<p>يمكنك تغيير المواد المستخدمة في القطع الهندسية بحرية ، ولكن لا يمكنك تغيير كيفية تقسيم الكائن إلى أجزاء (وفقًا لمواد الوجه). </p>
 
 			<h3>إذا كنت بحاجة إلى تكوينات مختلفة من المواد أثناء وقت التشغيل:</h3>
+			
 			<p>إذا كان عدد المواد / القطع الصغيرًة ، فيمكنك تقسيم الجسم مسبقًا (مثل الشعر / الوجه / الجسم / الملابس العلوية / السراويل للإنسان ، أمامي / جوانب / الجزء العلوي / الزجاج / الإطار / الجزء الداخلي للسيارة). </p>
 
 			<p>إذا كان الرقم كبيرًا (على سبيل المثال ، من المحتمل أن يكون كل وجه مختلفًا) ، ففكر في حل مختلف ، مثل استخدام السمات / القوام للحصول على مظهر مختلف لكل وجه.</p>
 
 			<h3>أمثلة</h3>
+			
 			<p>
 				[example:webgl_materials_car WebGL / materials / car]<br />
 				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
@@ -167,9 +175,11 @@ line.geometry.computeBoundingSphere();
 		<h2>النسيج (Textures)</h2>
 		<div>
 			<p>يجب أن يتم تعيين العلامات التالية في الصورة ، canvas والفيديو والبيانات إذا تم تغييرها:</p>
+			
 			<code>
-				texture.needsUpdate = true;
+			texture.needsUpdate = true;
 			</code>
+			
 			<p>العرض يستهدف التحديث تلقائيا.</p>
 
 			<h3>أمثلة</h3>
@@ -184,6 +194,7 @@ line.geometry.computeBoundingSphere();
 		<h2>الكاميرات (Cameras)</h2>
 		<div>
 			<p>يتم تحديث موضع الكاميرا وهدفها تلقائيًا. إذا كنت بحاجة إلى التغيير</p>
+			
 			<ul>
 				<li>
 					fov
@@ -198,12 +209,14 @@ line.geometry.computeBoundingSphere();
 					far
 				</li>
 			</ul>
+			
 			<p>
 				ثم ستحتاج إلى إعادة حساب مصفوفة الإسقاط(the projection matrix):
 			</p>
+			
 			<code>
-camera.aspect = window.innerWidth / window.innerHeight;
-camera.updateProjectionMatrix();
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
 			</code>
 		</div>
 	</body>

docs/manual/ar/introduction/Libraries-and-Plugins.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="ar">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body class="rtl">
+		<h1>المكتبات والإضافات ([name])</h1>
+
+		<p class="desc">
+			هنا تُدرج المكتبات والإضافات المتوافقة التي تم تطويرها خارجيًا لمكتبة three.js. هذه القائمة والحزم المرتبطة بها تُدار بواسطة المجتمع ولا يمكن ضمان تحديثها دائمًا. إذا كنت ترغب في تحديث هذه القائمة، يُمكنك عمل PR!"
+		</p>
+
+		<h3 >الفيزياء(Physics)</h3>
+
+		<ul>
+			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
+			<li>[link:https://enable3d.io/ enable3d]</li>
+			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
+			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
+			<li>[link:https://rapier.rs/ rapier]</li>
+			
+		</ul>
+
+		<h3>المعالجة البعدية(Postprocessing)</h3>
+
+		<p>
+		"بالإضافة إلى [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing تأثيرات المعالجة البعدية الرسمية لمكتبة three.js],يتوفر دعم لبعض التأثيرات والأطُر الإضافية من خلال مكتبات خارجية."
+		</p>
+
+		<ul>
+			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
+		</ul>
+
+		<h3>أداء التقاطع والاختبار بالأشعة (Intersection and Raycast Performance)</h3>
+
+		<ul>
+			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
+		</ul>
+
+		<h3>تتبع المسار (Path Tracing)</h3>
+		
+		<ul>
+			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
+		</ul>
+		
+		<h3>صيغ الملفات (File Formats)</h3>
+
+		<p>
+		بالإضافة إلى [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders محمّلات three.js الرسمية],يتوفر دعم لبعض الصيغ الإضافية من خلال مكتبات خارجية.
+		</p>
+
+		<ul>
+			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
+			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
+			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
+			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
+		</ul>
+
+		<h3>الشكليات (Geometry)</h3>
+
+		<ul>
+			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
+		</ul>
+
+		<h3>النص ثلاثي الأبعاد والتخطيط (3D Text and Layout)</h3>
+
+		<ul>
+			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
+			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
+		</ul>
+
+		<h3>نظام الجسيمات (Particle Systems)</h3>
+
+		<ul>
+			<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
+			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
+		</ul>
+
+		<h3>الحركة العكسية الحركية (Inverse Kinematics)</h3>
+
+		<ul>
+			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
+			<li>[link:https://github.com/lo-th/fullik fullik]</li>
+			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
+		</ul>
+
+		<h3>ذكاء اللعبة الاصطناعي (Game AI)</h3>
+
+		<ul>
+			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
+			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
+			<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
+		</ul>
+
+		<h3>الأغلفة والأطُر (Wrappers and Frameworks)</h3>
+
+		<ul>
+			<li>[link:https://aframe.io/ A-Frame]</li>
+			<li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
+			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
+			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
+			<li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
+			<li>[link:https://needle.tools/ Needle Engine]</li>
+		</ul>
+
+	</body>
+</html>