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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>AnaglyphPassNode - 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="Node.html">Node</a> → <a href="TempNode.html">TempNode</a> → <a href="PassNode.html">PassNode</a> → <a href="StereoCompositePassNode.html">StereoCompositePassNode</a> → </p>
	<h1 translate="no">AnaglyphPassNode</h1>
		<section>
			<header>
				<div class="class-description"><p>A render pass node that creates an anaglyph effect using physically-correct
off-axis stereo projection.</p>
<p>This implementation uses CameraUtils.frameCorners() to align stereo
camera frustums to a virtual screen plane, providing accurate depth
perception with zero parallax at the plane distance.</p></div>
			</header>
			<article>
				<h2 class="subsection-title">Import</h2>
				<p><span translate="no">AnaglyphPassNode</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
				<pre><code class="language-js">import { anaglyphPass, AnaglyphAlgorithm, AnaglyphColorMode } from 'three/addons/tsl/display/AnaglyphPassNode.js';</code></pre>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="AnaglyphPassNode" translate="no">new <a href="#AnaglyphPassNode">AnaglyphPassNode</a><span class="signature">( scene : <span class="param-type"><a href="Scene.html">Scene</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new anaglyph pass node.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong translate="no">scene</strong>
									</td>
									<td class="description last">
										<p>The scene to render.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong translate="no">camera</strong>
									</td>
									<td class="description last">
										<p>The camera to render the scene with.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="algorithm" translate="no">.<a href="#algorithm">algorithm</a><span class="type-signature"> : string</span> </h3>
					<div class="description">
						<p>Gets the current anaglyph algorithm.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="algorithm" translate="no">.<a href="#algorithm">algorithm</a><span class="type-signature"> : string</span> </h3>
					<div class="description">
						<p>Sets the anaglyph algorithm.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="colorMode" translate="no">.<a href="#colorMode">colorMode</a><span class="type-signature"> : string</span> </h3>
					<div class="description">
						<p>Gets the current color mode.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="colorMode" translate="no">.<a href="#colorMode">colorMode</a><span class="type-signature"> : string</span> </h3>
					<div class="description">
						<p>Sets the color mode.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="eyeSep" translate="no">.<a href="#eyeSep">eyeSep</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The interpupillary distance (eye separation) in world units.
Typical human IPD is 0.064 meters (64mm).</p>
						<p>Default is <code>0.064</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="isAnaglyphPassNode" translate="no">.<a href="#isAnaglyphPassNode">isAnaglyphPassNode</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="planeDistance" translate="no">.<a href="#planeDistance">planeDistance</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The distance in world units from the viewer to the virtual
screen plane where zero parallax (screen depth) occurs.
Objects at this distance appear at the screen surface.
Objects closer appear in front of the screen (negative parallax).
Objects further appear behind the screen (positive parallax).</p>
<p>The screen dimensions are derived from the camera's FOV and aspect ratio
at this distance, ensuring the stereo view matches the camera's field of view.</p>
						<p>Default is <code>0.5</code>.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="setup" translate="no">.<a href="#setup">setup</a><span class="signature">( builder : <span class="param-type"><a href="NodeBuilder.html">NodeBuilder</a></span> )</span><span class="type-signature"> : <a href="PassTextureNode.html">PassTextureNode</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>This method is used to setup the effect's TSL code.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong translate="no">builder</strong>
									</td>
									<td class="description last">
										<p>The current node builder.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="StereoCompositePassNode.html#setup">StereoCompositePassNode#setup</a></dt>
						</dl>
					</div>
					<h3 class="name name-method" id="updateStereoCamera" translate="no">.<a href="#updateStereoCamera">updateStereoCamera</a><span class="signature">( coordinateSystem : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Updates the internal stereo camera using frameCorners for
physically-correct off-axis projection.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong translate="no">coordinateSystem</strong>
									</td>
									<td class="description last">
										<p>The current coordinate system.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="StereoCompositePassNode.html#updateStereoCamera">StereoCompositePassNode#updateStereoCamera</a></dt>
						</dl>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/tsl/display/AnaglyphPassNode.js" translate="no" target="_blank" rel="noopener">examples/jsm/tsl/display/AnaglyphPassNode.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>