gallery/HorizontalTiltShift.html

﻿<!DOCTYPE html>

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<script type="importmap">
	  {
		"imports": {
		  "three":         "../libs/build/three.module.js",
		  "three/addons/": "../libs/examples/jsm/",
		  "oops":          "../src/oops.js"
		}
	  }
	</script>
</head>


<body>
	<script type="module">

		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
		import { HorizontalTiltShiftShader } from 'three/addons/shaders/HorizontalTiltShiftShader.js';
		
		import { renderer, scene, randomBalls, backgroundGrid, animationLoop } from './examples.js';
		import { Effects } from 'oops';
		

		var effects = new Effects( renderer )
			.addEffect( HorizontalTiltShiftShader )
			.addParameter( 'r' );


		var gui = new GUI( { title: '<big><em>Horizontal Tilt-shift</em></big>' } );
			gui.add( effects, 'r', 0, 1 ).step( 0.01 ).name( 'R' ).$input.classList.add('bottom');
			
			
		randomBalls( );
		backgroundGrid( 'black', 'linen', 50 );
		animationLoop( effects );


		window.addEventListener( 'resize', onWindowResize );

		function onWindowResize()
		{
			scene.background.repeat.set( innerWidth/50, innerHeight/50 );
		}

	</script>

</body>
</html>