example/depthOfField.html

<html>
	<head>
		<title>Camera Depth of Field</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<style>
			html, body {
				margin: 0;
				padding: 0;
				background-color: #111;
			}

			#model-info {
				position: absolute;
				bottom: 0;
				left: 0;
				font-family: 'Courier New', Courier, monospace;
				color: white;
				pointer-events: none;
			}

			#samples, #credits, #instructions {

				opacity: 0.75;
				background-color: rgba( 0.0, 0.0, 0.0, 0.5 );
				padding: 5px;
				display: inline-block;

			}

			#loading {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-family: 'Courier New', Courier, monospace;
			}

			#description {
				position: absolute;
				top: 0;
				width: 100%;
				color: white;
				font-family: monospace;
				text-align: center;
				padding: 5px 0;
				pointer-events: none;
			}
		</style>

	</head>
	<body>
		<script src="./depthOfField.js" type="module"></script>
	</body>
</html>