samien
/
three.js
дзеркало https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>AnaglyphEffect - 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>
	<h1 translate="no">AnaglyphEffect</h1>
		<section>
			<header>
				<div class="class-description"><p>A class 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>
<p>Note that this class can only be used with <a href="WebGLRenderer.html">WebGLRenderer</a>.
When using <a href="WebGPURenderer.html">WebGPURenderer</a>, use <a href="AnaglyphPassNode.html">AnaglyphPassNode</a>.</p></div>
			</header>
			<article>
				<h2 class="subsection-title">Import</h2>
				<p><span translate="no">AnaglyphEffect</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 { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';</code></pre>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="AnaglyphEffect" translate="no">new <a href="#AnaglyphEffect">AnaglyphEffect</a><span class="signature">( renderer : <span class="param-type"><a href="WebGLRenderer.html">WebGLRenderer</a></span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new anaglyph effect.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong translate="no">renderer</strong>
									</td>
									<td class="description last">
										<p>The renderer.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong translate="no">width</strong>
									</td>
									<td class="description last">
										<p>The width of the effect in physical pixels.</p>
										<p>Default is <code>512</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong translate="no">height</strong>
									</td>
									<td class="description last">
										<p>The height of the effect in physical pixels.</p>
										<p>Default is <code>512</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<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="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="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Frees internal resources. This method should be called
when the effect is no longer required.</p>
						</div>
					</div>
					<h3 class="name name-method" id="render" translate="no">.<a href="#render">render</a><span class="signature">( scene : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>When using this effect, this method should be called instead of the
default <a href="WebGLRenderer.html#render">WebGLRenderer#render</a>.</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.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setSize" translate="no">.<a href="#setSize">setSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Resizes the effect.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong translate="no">width</strong>
									</td>
									<td class="description last">
										<p>The width of the effect in logical pixels.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong translate="no">height</strong>
									</td>
									<td class="description last">
										<p>The height of the effect in logical pixels.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/AnaglyphEffect.js" translate="no" target="_blank" rel="noopener">examples/jsm/effects/AnaglyphEffect.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>