ExtrudeGeometry.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html lang="ar">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body class="rtl">
  10. [page:BufferGeometry] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">ينشئ هندسة مُبثوقة من شكل المسار.</p>
  13. <iframe
  14. id="scene"
  15. src="scenes/geometry-browser.html#ExtrudeGeometry"
  16. ></iframe>
  17. <script>
  18. // iOS iframe auto-resize workaround
  19. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  20. const scene = document.getElementById( 'scene' );
  21. scene.style.width = getComputedStyle( scene ).width;
  22. scene.style.height = getComputedStyle( scene ).height;
  23. scene.setAttribute( 'scrolling', 'no' );
  24. }
  25. </script>
  26. <h2>مثال الكود</h2>
  27. <code>
  28. const length = 12, width = 8;
  29. const shape = new THREE.Shape();
  30. shape.moveTo( 0,0 );
  31. shape.lineTo( 0, width );
  32. shape.lineTo( length, width );
  33. shape.lineTo( length, 0 );
  34. shape.lineTo( 0, 0 );
  35. const extrudeSettings = {
  36. steps: 2,
  37. depth: 16,
  38. bevelEnabled: true,
  39. bevelThickness: 1,
  40. bevelSize: 1,
  41. bevelOffset: 0,
  42. bevelSegments: 1
  43. };
  44. const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
  45. const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  46. const mesh = new THREE.Mesh( geometry, material ) ;
  47. scene.add( mesh );
  48. </code>
  49. <h2>المنشئ (Constructor)</h2>
  50. <h3>[name]([param:Array shapes], [param:Object options])</h3>
  51. <p>
  52. shapes — شكل أو مصفوفة من الأشكال. <br />
  53. options — كائن يمكن أن يحتوي على المعلمات التالية.
  54. </p>
  55. <ul>
  56. <li>
  57. curveSegments — int. عدد النقاط على المنحنيات. الافتراضي هو 12.
  58. </li>
  59. <li>
  60. steps — int. عدد النقاط المستخدمة لتقسيم الشرائح على طول
  61. عمق المنحنى المبثوق. الافتراضي هو 1.
  62. </li>
  63. <li>depth — float. عمق لإبعاد الشكل. الافتراضي هو 1.</li>
  64. <li>
  65. bevelEnabled — bool. تطبيق التجعيد على الشكل. الافتراضي هو true.
  66. </li>
  67. <li>
  68. bevelThickness — float. مدى اختراق التجعيد في الشكل الأصلي.
  69. الافتراضي هو 0.2.
  70. </li>
  71. <li>
  72. bevelSize — float. المسافة من مخطط الشكل التي يمتد فيها التجعيد.
  73. الافتراضي هو bevelThickness - 0.1.
  74. </li>
  75. <li>
  76. bevelOffset — float. المسافة من مخطط الشكل التي يبدأ فيها التجعيد.
  77. الافتراضي هو 0.
  78. </li>
  79. <li>bevelSegments — int. عدد طبقات التجعيد. الافتراضي هو 3.</li>
  80. <li>
  81. extrudePath — THREE.Curve. مسار منحنى ثلاثي الأبعاد يجب أن يتم إبعاد
  82. الشكل على طوله. لا يتم دعم التجعيد لإبعاد المسار.
  83. </li>
  84. <li>UVGenerator — Object. كائن يوفر وظائف مولد UV</li>
  85. </ul>
  86. <p>هذا الكائن يبعد شكل ثنائي الأبعاد إلى هندسة ثلاثية الأبعاد.</p>
  87. <p>
  88. عند إنشاء شبكة بهذه الهندسة، إذا كنت ترغب في استخدام مادة منفصلة لوجهها
  89. وجوانبها المبثوقة، يمكنك استخدام مصفوفة من المواد. سيتم تطبيق المادة
  90. الأولى على الوجه؛ سيتم تطبيق المادة الثانية على الجانب.
  91. </p>
  92. <h2>الخصائص (Properties)</h2>
  93. <p>انظر فئة [page:BufferGeometry] الأساسية للخصائص المشتركة.</p>
  94. <h3>[property:Object parameters]</h3>
  95. <p>
  96. كائن يحتوي على خاصية لكل من معلمات المنشئ. أي تعديل بعد التجسيد لا يغير
  97. الهندسة.
  98. </p>
  99. <h2>الطرق (Methods)</h2>
  100. <p>انظر فئة [page:BufferGeometry] الأساسية للطرق المشتركة.</p>
  101. <h2>المصدر (Source)</h2>
  102. <p>
  103. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  104. </p>
  105. </body>
  106. </html>