DirectionalLight.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>
  10. [page:Object3D] &rarr; [page:Light] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. A light that gets emitted in a specific direction. This light will behave
  14. as though it is infinitely far away and the rays produced from it are all
  15. parallel. The common use case for this is to simulate daylight; the sun is
  16. far enough away that its position can be considered to be infinite, and
  17. all light rays coming from it are parallel.<br /><br />
  18. This light can cast shadows - see the [page:DirectionalLightShadow] page
  19. for details.
  20. </p>
  21. <h2>A Note about Position, Target and rotation</h2>
  22. <p>
  23. A common point of confusion for directional lights is that setting the
  24. rotation has no effect. This is because three.js's DirectionalLight is the
  25. equivalent to what is often called a 'Target Direct Light' in other
  26. applications.<br /><br />
  27. This means that its direction is calculated as pointing from the light's
  28. [page:Object3D.position position] to the [page:.target target]'s position
  29. (as opposed to a 'Free Direct Light' that just has a rotation
  30. component).<br /><br />
  31. The reason for this is to allow the light to cast shadows - the
  32. [page:.shadow shadow] camera needs a position to calculate shadows
  33. from.<br /><br />
  34. See the [page:.target target] property below for details on updating the
  35. target.
  36. </p>
  37. <h2>Code Example</h2>
  38. <code>
  39. // White directional light at half intensity shining from the top.
  40. const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  41. scene.add( directionalLight );
  42. </code>
  43. <h2>Examples</h2>
  44. <p>
  45. [example:misc_controls_fly controls / fly ]<br />
  46. [example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
  47. [example:webgl_effects_stereo effects / stereo ]<br />
  48. [example:webgl_geometry_extrude_splines geometry / extrude / splines ]<br />
  49. [example:webgl_materials_bumpmap materials / bumpmap ]
  50. </p>
  51. <h2>Constructor</h2>
  52. <h3>[name]( [param:Integer color], [param:Float intensity] )</h3>
  53. <p>
  54. [page:Integer color] - (optional) hexadecimal color of the light. Default
  55. is 0xffffff (white).<br />
  56. [page:Float intensity] - (optional) numeric value of the light's
  57. strength/intensity. Default is `1`.<br /><br />
  58. Creates a new [name].
  59. </p>
  60. <h2>Properties</h2>
  61. <p>See the base [page:Light Light] class for common properties.</p>
  62. <h3>[property:Boolean castShadow]</h3>
  63. <p>
  64. If set to `true` light will cast dynamic shadows. *Warning*: This is
  65. expensive and requires tweaking to get shadows looking right. See the
  66. [page:DirectionalLightShadow] for details. The default is `false`.
  67. </p>
  68. <h3>[property:Boolean isDirectionalLight]</h3>
  69. <p>Read-only flag to check if a given object is of type [name].</p>
  70. <h3>[property:Vector3 position]</h3>
  71. <p>
  72. This is set equal to [page:Object3D.DEFAULT_UP] (0, 1, 0), so that the
  73. light shines from the top down.
  74. </p>
  75. <h3>[property:DirectionalLightShadow shadow]</h3>
  76. <p>
  77. A [page:DirectionalLightShadow] used to calculate shadows for this light.
  78. </p>
  79. <h3>[property:Object3D target]</h3>
  80. <p>
  81. The DirectionalLight points from its [page:.position position] to
  82. target.position. The default position of the target is `(0, 0, 0)`.<br />
  83. *Note*: For the target's position to be changed to anything other than the
  84. default, it must be added to the [page:Scene scene] using
  85. </p>
  86. <code>
  87. scene.add( light.target );
  88. </code>
  89. <p>
  90. This is so that the target's [page:Object3D.matrixWorld matrixWorld] gets
  91. automatically updated each frame.<br /><br />
  92. It is also possible to set the target to be another object in the scene
  93. (anything with a [page:Object3D.position position] property), like so:
  94. </p>
  95. <code>
  96. const targetObject = new THREE.Object3D();
  97. scene.add(targetObject);
  98. light.target = targetObject;
  99. </code>
  100. <p>The directionalLight will now track the target object.</p>
  101. <h2>Methods</h2>
  102. <p>See the base [page:Light Light] class for common methods.</p>
  103. <h3>[method:undefined dispose]()</h3>
  104. <p>
  105. Frees the GPU-related resources allocated by this instance. Call this
  106. method whenever this instance is no longer used in your app.
  107. </p>
  108. <h3>[method:this copy]( [param:DirectionalLight source] )</h3>
  109. <p>
  110. Copies value of all the properties from the [page:DirectionalLight source]
  111. to this DirectionalLight.
  112. </p>
  113. <h2>Source</h2>
  114. <p>
  115. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  116. </p>
  117. </body>
  118. </html>