samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>DirectionalLight - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
		<p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Object3D.html">Object3D</a> → <a href="Light.html">Light</a> → </p>
	<h1 translate="no">DirectionalLight</h1>
		<section>
			<header>
				<div class="class-description"><p>A light that gets emitted in a specific direction. This light will behave
as though it is infinitely far away and the rays produced from it are all
parallel. The common use case for this is to simulate daylight; the sun is
far enough away that its position can be considered to be infinite, and
all light rays coming from it are parallel.</p>
<p>A common point of confusion for directional lights is that setting the
rotation has no effect. This is because three.js's DirectionalLight is the
equivalent to what is often called a 'Target Direct Light' in other
applications.</p>
<p>This means that its direction is calculated as pointing from the light's
<a href="Object3D.html#position">Object3D#position</a> to the <a href="DirectionalLight.html#target">DirectionalLight#target</a> position
(as opposed to a 'Free Direct Light' that just has a rotation
component).</p>
<p>This light can cast shadows - see the <a href="DirectionalLightShadow.html">DirectionalLightShadow</a> for details.</p></div>
				<h2>Code Example</h2>
				<div translate="no"><pre><code class="language-js">// White directional light at half intensity shining from the top.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
</code></pre></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="DirectionalLight" translate="no">new <a href="#DirectionalLight">DirectionalLight</a><span class="signature">( color : <span class="param-type">number | Color | string</span>, intensity : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new directional light.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name"><code>color</code></td>
									<td class="description last"><p>The light's color.<br/>Default is <code>0xffffff</code>.</p></td>
								</tr>
								<tr>
									<td class="name"><code>intensity</code></td>
									<td class="description last"><p>The light's strength/intensity.<br/>Default is <code>1</code>.</p></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<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>
					<div class="description">
						<p>This flag can be used for type testing.<br/>Default is <code>true</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="shadow" translate="no">.<a href="#shadow">shadow</a><span class="type-signature"> : <a href="DirectionalLightShadow.html">DirectionalLightShadow</a></span> </h3>
					<div class="description">
						<p>This property holds the light's shadow configuration.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="target" translate="no">.<a href="#target">target</a><span class="type-signature"> : <a href="Object3D.html">Object3D</a></span> </h3>
					<div class="description">
						<p>The directional light points from its position to the
target's position.</p>
<p>For the target's position to be changed to anything other
than the default, it must be added to the scene.</p>
<p>It is also possible to set the target to be another 3D object
in the scene. The light will now track the target object.</p>
					</div>
				</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/lights/DirectionalLight.js" target="_blank" rel="noopener" translate="no">src/lights/DirectionalLight.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>