Docs: Add code copy button. (#30611)

src/cameras/OrthographicCamera.js

@@ -7,6 +7,11 @@ import { Camera } from './Camera.js';
  * constant regardless of its distance from the camera. This can be useful
  * for rendering 2D scenes and UI elements, amongst other things.
  *
+ * ```js
+ * const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
+ * scene.add( camera );
+ * ```
+ *
  * @augments Camera
  */
 class OrthographicCamera extends Camera {

src/cameras/PerspectiveCamera.js

@@ -13,6 +13,11 @@ const _maxTarget = /*@__PURE__*/ new Vector2();
  * This projection mode is designed to mimic the way the human eye sees. It
  * is the most common projection mode used for rendering a 3D scene.
  *
+ * ```js
+ * const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+ * scene.add( camera );
+ * ```
+ *
  * @augments Camera
  */
 class PerspectiveCamera extends Camera {

utils/docs/template/static/scripts/page.js

@@ -4,6 +4,48 @@ const expandButton = document.getElementById( 'expandButton' );
 const clearSearchButton = document.getElementById( 'clearSearchButton' );
 const filterInput = document.getElementById( 'filterInput' );
 
+// code copy buttons
+
+const elements = document.getElementsByTagName( 'pre' );
+
+for ( let i = 0; i < elements.length; i ++ ) {
+
+	const element = elements[ i ];
+
+	if ( element.classList.contains( 'linenums' ) === false ) {
+
+		addCopyButton( element );
+
+	}
+
+}
+
+function addCopyButton( element ) {
+
+	const copyButton = document.createElement( 'button' );
+	copyButton.className = 'copy-btn';
+
+	element.appendChild( copyButton );
+
+	copyButton.addEventListener( 'click', function () {
+
+		const codeContent = element.textContent;
+		navigator.clipboard.writeText( codeContent ).then( () => {
+
+			copyButton.classList.add( 'copied' );
+
+			setTimeout( () => {
+
+				copyButton.classList.remove( 'copied' );
+
+			}, 1000 );
+
+		} );
+
+	} );
+
+}
+
 // Functionality for hamburger button (on small devices)
 
 expandButton.onclick = function ( event ) {

utils/docs/template/static/styles/page.css

@@ -180,6 +180,7 @@ h3 {
 		white-space: pre-wrap;
 		font-size: calc(var(--font-size) - 1px);
 		line-height: calc(var(--line-height) - 1px);
+		position: relative;
 	}
 
 	pre code {
@@ -210,6 +211,32 @@ h3 {
 		color: var(--text-color);
 	}
 
+	.copy-btn {
+		cursor: pointer;
+		position: absolute;
+		top: 16px;
+		right: 16px;
+		width: 24px;
+		height: 24px;
+		background-color: transparent;
+		background-image: url('/files/ic_copy_grey_24dp.svg');
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		opacity: 0.9;
+		border: none;
+	}
+	
+	.copy-btn:hover {
+		opacity: 1;
+	}
+	
+	.copy-btn.copied {
+		pointer-events: none;
+		opacity: 1;
+		background-image: url('/files/ic_tick_green_24dp.svg');
+	}
+
 }
 
 @media (prefers-color-scheme: dark) {