samien
/
three.js
oglindă de https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>OrthographicCamera - 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="Camera.html">Camera</a> → </p>
	<h1 translate="no">OrthographicCamera</h1>
		<section>
			<header>
				<div class="class-description"><p>Camera that uses <a href="https://en.wikipedia.org/wiki/Orthographic_projection" target="_blank" rel="noopener">orthographic projection</a>.</p>
<p>In this projection mode, an object's size in the rendered image stays
constant regardless of its distance from the camera. This can be useful
for rendering 2D scenes and UI elements, amongst other things.</p></div>
				<h2>Code Example</h2>
				<div translate="no"><pre><code class="language-js">const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
</code></pre></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="OrthographicCamera" translate="no">new <a href="#OrthographicCamera">OrthographicCamera</a><span class="signature">( left : <span class="param-type">number</span>, right : <span class="param-type">number</span>, top : <span class="param-type">number</span>, bottom : <span class="param-type">number</span>, near : <span class="param-type">number</span>, far : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new orthographic camera.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>left</strong>
									</td>
									<td class="description last">
										<p>The left plane of the camera's frustum.</p>
										<p>Default is <code>-1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>right</strong>
									</td>
									<td class="description last">
										<p>The right plane of the camera's frustum.</p>
										<p>Default is <code>1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>top</strong>
									</td>
									<td class="description last">
										<p>The top plane of the camera's frustum.</p>
										<p>Default is <code>1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>bottom</strong>
									</td>
									<td class="description last">
										<p>The bottom plane of the camera's frustum.</p>
										<p>Default is <code>-1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>near</strong>
									</td>
									<td class="description last">
										<p>The camera's near plane.</p>
										<p>Default is <code>0.1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>far</strong>
									</td>
									<td class="description last">
										<p>The camera's far plane.</p>
										<p>Default is <code>2000</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="bottom" translate="no">.<a href="#bottom">bottom</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The bottom plane of the camera's frustum.</p>
						<p>Default is <code>-1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="far" translate="no">.<a href="#far">far</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The camera's far plane. Must be greater than the
current value of <a href="OrthographicCamera.html#near">OrthographicCamera#near</a>.</p>
						<p>Default is <code>2000</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="isOrthographicCamera" translate="no">.<a href="#isOrthographicCamera">isOrthographicCamera</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.</p>
						<p>Default is <code>true</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="left" translate="no">.<a href="#left">left</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The left plane of the camera's frustum.</p>
						<p>Default is <code>-1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="near" translate="no">.<a href="#near">near</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The camera's near plane. The valid range is greater than <code>0</code>
and less than the current value of <a href="OrthographicCamera.html#far">OrthographicCamera#far</a>.</p>
<p>Note that, unlike for the <a href="PerspectiveCamera.html">PerspectiveCamera</a>, <code>0</code> is a
valid value for an orthographic camera's near plane.</p>
						<p>Default is <code>0.1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="right" translate="no">.<a href="#right">right</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The right plane of the camera's frustum.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="top" translate="no">.<a href="#top">top</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The top plane of the camera's frustum.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="view" translate="no">.<a href="#view">view</a><span class="type-signature"> : Object</span> </h3>
					<div class="description">
						<p>Represents the frustum window specification. This property should not be edited
directly but via <a href="PerspectiveCamera.html#setViewOffset">PerspectiveCamera#setViewOffset</a> and <a href="PerspectiveCamera.html#clearViewOffset">PerspectiveCamera#clearViewOffset</a>.</p>
						<p>Default is <code>null</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="zoom" translate="no">.<a href="#zoom">zoom</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The zoom factor of the camera.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="clearViewOffset" translate="no">.<a href="#clearViewOffset">clearViewOffset</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Removes the view offset from the projection matrix.</p>
						</div>
					</div>
					<h3 class="name name-method" id="setViewOffset" translate="no">.<a href="#setViewOffset">setViewOffset</a><span class="signature">( fullWidth : <span class="param-type">number</span>, fullHeight : <span class="param-type">number</span>, x : <span class="param-type">number</span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets an offset in a larger frustum. This is useful for multi-window or
multi-monitor/multi-machine setups.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>fullWidth</strong>
									</td>
									<td class="description last">
										<p>The full width of multiview setup.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>fullHeight</strong>
									</td>
									<td class="description last">
										<p>The full height of multiview setup.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The horizontal offset of the subcamera.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The vertical offset of the subcamera.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width of subcamera.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height of subcamera.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-see">See:</dt>
							<dd class="tag-see">
								<ul>
									<li><a href="PerspectiveCamera.html#setViewOffset">PerspectiveCamera#setViewOffset</a></li>
								</ul>
							</dd>
						</dl>
					</div>
					<h3 class="name name-method" id="updateProjectionMatrix" translate="no">.<a href="#updateProjectionMatrix">updateProjectionMatrix</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Updates the camera's projection matrix. Must be called after any change of
camera properties.</p>
						</div>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/cameras/OrthographicCamera.js" translate="no" target="_blank" rel="noopener">src/cameras/OrthographicCamera.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>