gallery/KaleidoX.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",
		  "oops/shaders/": "../src/shaders/"
		}
	  }
	</script>
</head>


<body>
	<script type="module">

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


		var effects = new Effects( renderer )
			.addEffect( KaleidoShaderX )
			.addParameter( 'sides' )
			.addParameter( 'angle' )


		var gui = new GUI( { title: '<big><em>Kaleido X</em></big>' } );
			gui.add( effects, 'sides', [3,4,5,6,7,8,9,10,11,12,13,14,15,20,30,50]).name( 'Sides' );
			gui.add( effects, 'angle', 0, 6.28 ).step( 0.01 ).name( 'Angle' ).$input.classList.add('bottom');


		randomBallsAndCubes( );
		animationLoop( effects );

	</script>

</body>
</html>