1. شكل النص
الحديث عن النص ثلاثي الأبعاد ، أتذكر بعض الكلمات الفنية في الكلمة في سنواتي الأولى:
ثم يمكن استخدام TextGeometry لإنشاء أشكال نصية ثلاثية الأبعاد.
يتطلب استخدام الأشكال النصية تنزيل مكتبات الخطوط الإضافية والإشارة إليها. هنا ، دعنا نأخذ خط helvetiker كمثال.
يقتبس:
<script type = "text/javaScript" src = "your your path/helvetiker_regular.typeface.json"> </script>
مُنشئ قياس النص هو:
Three.textGeometry (نص ، معلمات)
النص سلسلة حرفية.
المعلمات هي كائنات مكونة من المعلمات التالية:
・ الحجم: حجم الخط ، عمومًا ارتفاع رسائل رأس المال
・ الارتفاع: سمك النص
・ Curvesegments: عدد شرائح القوس يجعل منحنى النص أكثر سلاسة
・ الخط: الخط ، الافتراضي هو "Helvetiker" ، وملف الخط الذي يجب الرجوع إليه
・ الوزن: القيمة "طبيعية" أو "جريئة" ، مما يشير إلى ما إذا كانت أكثر سمكا
・ النمط: القيمة "طبيعية" أو "مائل" ، مما يشير إلى ما إذا كانت مائل مائل
・ bevelenabled: القيمة المنطقية ، سواء كنت تستخدم Chamfer ، وهذا يعني أن تقطع بشكل غير مباشر على الحافة
・ bevelthickness: سمك الشارع
・ bevelsize: عرض الشارع
قم بإنشاء نص ثلاثي الأبعاد: new THREE.TextGeometry('Hello', {size: 1, height: 1})， هو:
يمكن ضبط المواد والإضاءة بشكل مناسب لتحقيق التأثير المطلوب:
. 30}) ؛ // توجيه الضوء var light = جديد three.directionAllight (0xffffff) ؛ light.position.set (-5 ، 10 ، 5) ؛ scene.add (light) ؛
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js اختبار ستة </title> </head> <body Onload = "init ()" src = "js/three.min.js"> </script> <!-ابحث عن مزيد من المعلومات في https://github.com/mrdoob/three.js/tree/master/examples/fonts-> <script type = "text/javaScript"> init () {var renderer = new. 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 (1 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ // var material = new three.meshbasicmaterial ({// color: 0xffff00 ، // wireframe: true //}) ؛ // metal shining object var material = new three.meshphongmaterial ({color: 0xffff00 ، specular: 0xffff00 ، // حدد سطوع المادة ولون الجزء المميز. // Direction Light var Light = جديد three.directionAllight (0xffffff) ؛ Light.position.set (-5 ، 10 ، 5) ؛ المشهد. add (الضوء) ؛ // load font var loader = new Three.FontLoader () ؛ loader.load ('./ helvetiker_regular.typeface.json' ، function (font) {var mesh = new three.mesh (new Three.textGeomety ('hello' ، {font: font ، size: 1 ، height: 1}) ، material) ؛ } </script> </html>2. الأشكال المخصصة
بالنسبة للأشكال التي لا توفرها Three.js ، يمكن توفير أشكال مخصصة لإنشاء.
نظرًا لأن الأشكال المخصصة تتطلب مواصفات يدوية لكل موضع قمة واتصال قمة الرأس ، إذا كان الشكل معقدًا للغاية ، فستكون حسابات المبرمج كبيرة نسبيًا. في هذه الحالة ، يوصى بإنشاء نموذج في برنامج نمذجة مثل 3DS Max ثم استيراده إلى المشهد باستخدام Three.js ، والذي سيكون أكثر كفاءة ومريحة.
تستخدم الأشكال المخصصة فئة Geometry ، وهي الفئة الأم للأشكال الهندسية الأخرى مثل CubeGeometry ، SphereGeometry ، وما إلى ذلك ، ومُنشئها هو:
THREE.Geometry()
تهيئة الهندسة ، ثم قم بتعيين موضع Vertex وحالة اتصال قمة الرأس:
رمز المصدر:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js اختبار ستة-two </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </body> <cript type = "javaScript" src = "js/three.js"> </script> <script type = "text/javaScript"> function init () {var redereer = new three.webglrenderer ({canvas: document.getElementById ('maincanvas')}) ؛ Renderer.setClearColor (0x0000000) ؛ var scene = new Three.scene () ؛ // camera var camera = new Three.OthographicCamera (-5 ، 5 ، 3.75 ، -3.75 ، 0.1 ، 100) ؛ camera.position.set (25 ، 25 ، 25) ؛ camera.lookat (new Three.vector3 (0 ، 0 ، 0)) ؛ المشهد. add (الكاميرا) ؛ var material = new three.meshbasicmaterial ({color: 0xffff00 ، wireframe: true}) ؛ // تهيئة هندسة Var Geometry = new Three.geometry () ؛ // تعيين موضع Vertex // Top 4 Vertices Geometry.vertices.push (New Three.Vector3 (-1 ، 2 ، -1)) ؛ Geometry.Vertices.push (New Three.vector3 (1 ، 2 ، -1)) ؛ Geometry.Vertices.push (New Three.vector3 (1 ، 2 ، 1)) ؛ Geometry.Vertices.push (New Three.vector3 (-1 ، 2 ، 1)) ؛ Geometry.Vertices.push (New Three.vector3 (-1 ، 2 ، 1)) ؛ Geometry.Vertices.push (New Three.vector3 (-1 ، 2 ، 1)) ؛ Geometry.Vertices.push (New Three.vector3 (-1 ، 2 ، 1)) ؛ Geometry.Vertices.push (New Three.vector3 (-1 ، 2 ، 1)) ؛ // السفلية 4 رؤوس هندسة. Geometry.Vertices.push (New Three.vector3 (2 ، 0 ، -2)) ؛ Geometry.vertices.push (New Three.vector3 (2 ، 0 ، 2)) ؛ Geometry.vertices.push (New Three.vector3 (2 ، 0 ، 2)) ؛ Geometry.vertices.push (New Three.vector3 (-2 ، 0 ، 2)) ؛ // تعيين حالة اتصال Vertex // Top Geometry.faces.push (New Three.face3 (0 ، 1 ، 3)) ؛ Geometry.faces.push (New Three.face3 (1 ، 2 ، 3)) ؛ // Geometry.faces.push (new Three.face4 (0 ، 1 ، 2 ، 3)) ؛ // bottom geometry.faces.push (new Three.face3 (4 ، 5 ، 6)) ؛ Geometry.faces.push (New Three.face3 (5 ، 6 ، 7)) ؛ // geometry.faces.push (new Three.face4 (4 ، 5 ، 6 ، 7)) ؛ // side geometry.faces.push (new Three.face3 (1 ، 5 ، 6)) ؛ Geometry.faces.push (New Three.face3 (6 ، 2 ، 1)) ؛ Geometry.faces.push (New Three.face3 (2 ، 6 ، 7)) ؛ Geometry.faces.push (New Three.face3 (7 ، 3 ، 2)) ؛ Geometry.faces.push (New Three.face3 (3 ، 7 ، 0)) ؛ Geometry.faces.push (new Three.face3 (7 ، 4 ، 0)) ؛ Geometry.faces.push (new Three.face3 (0 ، 4 ، 5)) ؛ Geometry.faces.push (new Three.face3 (0 ، 4 ، 5)) ؛ Geometry.faces.push (new Three.face3 (0 ، 4 ، 5)) ؛ Geometry.faces.push (New Three.face3 (0 ، 5 ، 1)) ؛ // // Face مكونة من أربع رؤوس // geometry.faces.push (new Three.face4 (0 ، 1 ، 5 ، 4)) ؛ // geometry.faces.push (new Three.face4 (1 ، 2 ، 6 ، 5)) ؛ // geometry.faces.push (new Three.face4 (2 ، 3 ، 7 ، 6)) ؛ // geometry.faces.push (new Three.face4 (3 ، 0 ، 4 ، 7)) ؛ var mesh = جديد three.mesh (الهندسة ، المواد) ؛ المشهد. add (شبكة) ؛ // renderder.render (المشهد ، الكاميرا) ؛ } </script> </html> تجدر الإشارة geometry.vertices أن new THREE.Vector3(-1, 2, -1)
ويتم إنشاء وجه مكون من ثلاث رؤى بواسطة new THREE.Face3(0, 1, 2) وإلحاقه إلى صفيف geometry.faces . المعلمات الثلاثة هي أرقام التسلسل من القمم الثلاثة في geometry.vertices . إذا كنت بحاجة إلى تعيين تصحيح يتكون من أربع رؤوس ، فيمكنك استخدام THREE.Face4 بالمثل.
// Top Geometry.faces.push (New Three.face4 (0 ، 1 ، 2 ، 3)) ؛ // Bottom Geometry.faces.push (New Three.face4 (4 ، 5 ، 6 ، 7)) ؛ 5)) ؛ geometry.faces.push (new Three.face4 (2 ، 3 ، 7 ، 6)) ؛ Geometry.faces.push (New Three.face4 (2 ، 3 ، 7 ، 6)) ؛ Geometry.faces.push (new Three.face4 (3 ، 0 ، 4 ، 7)) ؛
ما سبق هو المحتوى الكامل لأشكال نص التعلم Three.JS والأشكال المخصصة التي جمعها المحرر. قام المحرر أيضًا بتجميع العديد من المقالات ذات الصلة عن ثلاثة. إذا كنت في حاجة إليها ، يمكنك عرضه من خلال روابط المقالات ذات الصلة أدناه. آمل أن يساعد كل من يتعلم ثلاثة.