DirectionalLight.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>DirectionalLight - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Object3D.html">Object3D</a> → <a href="Light.html">Light</a> → </p>
  13. <h1 translate="no">DirectionalLight</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>A light that gets emitted in a specific direction. This light will behave
  17. as though it is infinitely far away and the rays produced from it are all
  18. parallel. The common use case for this is to simulate daylight; the sun is
  19. far enough away that its position can be considered to be infinite, and
  20. all light rays coming from it are parallel.</p>
  21. <p>A common point of confusion for directional lights is that setting the
  22. rotation has no effect. This is because three.js's DirectionalLight is the
  23. equivalent to what is often called a 'Target Direct Light' in other
  24. applications.</p>
  25. <p>This means that its direction is calculated as pointing from the light's
  26. <a href="Object3D.html#position">Object3D#position</a> to the <a href="DirectionalLight.html#target">DirectionalLight#target</a> position
  27. (as opposed to a 'Free Direct Light' that just has a rotation
  28. component).</p>
  29. <p>This light can cast shadows - see the <a href="DirectionalLightShadow.html">DirectionalLightShadow</a> for details.</p></div>
  30. <h2>Code Example</h2>
  31. <div translate="no"><pre><code class="language-js">// White directional light at half intensity shining from the top.
  32. const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  33. scene.add( directionalLight );
  34. </code></pre></div>
  35. </header>
  36. <article>
  37. <div class="container-overview">
  38. <h2>Constructor</h2>
  39. <h3 class="name name-method" id="DirectionalLight" translate="no">new <a href="#DirectionalLight">DirectionalLight</a><span class="signature">( color : <span class="param-type">number | <a href="Color.html">Color</a> | string</span>, intensity : <span class="param-type">number</span> )</span> </h3>
  40. <div class="method">
  41. <div class="description">
  42. <p>Constructs a new directional light.</p>
  43. </div>
  44. <table class="params">
  45. <tbody>
  46. <tr>
  47. <td class="name">
  48. <strong>color</strong>
  49. </td>
  50. <td class="description last">
  51. <p>The light's color.</p>
  52. <p>Default is <code>0xffffff</code>.</p>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td class="name">
  57. <strong>intensity</strong>
  58. </td>
  59. <td class="description last">
  60. <p>The light's strength/intensity.</p>
  61. <p>Default is <code>1</code>.</p>
  62. </td>
  63. </tr>
  64. </tbody>
  65. </table>
  66. </div>
  67. </div>
  68. <h2 class="subsection-title">Properties</h2>
  69. <div class="member">
  70. <h3 class="name" id="isDirectionalLight" translate="no">.<a href="#isDirectionalLight">isDirectionalLight</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  71. <div class="description">
  72. <p>This flag can be used for type testing.</p>
  73. <p>Default is <code>true</code>.</p>
  74. </div>
  75. </div>
  76. <div class="member">
  77. <h3 class="name" id="shadow" translate="no">.<a href="#shadow">shadow</a><span class="type-signature"> : <a href="DirectionalLightShadow.html">DirectionalLightShadow</a></span> </h3>
  78. <div class="description">
  79. <p>This property holds the light's shadow configuration.</p>
  80. </div>
  81. </div>
  82. <div class="member">
  83. <h3 class="name" id="target" translate="no">.<a href="#target">target</a><span class="type-signature"> : <a href="Object3D.html">Object3D</a></span> </h3>
  84. <div class="description">
  85. <p>The directional light points from its position to the
  86. target's position.</p>
  87. <p>For the target's position to be changed to anything other
  88. than the default, it must be added to the scene.</p>
  89. <p>It is also possible to set the target to be another 3D object
  90. in the scene. The light will now track the target object.</p>
  91. </div>
  92. </div>
  93. <h2 class="subsection-title">Source</h2>
  94. <p>
  95. <a href="https://github.com/mrdoob/three.js/blob/master/src/lights/DirectionalLight.js" translate="no" target="_blank" rel="noopener">src/lights/DirectionalLight.js</a>
  96. </p>
  97. </article>
  98. </section>
  99. <script src="../scripts/linenumber.js"></script>
  100. <script src="../scripts/page.js"></script>
  101. </body>
  102. </html>
粤ICP备19079148号