DirectionalLightShadow.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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:LightShadow] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. يتم استخدام هذا داخليًا من قبل [page:DirectionalLight DirectionalLights] لـ
  14. حساب الظلال. <br /><br />
  15. على عكس فئات الظلال الأخرى ، يستخدم هذا [page:OrthographicCamera] لـ
  16. حساب الظلال ، بدلاً من [page:PerspectiveCamera]. هذا هو
  17. لأن أشعة الضوء من [page:DirectionalLight] متوازية.
  18. </p>
  19. <h2>مثال الكود</h2>
  20. <code>
  21. //Create a WebGLRenderer and turn on shadows in the renderer
  22. const renderer = new THREE.WebGLRenderer();
  23. renderer.shadowMap.enabled = true;
  24. renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
  25. //Create a DirectionalLight and turn on shadows for the light
  26. const light = new THREE.DirectionalLight( 0xffffff, 1 );
  27. light.position.set( 0, 1, 0 ); //default; light shining from top
  28. light.castShadow = true; // default false
  29. scene.add( light );
  30. //Set up shadow properties for the light
  31. light.shadow.mapSize.width = 512; // default
  32. light.shadow.mapSize.height = 512; // default
  33. light.shadow.camera.near = 0.5; // default
  34. light.shadow.camera.far = 500; // default
  35. //Create a sphere that cast shadows (but does not receive them)
  36. const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
  37. const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
  38. const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
  39. sphere.castShadow = true; //default is false
  40. sphere.receiveShadow = false; //default
  41. scene.add( sphere );
  42. //Create a plane that receives shadows (but does not cast them)
  43. const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
  44. const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
  45. const plane = new THREE.Mesh( planeGeometry, planeMaterial );
  46. plane.receiveShadow = true;
  47. scene.add( plane );
  48. //Create a helper for the shadow camera (optional)
  49. const helper = new THREE.CameraHelper( light.shadow.camera );
  50. scene.add( helper );
  51. </code>
  52. <h2>المنشئ (Constructor)</h2>
  53. <h3>[name]( )</h3>
  54. <p>
  55. ينشئ [name] جديدًا. لا يُقصد من هذا الاتصال مباشرة - هو
  56. يتم استدعاؤه داخليًا من قبل [page:DirectionalLight].
  57. </p>
  58. <h2>الخصائص (Properties)</h2>
  59. <p>
  60. انظر الفئة الأساسية [page:LightShadow LightShadow] للخصائص المشتركة.
  61. </p>
  62. <h3>[property:Camera camera]</h3>
  63. <p>
  64. رؤية الضوء للعالم. يتم استخدام هذا لإنشاء خريطة عمق لـ
  65. المشهد ؛ الأشياء خلف الأشياء الأخرى من منظور الضوء ستكون
  66. في الظل. <br /><br />
  67. الافتراضي هو [page:OrthographicCamera] مع
  68. [page:OrthographicCamera.left left] و [page:OrthographicCamera.bottom bottom]
  69. مضبوط على -5 ، [page:OrthographicCamera.right right] و
  70. [page:OrthographicCamera.top top] مضبوط على 5 ،
  71. [page:OrthographicCamera.near near] كليبينغ بلان عند 0.5 و
  72. [page:OrthographicCamera.far far] كليبينغ بلان عند 500.
  73. </p>
  74. <h3>[property:Boolean isDirectionalLightShadow]</h3>
  75. <p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى هو من نوع [name].</p>
  76. <h2>الطرق (Methods)</h2>
  77. <p>انظر الفئة الأساسية [page:LightShadow LightShadow] للطرق المشتركة.</p>
  78. <h2>المصدر (Source)</h2>
  79. <p>
  80. [link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
  81. </p>
  82. </body>
  83. </html>