Главная Обзор Помощь
Регистрация Вход
samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git
1
0
Ответвить 0
Файлы Задачи 0 Вики
Дерево: 5d233d98e5
Ветки Метки
three.js
/
docs
/
pages
/
CanvasTarget.html

CanvasTarget.html 15 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<title>CanvasTarget - Three.js Docs</title>
    6. 

  6. 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    7. 

  7. 	<script src="../scripts/highlight.min.js"></script>
    8. 

  8. 	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
    9. 

  9. 	<link type="text/css" rel="stylesheet" href="../styles/page.css">
    10. 

  10. </head>
    11. 

  11. <body>
    12. 

  12. 		<p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → </p>
    13. 

  13. 	<h1 translate="no">CanvasTarget</h1>
    14. 

  14. 		<section>
    15. 

  15. 			<header>
    16. 

  16. 				<div class="class-description"><p>CanvasTarget is a class that represents the final output destination of the renderer.</p></div>
    17. 

  17. 			</header>
    18. 

  18. 			<article>
    19. 

  19. 				<div class="container-overview">
    20. 

  20. 					<h2>Constructor</h2>
    21. 

  21. 					<h3 class="name name-method" id="CanvasTarget" translate="no">new <a href="#CanvasTarget">CanvasTarget</a><span class="signature">( domElement : <span class="param-type">HTMLCanvasElement | OffscreenCanvas</span> )</span> </h3>
    22. 

  22. 					<div class="method">
    23. 

  23. 						<div class="description">
    24. 

  24. 							<p>Constructs a new CanvasTarget.</p>
    25. 

  25. 						</div>
    26. 

  26. 						<table class="params">
    27. 

  27. 							<tbody>
    28. 

  28. 								<tr>
    29. 

  29. 									<td class="name">
    30. 

  30. 										<strong>domElement</strong>
    31. 

  31. 									</td>
    32. 

  32. 									<td class="description last">
    33. 

  33. 										<p>The canvas element to render to.</p>
    34. 

  34. 									</td>
    35. 

  35. 								</tr>
    36. 

  36. 							</tbody>
    37. 

  37. 						</table>
    38. 

  38. 					</div>
    39. 

  39. 				</div>
    40. 

  40. 				<h2 class="subsection-title">Properties</h2>
    41. 

  41. 				<div class="member">
    42. 

  42. 					<h3 class="name" id="colorTexture" translate="no">.<a href="#colorTexture">colorTexture</a><span class="type-signature"> : <a href="FramebufferTexture.html">FramebufferTexture</a></span> </h3>
    43. 

  43. 					<div class="description">
    44. 

  44. 						<p>The color texture of the default framebuffer.</p>
    45. 

  45. 					</div>
    46. 

  46. 				</div>
    47. 

  47. 				<div class="member">
    48. 

  48. 					<h3 class="name" id="depthTexture" translate="no">.<a href="#depthTexture">depthTexture</a><span class="type-signature"> : <a href="DepthTexture.html">DepthTexture</a></span> </h3>
    49. 

  49. 					<div class="description">
    50. 

  50. 						<p>The depth texture of the default framebuffer.</p>
    51. 

  51. 					</div>
    52. 

  52. 				</div>
    53. 

  53. 				<div class="member">
    54. 

  54. 					<h3 class="name" id="domElement" translate="no">.<a href="#domElement">domElement</a><span class="type-signature"> : HTMLCanvasElement | OffscreenCanvas</span> </h3>
    55. 

  55. 					<div class="description">
    56. 

  56. 						<p>A reference to the canvas element the renderer is drawing to.
    57. 

  57. This value of this property will automatically be created by
    58. 

  58. the renderer.</p>
    59. 

  59. 					</div>
    60. 

  60. 				</div>
    61. 

  61. 				<h2 class="subsection-title">Methods</h2>
    62. 

  62. 					<h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
    63. 

  63. 					<div class="method">
    64. 

  64. 						<div class="description">
    65. 

  65. 							<p>Frees the GPU-related resources allocated by this instance. Call this
    66. 

  66. method whenever this instance is no longer used in your app.</p>
    67. 

  67. 						</div>
    68. 

  68. 						<h5>Fires:</h5>
    69. 

  69. 						<ul>
    70. 

  70. 							<li>RenderTarget#event:dispose</li>
    71. 

  71. 						</ul>
    72. 

  72. 					</div>
    73. 

  73. 					<h3 class="name name-method" id="getDrawingBufferSize" translate="no">.<a href="#getDrawingBufferSize">getDrawingBufferSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
    74. 

  74. 					<div class="method">
    75. 

  75. 						<div class="description">
    76. 

  76. 							<p>Returns the drawing buffer size in physical pixels. This method honors the pixel ratio.</p>
    77. 

  77. 						</div>
    78. 

  78. 						<table class="params">
    79. 

  79. 							<tbody>
    80. 

  80. 								<tr>
    81. 

  81. 									<td class="name">
    82. 

  82. 										<strong>target</strong>
    83. 

  83. 									</td>
    84. 

  84. 									<td class="description last">
    85. 

  85. 										<p>The method writes the result in this target object.</p>
    86. 

  86. 									</td>
    87. 

  87. 								</tr>
    88. 

  88. 							</tbody>
    89. 

  89. 						</table>
    90. 

  90. 						<dl class="details">
    91. 

  91. 							<dt class="tag-returns"><strong>Returns:</strong> The drawing buffer size.</dt>
    92. 

  92. 						</dl>
    93. 

  93. 					</div>
    94. 

  94. 					<h3 class="name name-method" id="getPixelRatio" translate="no">.<a href="#getPixelRatio">getPixelRatio</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
    95. 

  95. 					<div class="method">
    96. 

  96. 						<div class="description">
    97. 

  97. 							<p>Returns the pixel ratio.</p>
    98. 

  98. 						</div>
    99. 

  99. 						<dl class="details">
    100. 

  100. 							<dt class="tag-returns"><strong>Returns:</strong> The pixel ratio.</dt>
    101. 

  101. 						</dl>
    102. 

  102. 					</div>
    103. 

  103. 					<h3 class="name name-method" id="getScissor" translate="no">.<a href="#getScissor">getScissor</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
    104. 

  104. 					<div class="method">
    105. 

  105. 						<div class="description">
    106. 

  106. 							<p>Returns the scissor rectangle.</p>
    107. 

  107. 						</div>
    108. 

  108. 						<table class="params">
    109. 

  109. 							<tbody>
    110. 

  110. 								<tr>
    111. 

  111. 									<td class="name">
    112. 

  112. 										<strong>target</strong>
    113. 

  113. 									</td>
    114. 

  114. 									<td class="description last">
    115. 

  115. 										<p>The method writes the result in this target object.</p>
    116. 

  116. 									</td>
    117. 

  117. 								</tr>
    118. 

  118. 							</tbody>
    119. 

  119. 						</table>
    120. 

  120. 						<dl class="details">
    121. 

  121. 							<dt class="tag-returns"><strong>Returns:</strong> The scissor rectangle.</dt>
    122. 

  122. 						</dl>
    123. 

  123. 					</div>
    124. 

  124. 					<h3 class="name name-method" id="getScissorTest" translate="no">.<a href="#getScissorTest">getScissorTest</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
    125. 

  125. 					<div class="method">
    126. 

  126. 						<div class="description">
    127. 

  127. 							<p>Returns the scissor test value.</p>
    128. 

  128. 						</div>
    129. 

  129. 						<dl class="details">
    130. 

  130. 							<dt class="tag-returns"><strong>Returns:</strong> Whether the scissor test should be enabled or not.</dt>
    131. 

  131. 						</dl>
    132. 

  132. 					</div>
    133. 

  133. 					<h3 class="name name-method" id="getSize" translate="no">.<a href="#getSize">getSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
    134. 

  134. 					<div class="method">
    135. 

  135. 						<div class="description">
    136. 

  136. 							<p>Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.</p>
    137. 

  137. 						</div>
    138. 

  138. 						<table class="params">
    139. 

  139. 							<tbody>
    140. 

  140. 								<tr>
    141. 

  141. 									<td class="name">
    142. 

  142. 										<strong>target</strong>
    143. 

  143. 									</td>
    144. 

  144. 									<td class="description last">
    145. 

  145. 										<p>The method writes the result in this target object.</p>
    146. 

  146. 									</td>
    147. 

  147. 								</tr>
    148. 

  148. 							</tbody>
    149. 

  149. 						</table>
    150. 

  150. 						<dl class="details">
    151. 

  151. 							<dt class="tag-returns"><strong>Returns:</strong> The renderer's size in logical pixels.</dt>
    152. 

  152. 						</dl>
    153. 

  153. 					</div>
    154. 

  154. 					<h3 class="name name-method" id="getViewport" translate="no">.<a href="#getViewport">getViewport</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
    155. 

  155. 					<div class="method">
    156. 

  156. 						<div class="description">
    157. 

  157. 							<p>Returns the viewport definition.</p>
    158. 

  158. 						</div>
    159. 

  159. 						<table class="params">
    160. 

  160. 							<tbody>
    161. 

  161. 								<tr>
    162. 

  162. 									<td class="name">
    163. 

  163. 										<strong>target</strong>
    164. 

  164. 									</td>
    165. 

  165. 									<td class="description last">
    166. 

  166. 										<p>The method writes the result in this target object.</p>
    167. 

  167. 									</td>
    168. 

  168. 								</tr>
    169. 

  169. 							</tbody>
    170. 

  170. 						</table>
    171. 

  171. 						<dl class="details">
    172. 

  172. 							<dt class="tag-returns"><strong>Returns:</strong> The viewport definition.</dt>
    173. 

  173. 						</dl>
    174. 

  174. 					</div>
    175. 

  175. 					<h3 class="name name-method" id="setDrawingBufferSize" translate="no">.<a href="#setDrawingBufferSize">setDrawingBufferSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, pixelRatio : <span class="param-type">number</span> )</span> </h3>
    176. 

  176. 					<div class="method">
    177. 

  177. 						<div class="description">
    178. 

  178. 							<p>This method allows to define the drawing buffer size by specifying
    179. 

  179. width, height and pixel ratio all at once. The size of the drawing
    180. 

  180. buffer is computed with this formula:</p>
    181. 

  181. <pre><code class="language-js">size.x = width * pixelRatio;
    182. 

  182. size.y = height * pixelRatio;
    183. 

  183. </code></pre>
    184. 

  184. 						</div>
    185. 

  185. 						<table class="params">
    186. 

  186. 							<tbody>
    187. 

  187. 								<tr>
    188. 

  188. 									<td class="name">
    189. 

  189. 										<strong>width</strong>
    190. 

  190. 									</td>
    191. 

  191. 									<td class="description last">
    192. 

  192. 										<p>The width in logical pixels.</p>
    193. 

  193. 									</td>
    194. 

  194. 								</tr>
    195. 

  195. 								<tr>
    196. 

  196. 									<td class="name">
    197. 

  197. 										<strong>height</strong>
    198. 

  198. 									</td>
    199. 

  199. 									<td class="description last">
    200. 

  200. 										<p>The height in logical pixels.</p>
    201. 

  201. 									</td>
    202. 

  202. 								</tr>
    203. 

  203. 								<tr>
    204. 

  204. 									<td class="name">
    205. 

  205. 										<strong>pixelRatio</strong>
    206. 

  206. 									</td>
    207. 

  207. 									<td class="description last">
    208. 

  208. 										<p>The pixel ratio.</p>
    209. 

  209. 									</td>
    210. 

  210. 								</tr>
    211. 

  211. 							</tbody>
    212. 

  212. 						</table>
    213. 

  213. 					</div>
    214. 

  214. 					<h3 class="name name-method" id="setPixelRatio" translate="no">.<a href="#setPixelRatio">setPixelRatio</a><span class="signature">( value : <span class="param-type">number</span> )</span> </h3>
    215. 

  215. 					<div class="method">
    216. 

  216. 						<div class="description">
    217. 

  217. 							<p>Sets the given pixel ratio and resizes the canvas if necessary.</p>
    218. 

  218. 						</div>
    219. 

  219. 						<table class="params">
    220. 

  220. 							<tbody>
    221. 

  221. 								<tr>
    222. 

  222. 									<td class="name">
    223. 

  223. 										<strong>value</strong>
    224. 

  224. 									</td>
    225. 

  225. 									<td class="description last">
    226. 

  226. 										<p>The pixel ratio.</p>
    227. 

  227. 										<p>Default is <code>1</code>.</p>
    228. 

  228. 									</td>
    229. 

  229. 								</tr>
    230. 

  230. 							</tbody>
    231. 

  231. 						</table>
    232. 

  232. 					</div>
    233. 

  233. 					<h3 class="name name-method" id="setScissor" translate="no">.<a href="#setScissor">setScissor</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
    234. 

  234. 					<div class="method">
    235. 

  235. 						<div class="description">
    236. 

  236. 							<p>Defines the scissor rectangle.</p>
    237. 

  237. 						</div>
    238. 

  238. 						<table class="params">
    239. 

  239. 							<tbody>
    240. 

  240. 								<tr>
    241. 

  241. 									<td class="name">
    242. 

  242. 										<strong>x</strong>
    243. 

  243. 									</td>
    244. 

  244. 									<td class="description last">
    245. 

  245. 										<p>The horizontal coordinate for the lower left corner of the box in logical pixel unit.
    246. 

  246. Instead of passing four arguments, the method also works with a single four-dimensional vector.</p>
    247. 

  247. 									</td>
    248. 

  248. 								</tr>
    249. 

  249. 								<tr>
    250. 

  250. 									<td class="name">
    251. 

  251. 										<strong>y</strong>
    252. 

  252. 									</td>
    253. 

  253. 									<td class="description last">
    254. 

  254. 										<p>The vertical coordinate for the lower left corner of the box in logical pixel unit.</p>
    255. 

  255. 									</td>
    256. 

  256. 								</tr>
    257. 

  257. 								<tr>
    258. 

  258. 									<td class="name">
    259. 

  259. 										<strong>width</strong>
    260. 

  260. 									</td>
    261. 

  261. 									<td class="description last">
    262. 

  262. 										<p>The width of the scissor box in logical pixel unit.</p>
    263. 

  263. 									</td>
    264. 

  264. 								</tr>
    265. 

  265. 								<tr>
    266. 

  266. 									<td class="name">
    267. 

  267. 										<strong>height</strong>
    268. 

  268. 									</td>
    269. 

  269. 									<td class="description last">
    270. 

  270. 										<p>The height of the scissor box in logical pixel unit.</p>
    271. 

  271. 									</td>
    272. 

  272. 								</tr>
    273. 

  273. 							</tbody>
    274. 

  274. 						</table>
    275. 

  275. 					</div>
    276. 

  276. 					<h3 class="name name-method" id="setScissorTest" translate="no">.<a href="#setScissorTest">setScissorTest</a><span class="signature">( boolean : <span class="param-type">boolean</span> )</span> </h3>
    277. 

  277. 					<div class="method">
    278. 

  278. 						<div class="description">
    279. 

  279. 							<p>Defines the scissor test.</p>
    280. 

  280. 						</div>
    281. 

  281. 						<table class="params">
    282. 

  282. 							<tbody>
    283. 

  283. 								<tr>
    284. 

  284. 									<td class="name">
    285. 

  285. 										<strong>boolean</strong>
    286. 

  286. 									</td>
    287. 

  287. 									<td class="description last">
    288. 

  288. 										<p>Whether the scissor test should be enabled or not.</p>
    289. 

  289. 									</td>
    290. 

  290. 								</tr>
    291. 

  291. 							</tbody>
    292. 

  292. 						</table>
    293. 

  293. 					</div>
    294. 

  294. 					<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>, updateStyle : <span class="param-type">boolean</span> )</span> </h3>
    295. 

  295. 					<div class="method">
    296. 

  296. 						<div class="description">
    297. 

  297. 							<p>Sets the size of the renderer.</p>
    298. 

  298. 						</div>
    299. 

  299. 						<table class="params">
    300. 

  300. 							<tbody>
    301. 

  301. 								<tr>
    302. 

  302. 									<td class="name">
    303. 

  303. 										<strong>width</strong>
    304. 

  304. 									</td>
    305. 

  305. 									<td class="description last">
    306. 

  306. 										<p>The width in logical pixels.</p>
    307. 

  307. 									</td>
    308. 

  308. 								</tr>
    309. 

  309. 								<tr>
    310. 

  310. 									<td class="name">
    311. 

  311. 										<strong>height</strong>
    312. 

  312. 									</td>
    313. 

  313. 									<td class="description last">
    314. 

  314. 										<p>The height in logical pixels.</p>
    315. 

  315. 									</td>
    316. 

  316. 								</tr>
    317. 

  317. 								<tr>
    318. 

  318. 									<td class="name">
    319. 

  319. 										<strong>updateStyle</strong>
    320. 

  320. 									</td>
    321. 

  321. 									<td class="description last">
    322. 

  322. 										<p>Whether to update the <code>style</code> attribute of the canvas or not.</p>
    323. 

  323. 										<p>Default is <code>true</code>.</p>
    324. 

  324. 									</td>
    325. 

  325. 								</tr>
    326. 

  326. 							</tbody>
    327. 

  327. 						</table>
    328. 

  328. 					</div>
    329. 

  329. 					<h3 class="name name-method" id="setViewport" translate="no">.<a href="#setViewport">setViewport</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, minDepth : <span class="param-type">number</span>, maxDepth : <span class="param-type">number</span> )</span> </h3>
    330. 

  330. 					<div class="method">
    331. 

  331. 						<div class="description">
    332. 

  332. 							<p>Defines the viewport.</p>
    333. 

  333. 						</div>
    334. 

  334. 						<table class="params">
    335. 

  335. 							<tbody>
    336. 

  336. 								<tr>
    337. 

  337. 									<td class="name">
    338. 

  338. 										<strong>x</strong>
    339. 

  339. 									</td>
    340. 

  340. 									<td class="description last">
    341. 

  341. 										<p>The horizontal coordinate for the lower left corner of the viewport origin in logical pixel unit.</p>
    342. 

  342. 									</td>
    343. 

  343. 								</tr>
    344. 

  344. 								<tr>
    345. 

  345. 									<td class="name">
    346. 

  346. 										<strong>y</strong>
    347. 

  347. 									</td>
    348. 

  348. 									<td class="description last">
    349. 

  349. 										<p>The vertical coordinate for the lower left corner of the viewport origin  in logical pixel unit.</p>
    350. 

  350. 									</td>
    351. 

  351. 								</tr>
    352. 

  352. 								<tr>
    353. 

  353. 									<td class="name">
    354. 

  354. 										<strong>width</strong>
    355. 

  355. 									</td>
    356. 

  356. 									<td class="description last">
    357. 

  357. 										<p>The width of the viewport in logical pixel unit.</p>
    358. 

  358. 									</td>
    359. 

  359. 								</tr>
    360. 

  360. 								<tr>
    361. 

  361. 									<td class="name">
    362. 

  362. 										<strong>height</strong>
    363. 

  363. 									</td>
    364. 

  364. 									<td class="description last">
    365. 

  365. 										<p>The height of the viewport in logical pixel unit.</p>
    366. 

  366. 									</td>
    367. 

  367. 								</tr>
    368. 

  368. 								<tr>
    369. 

  369. 									<td class="name">
    370. 

  370. 										<strong>minDepth</strong>
    371. 

  371. 									</td>
    372. 

  372. 									<td class="description last">
    373. 

  373. 										<p>The minimum depth value of the viewport. WebGPU only.</p>
    374. 

  374. 										<p>Default is <code>0</code>.</p>
    375. 

  375. 									</td>
    376. 

  376. 								</tr>
    377. 

  377. 								<tr>
    378. 

  378. 									<td class="name">
    379. 

  379. 										<strong>maxDepth</strong>
    380. 

  380. 									</td>
    381. 

  381. 									<td class="description last">
    382. 

  382. 										<p>The maximum depth value of the viewport. WebGPU only.</p>
    383. 

  383. 										<p>Default is <code>1</code>.</p>
    384. 

  384. 									</td>
    385. 

  385. 								</tr>
    386. 

  386. 							</tbody>
    387. 

  387. 						</table>
    388. 

  388. 					</div>
    389. 

  389. 				<h2 class="subsection-title">Source</h2>
    390. 

  390. 				<p>
    391. 

  391. 					<a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/common/CanvasTarget.js" translate="no" target="_blank" rel="noopener">src/renderers/common/CanvasTarget.js</a>
    392. 

  392. 				</p>
    393. 

  393. 			</article>
    394. 

  394. 		</section>
    395. 

  395. <script src="../scripts/linenumber.js"></script>
    396. 

  396. <script src="../scripts/page.js"></script>
    397. 

  397. </body>
    398. 

  398. </html>
    399.
粤ICP备19079148号