مقدمة
نشر المحرر حول الأشكال والمواد الهندسية من قبل. أعتقد أنه بعد قراءة وتعلم ، يمكننا استخدامها لإنشاء كائنات. الكائن الأكثر استخدامًا هو شبكة ، وهو كائن يتكون من القمم ، الحواف ، الوجوه ، إلخ ؛ تتضمن الكائنات الأخرى شرائح الخطوط والعظام وأنظمة الجسيمات وما إلى ذلك لإنشاء كائن ، تحتاج إلى تحديد الشكل والمواد الهندسية. من بينها ، يحدد الشكل الهندسي موضع قمة الكائن والمعلومات الأخرى ، ويحدد المادة اللون والملمس والمعلومات الأخرى للكائن.
1. إنشاء شبكة
في المقالات السابقة ، تعلمنا كيفية إنشاء أشكال ومواد هندسية ، وإنشاء شبكة بسيطة للغاية ، فقط تمرير الأشكال والمواد الهندسية إلى مُنشئها. الكائن الأكثر شيوعًا هو شبكة ، تمثل هندسة تحتوي على نقاط وخطوط وأسطح. مُنشئه هو:
شبكة (هندسة ، مادة)
هنا ، دعنا نتعلم كيفية إنشاء شبكة مع مثال محدد:
var material = new three.meshlambertmaterial ({color: 0xffff00}) ؛ var geometry = new three.cubegeometry (1 ، 2 ، 3) ؛ var mesh = new three.mesh (Geometry ، material) ؛ scene.add (mesh) ؛إذا لم تتم إعادة استخدام المواد والهندسة بعد ذلك ، فيمكن أيضًا كتابتها معًا على النحو التالي:
var mesh = new Three.mesh (New Three.cubegeometry (1 ، 2 ، 3) ، three.meshlambertmaterial ({color: 0xffff00}) ؛ scene.add (mesh) ؛بعد إضافة الإضاءة ، والنتيجة هي:
إذا لم يتم تحديد المواد ، فسيتم تعيين مادة ذات إطار سلكي حقيقي بشكل عشوائي في كل مرة. اللون بعد تحديث الصفحة مختلف. تأثير واحد محتمل هو:
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 9.1 </itlem> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </slanvas> </body> <tript type = "javaSctrip" src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-2.5 ، 2.5 ، 1.875 ، -1.875 ، 0.1 ، 100) ؛ camera.position.set (5 ، 5 ، 20) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ var material = new three.meshlambertmaterial ({color: 0xffff00}) ؛ // var material = new three.meshbasicmaterial ({// color: 0xffff00 ، // wireframe: true //}) ؛ var geometry = new Three.Cubegeometry (1 ، 2 ، 3) ؛ var mesh = جديد three.mesh (الهندسة ، المواد) ؛ المشهد. add (شبكة) ؛ var light = new three.directionAllight (0xffffff) ؛ Light.position.set (20 ، 10 ، 5) ؛ المشهد. add (الضوء) ؛ // renderder.render (المشهد ، الكاميرا) ؛ } </script> </html>2. تعديل الخصائص
2.1 تعديل المادة
بالإضافة إلى تحديد المادة في المنشئ ، يمكن أيضًا تعديل المادة بعد إنشاء الشبكة:
var material = new three.meshlambertmaterial ({color: 0xffff00}) ؛ var geometry = new three.cubegeometry (1 ، 2 ، 3) ؛ var mesh = new three.mesh (Geometry ، material) ؛ scene.add (mesh) ؛ mesh.material = جديد three.meshlambertmaterial ({color: 0xff0000}) ؛اللون النهائي أحمر:
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </body> <body> src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-2.5 ، 2.5 ، 1.875 ، -1.875 ، 0.1 ، 100) ؛ camera.position.set (5 ، 5 ، 20) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ var material = new three.meshlambertmaterial ({color: 0xffff00}) ؛ var geometry = new Three.Cubegeometry (1 ، 2 ، 3) ؛ var mesh = جديد three.mesh (الهندسة ، المواد) ؛ المشهد. add (شبكة) ؛ mesh.material = جديد three.meshlambertmaterial ({color: 0xFF0000}) ؛ var light = new three.directionAllight (0xffffff) ؛ Light.position.set (20 ، 10 ، 5) ؛ المشهد. add (الضوء) ؛ // عرض Renderer. Render (المشهد ، الكاميرا) ؛ } </script> </html>2.2 الموقف ، التكبير ، الدوران
الموضع والتوسيع والدوران هي ثلاث خصائص شائعة للكائنات. نظرًا لأن ثلاثة. إنها كل ثلاثة مثيلات.
ثلاثة. إذا قمت فقط بتعيين إحدى السمات ، فيمكنك استخدام الطريقة التالية:
mesh.position.z = 1 ؛
إذا كنت بحاجة إلى تعيين خصائص متعددة في نفس الوقت ، فيمكنك استخدام الطريقتين التاليتين:
mesh.position.set (1.5 ، -0.5 ، 0) ؛
أو:
mesh.position = new Three.Vector3 (1.5 ، -0.5 ، 0) ؛
السمة المقابلة للتوسع هي المقياس ، والسمة المقابلة للدوران هي الدوران. الطريقة المحددة هي نفس المثال أعلاه ، مما يشير إلى التحجيم أو الدوران على طول المحاور الثلاثة X و Y و Z على التوالي.
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9 src = "js/three.min.js"> </script> <script type = "text/javaScript"> function init () {var redererer = new Three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-2.5 ، 2.5 ، 1.875 ، -1.875 ، 0.1 ، 100) ؛ camera.position.set (5 ، 5 ، 20) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ var material = new three.meshlambertmaterial ({color: 0xffff00}) ؛ var geometry = new Three.Cubegeometry (1 ، 2 ، 3) ؛ var mesh = جديد three.mesh (الهندسة ، المواد) ؛ المشهد. add (شبكة) ؛ mesh.position.set (1.5 ، -0.5 ، 0) ؛ mesh.position = new Three.Vector3 (1.5 ، -0.5 ، 0) ؛ mesh.position.z = 1 ؛ var light = new three.directionAllight (0xffffff) ؛ Light.position.set (20 ، 10 ، 5) ؛ المشهد. add (الضوء) ؛ drawaxes (المشهد) ؛ // renderder.render (المشهد ، الكاميرا) ؛ } دالة drawaxes (المشهد) {// x-axis var xgeo = new three.geometry () ؛ xgeo.vertices.push (new Three.vector3 (0 ، 0 ، 0)) ؛ xgeo.vertices.push (new Three.vector3 (1 ، 0 ، 0)) ؛ var xmat = new.lineBasicMaterial ({color: 0xFF0000}) ؛ var xaxis = new Three.line (Xgeo ، XMAT) ؛ المشهد. add (xaxis) ؛ // y-axis var ygeo = new Three.geometry () ؛ ygeo.vertices.push (new Three.vector3 (0 ، 0 ، 0)) ؛ ygeo.vertices.push (new Three.vector3 (0 ، 1 ، 0)) ؛ var ymat = new.lineBasicMaterial ({color: 0x00ff00}) ؛ var yaxis = new Three.line (ygeo ، ymat) ؛ المشهد. add (yaxis) ؛ // z-axis var zgeo = new Three.geometry () ؛ zgeo.vertices.push (new Three.vector3 (0 ، 0 ، 0)) ؛ zgeo.vertices.push (new Three.vector3 (0 ، 0 ، 1)) ؛ var zmat = new.lineBasicMaterial ({color: 0x00ccff}) ؛ var Zaxis = New Three.line (Zgeo ، Zmat) ؛ المشهد. add (zaxis) ؛ } </script> </html>محتوى هذه المقالة ينتهي هنا. يقدم المقال الشبكة في ثلاثة. js من خلال أمثلة وصور مفصلة. آمل أن يكون هذا المقال مفيدًا للجميع لتعلم ثلاثة.