Three.js هو محرك ثلاثي الأبعاد يعمل في المتصفح. يمكنك استخدامه لإنشاء مشاهد ثلاثية الأبعاد مختلفة ، بما في ذلك الكاميرات والضوء والظل والمواد والكائنات الأخرى. يمكنك رؤية العديد من المظاهرات الرائعة على صفحتها الرئيسية. ومع ذلك ، لا يزال هذا المحرك في مرحلة تنمية غير ناضجة نسبيا. زادت واجهة برمجة التطبيقات غير الكافية والافتقار إلى الوثائق من صعوبة التعلم للمبتدئين (وخاصة عدم وجود الوثائق). يتم استضافة رمز Three.js على Github.
http://github.com/mrdoob/three.js/
دعونا نلقي نظرة على المثال
<! doctype html> <html> <head> <meta charset = "utf-8"/> </title> </title> </head> <script type = "text/javaScript" src = "js/three.js"> </script> <style> div#canvas-frame {border: none ؛ المؤشر: مؤشر. العرض: 100 ٪ ؛ الارتفاع: 600 بكسل ؛ خلفية اللون: #EEEEE ؛ } </style> <script> var Renderer ؛ وظيفة initThree () {width = document.getElementById ('canvas-frame'). clientwidth ؛ الارتفاع = document.getElementById ('canvas-frame'). clientHeight ؛ // يحدد العارض نتيجة التقديم وما هو العنصر الذي يجب رسمه على الصفحة وكيفية رسمها. Renderer = new Three.webglrenderer ({antialias: true}) ؛ Renderer.Setsize (العرض ، الارتفاع) ؛ // يمثل domelement القماش في العارض ، ويتم رسم جميع الاداءات على المستند. Renderer.setClearColor (0xfffff ، 1.0) ؛ } // Camera Perspective Camera var Camera ؛ وظيفة initcamera () {camera = new Three.perspectivecamera (45 ، العرض/الارتفاع ، 1،10000) ؛ camera.position.x = 0 ؛ camera.position.y = 1000 ؛ camera.position.z = 0 ؛ camera.up.y = 0 ؛ camera.up.y = 0 ؛ camera.up.z = 1 ؛ camera.lookat ({x: 0 ، y: 0 ، z: 0}) ؛ } // مشهد مشهد var ؛ وظيفة initscene () {scene = new Three.scene () ؛ } // light var light ؛ وظيفة initlight () {light = new Three.DirectionAllight (0xFF0000 ، 1.0 ، 0) ؛ Light.position.set (100 ، 100 ، 200) ؛ المشهد. add (الضوء) ؛ } // Geometry var Cube ؛ وظيفة initObject () {// الهندسة المعلنة ، هناك معلمة رؤوس يمكن استخدامها لتخزين نقطة Var Geometry = جديدة three.geometry () ؛ // LineBasicMaterial (المعلمات) // الترجمة الأساسية: Basic // Translation: المواد الخام // المعلمات: هو كائن يحدد مظهر المادة. أنه يحتوي على سمات متعددة لتحديد المادة. هذه السمات هي // الترجمة: المعلمات // اللون: لون الخط ، ويمثل في سداسي عشري ، واللون الافتراضي أبيض. // linewidth // linecap: يتم عرض ظهور كلا طرفي الخط بشكل افتراضي. لا يمكن رؤية التأثير إلا عندما يكون الخط أكثر سمكًا. // Cap Translation: HAT // Line Join: ظهور نقطة الاتصال بين سطرين ، زوايا مدورة بشكل افتراضي. // انضم إلى الترجمة: تمت إضافة // VertexColors: تحديد ما إذا كانت مادة الخط تستخدم عناصر Vertex ، فهذه قيمة منطقية. وهذا يعني أن ألوان كل جزء من الخط يتم استقراءها وفقًا لون لون القمة. // ترجمة Vertex: Vertex // الضباب: يحدد ما إذا كان لون المادة يتأثر بتأثير الضباب العالمي. // الترجمة: الضباب var material = new.lineBasicMaterial ({vertexcolors: true}) ؛ // تحديد اللونين اللذين هما ألوان نقطتي النهاية var color1 = new three.color (0x444444) ، color2 = new three.color (0xFF0000) ؛ // يمكن تحديد مادة الخط من خلال لون النقطتين var p1 = جديد three.vector3 () ؛ var p2 = new Three.Vector3 () ؛ p1.set (-100،0،100) ؛ p2.set (100،0 ، -100) ؛ Geometry.Vertices.push (p1) ؛ Geometry.Vertices.push (p2) ؛ Geometry.colors.push (color1 ، color2) ؛ // تحديد الخط وسيتم تمرير ثلاث معلمات هنا // الأول هو هندسة الهندسة ، التي تحتوي على قمة وألوان قمة // الثانية هي مادة الخط // الثالث هي طريقة اتصال مجموعة من النقاط VAR LINE = New Three.line (الهندسة ، المواد ، three.line. // إضافة خطوط إلى المشهد. add (الخط) ؛ } وظيفة threestart () {initThree () ؛ initcamera () ؛ initscene () ؛ initlight () ؛ initObject () ؛ Renderer.clear () ؛ Renderer.render (المشهد ، الكاميرا) ؛ } </script> <body Onload = "Threestart ()"> <div id = "canvas-frame"> </viv> </body> </html>آمل أن يساعدك هذا المثال في تعلم ثلاثة