BrU32

JS Kaleidoscope LSD FX Three/WebGL SRC V1

Sep 4th, 2016
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.39 KB | None | 0 0
  1. var camera, scene, renderer;
  2. var mesh;
  3. var teeth;
  4. var clearColor = 0xFFFFFF;
  5. var composer;
  6. var shaderTime = 0;
  7. var badTVPass;
  8. var staticParams, staticPass;
  9. var rgbParams, rgbPass;
  10. var renderPass, copyPass;
  11.  
  12. var loader = new THREE.OBJLoader();
  13. // load a resource
  14. loader.load(
  15. // resource URL
  16. 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/655010/teeth_set.obj',
  17. // Function when resource is loaded
  18. function ( object ) {
  19. object.scale.x = object.scale.y = object.scale.z = 100;
  20. object.traverse( function ( child ) {
  21. if ( child instanceof THREE.Mesh ) {
  22. child.material = new THREE.MeshNormalMaterial({wireframe: true});
  23. }
  24. } );
  25. teeth = object;
  26. init();
  27. animate();
  28. }
  29. );
  30.  
  31.  
  32.  
  33. function init() {
  34.  
  35. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
  36. camera.position.z = -400;
  37.  
  38. scene = new THREE.Scene();
  39.  
  40. var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
  41.  
  42. var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  43. var material = new THREE.MeshBasicMaterial( { map: texture } );
  44.  
  45. mesh = new THREE.Mesh( geometry, material );
  46. scene.add( mesh );
  47.  
  48. // instantiate a loader
  49.  
  50.  
  51. for (var x = -1000; x < 1000; x+=400){
  52. for (var y = -1000; y < 1000; y+=400 ){
  53. var temp = teeth.clone();
  54. temp.position.x = x;
  55. temp.position.y = y;
  56. scene.add(temp);
  57. }
  58. }
  59.  
  60. renderer = new THREE.WebGLRenderer();
  61. renderer.setPixelRatio( window.devicePixelRatio );
  62. renderer.setSize( window.innerWidth, window.innerHeight );
  63. document.body.appendChild( renderer.domElement );
  64.  
  65. //Create Shader Passes
  66. renderPass = new THREE.RenderPass( scene, camera );
  67. rgbPass = new THREE.ShaderPass( THREE.RGBShiftShader );
  68. kaleidoPass = new THREE.ShaderPass(THREE.KaleidoShader);
  69. copyPass = new THREE.ShaderPass( THREE.CopyShader );
  70.  
  71. composer = new THREE.EffectComposer( renderer);
  72. composer.addPass( renderPass );
  73. composer.addPass( rgbPass );
  74. composer.addPass( kaleidoPass );
  75. composer.addPass( copyPass );
  76. copyPass.renderToScreen = true;
  77.  
  78. rgbPass.uniforms[ 'angle' ].value = 0.0;
  79. rgbPass.uniforms[ 'amount' ].value = 0.2;
  80. kaleidoPass.uniforms[ 'sides' ].value = 2;
  81.  
  82. // controls
  83. var controls = new THREE.OrbitControls( camera, renderer.domElement );
  84. //controls.maxPolarAngle = Math.PI * 0.5;
  85. controls.minDistance = 1000;
  86. controls.maxDistance = 1000;
  87.  
  88. //
  89.  
  90. window.addEventListener( 'resize', onWindowResize, false );
  91.  
  92. }
  93.  
  94. function onWindowResize() {
  95.  
  96. camera.aspect = window.innerWidth / window.innerHeight;
  97. camera.updateProjectionMatrix();
  98.  
  99. renderer.setSize( window.innerWidth, window.innerHeight );
  100.  
  101. }
  102.  
  103. function animate() {
  104.  
  105. requestAnimationFrame( animate );
  106.  
  107. camera.rotation.z += 0.001;
  108. mesh.rotation.y += 1.009;
  109. mesh.rotation.x+=1.000;
  110. composer.render( 0.1);
  111. renderer.setClearColor(clearColor);
  112. if (Math.random() > 0.2){
  113. if (Math.random() > 0.5) clearColor -= 10000;
  114. else clearColor -= 0x000010;
  115. }
  116. else clearColor += 0x200001;
  117. }
Advertisement
Add Comment
Please, Sign In to add comment