无尽的长廊（Gallery）

示例

HTML

<audio id="exampleAudio" crossorigin="anonymous" src="//s3.amazonaws.com/metaguru/audio/psych/20.mp3"></audio>

<div class="buttons">
  <div id="distort" onclick="distort();">Distort</div>
  <div id="off" onclick="off();">OFF</div>
  <div id="melt" onclick="melt();">Melt</div>
</div>

<div class="controls">
  <div id="play" onclick="audio.play();">PLAY</div>
  <div id="pause" onclick="audio.pause();">PAUSE</div>
</div>

<div id="container"></div>



<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="//threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="//threejs.org/examples/js/loaders/MTLLoader.js"></script>
<!-- <script src="https://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script> -->
<!-- <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> -->
<script src="//threejs.org/examples/js/controls/TrackballControls.js"></script>
<!-- <script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/effects/AsciiEffect.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script> -->

<!--
<audio id="exampleAudio" controls crossorigin="anonymous" src="https://s3.amazonaws.com/metaguru/audio/grails/3.mp3"></audio>
-->

<!-- Effect Composer -->
<script src="//codepen.io/januff/pen/EVqZNo.js"></script>
<!-- Renderpass.js -->
<script src="//codepen.io/januff/pen/PZomKJ.js"></script>
<!-- Shaderpass.js -->
<script src="//codepen.io/januff/pen/MaNJJp.js"></script>
<!-- Mask.js -->
<script src="//codepen.io/januff/pen/qOeRqK.js"></script>
<!-- Copyshader.js -->
<script src="//codepen.io/januff/pen/PPMWGM.js"></script>
<!-- FilmShader.js -->
<script src="//codepen.io/januff/pen/bEGWoM.js"></script>
<!-- BadTVShader.js -->
<script src="//codepen.io/januff/pen/eJYWGa.js"></script>
<!-- RGBShiftShader.js -->
<script src="//codepen.io/januff/pen/YwzVEN.js"></script>
<!-- StaticShader.js -->
<script src="//codepen.io/januff/pen/ZQEKaZ.js"></script>
<!-- Threex.BadTVPasses.js -->
<script src="//codepen.io/januff/pen/LGYyeN.js"></script>

<script src="//threejs.org/examples/js/modifiers/ExplodeModifier.js"></script>
<script src="//threejs.org/examples/js/modifiers/TessellateModifier.js"></script>
<script src="//threejs.org/examples/js/Detector.js"></script>
<!-- <script src="https://threejs.org/examples/js/utils/FontUtils.js"></script> -->
<!-- Metaguru JS Font -->
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/143273/metaguru_Regular.js"></script>
<!-- Guru JS Font -->
<script src="//codepen.io/januff/pen/BjydVj.js"></script>

<script type="x-shader/x-vertex" id="vertexshader">
			uniform float amplitude;

			attribute vec3 customColor;
			attribute vec3 displacement;

			varying vec3 vNormal;
			varying vec3 vColor;

			void main() {

				vNormal = normal;
				vColor = customColor;

				vec3 newPosition = position + normal * amplitude * displacement;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

			}
		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">
	varying vec3 vNormal;
			varying vec3 vColor;

			void main() {

				const float ambient = 0.4;

				vec3 light = vec3( 1.0 );
				light = normalize( light );

				float directional = max( dot( vNormal, light ), 0.0 );

				gl_FragColor = vec4( ( directional + ambient ) * vColor, 1.0 );

			}
	</script>

CSS

@font-face {font-family: "Psychedelia HM";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/Psychedelia_HM.eot");
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/Psychedelia_HM.eot?#iefix") format("embedded-opentype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/Psychedelia_HM.woff") format("woff"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/Psychedelia_HM.ttf") format("truetype"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/Psychedelia_HM.svg#Psychedelia HM") format("svg");
}

html, body {
  margin: 0;
  overflow: hidden;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/kidmographboombox.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* 
  HTML COLOR NAME REMINDERS
  floralwhite FFFAF0
  blanchedalmond FFEBCD
  burlywood DEB887
  darkseagreen 8FBC8F
  darkkhaki BDB76B
  darkolivegreen 556B2F
  lime 00FF00
  deeppink FF1493
  lightpink FFB6C1
  hotpink FF69B4
  indianred CD5C5C
  lightsalmon FFA07A
  dimgray 696969
*/

/*
#exampleAudio {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
}
*/

#exampleAudio {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  z-index: 101;
}

.buttons {
  cursor: all-scroll;
  text-transform: uppercase;
  font-family: 'Psychedelia HM';
  font-size: 2em;
  letter-spacing: .1em;
  font-weight: 400;
  position: absolute;
  color: deeppink;
  opacity: .8;
  z-index: 80;
  height: 50vh;
  width: 100vw;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.controls {
  cursor: all-scroll;
  text-transform: uppercase;
  font-family: 'Psychedelia HM';
  font-size: 2.5em;
  letter-spacing: .15em;
  font-weight: 400;
  position: absolute;
  color: deeppink;
  opacity: .8;
  z-index: 80;
  top: 50vh;
  height: 50vh;
  width: 100vw;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

#distort, #off, #melt, #play, #pause {
  cursor: pointer;
  padding: 20px 20px 0px 30px;

}
#distort:hover, #melt:hover, #play:hover, #pause:hover   {
  color: yellow;
  opacity: 1;
}
#off:hover{
  color: red;
  opacity: 1;
}
#distort {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
#off {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
#melt {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

JS

var constructor = window.AudioContext || window.AudioContext;
var ctx = new constructor();
var audio = document.getElementById('exampleAudio');
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();

audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var renderer, scene, camera, stats;
var mesh, uniforms;
var onRenderFcts = [];
var WIDTH = window.innerWidth,
  HEIGHT = window.innerHeight;
// create a bad tv pass
var badTVPasses = new THREEx.BadTVPasses();
onRenderFcts.push(function(delta, now) {
  badTVPasses.update(delta, now)
});

init();
animate();
off();
function init() {
  camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 10000);
  camera.position.set(0, 50, 150);
  controls = new THREE.TrackballControls(camera);
  controls.minPolarAngle = -Math.PI*.45; 
  controls.maxPolarAngle = Math.PI*.45;
  controls.minDistance = 100;
  controls.maxDistance = 230;
  scene = new THREE.Scene();

  // font-family: 'metaguru'
  // v = new circle
  // w = new slab
  // 3 = turntable
  // l = thought balloon
  // ( = bar chart
  // ) = moneybag
  // R = cassette
  // J = movie reel
  // L = boombox
  // M = old radio
  // z = filmstrip
  // C = movie camera
  // B = TV set

  // font: "guru"
  // a = executioner
  // b = unicorn
  // c = hippie
  // t = skull
  // i = play
  // j = pause
  
  var geometry = new THREE.TextGeometry("t", {
    size: 60,
    height: 5,
    curveSegments: 3,
    font: "guru",
    bevelThickness: 1,
    bevelSize: 1,
    bevelEnabled: true
  });
  geometry.center();

  var tessellateModifier = new THREE.TessellateModifier(8);
  for (var i = 0; i < 6; i++) {
    tessellateModifier.modify(geometry);
  }
  var explodeModifier = new THREE.ExplodeModifier();
  explodeModifier.modify(geometry);

  var numFaces = geometry.faces.length;
  geometry = new THREE.BufferGeometry().fromGeometry(geometry);
  var colors = new Float32Array(numFaces * 3 * 3);
  var displacement = new Float32Array(numFaces * 3 * 3);
  var color = new THREE.Color();
  for (var f = 0; f < numFaces; f++) {
    var index = 9 * f;
    var h = 0.2 * Math.random();
    var s = 0.5 + 0.5 * Math.random();
    var l = 0.5 + 0.5 * Math.random();
    color.setHSL(h, s, l);
    var d = 4 * (0.6 - Math.random());
    for (var i = 0; i < 3; i++) {
      colors[index + (3 * i)] = color.r;
      colors[index + (3 * i) + 1] = color.g;
      colors[index + (3 * i) + 2] = color.b;
      displacement[index + (3 * i)] = d;
      displacement[index + (3 * i) + 1] = d;
      displacement[index + (3 * i) + 2] = d;
    }
  }

  geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
  geometry.addAttribute('displacement', new THREE.BufferAttribute(displacement, 3));

  //

  uniforms = {
    amplitude: {
      type: "f",
      value: 0.0
    }
  };

  var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent
  });

  //

  mesh = new THREE.Mesh(geometry, shaderMaterial);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  renderer.setClearColor(0x000000, 0);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(WIDTH, HEIGHT);

  var container = document.getElementById('container');
  container.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);

  // randomize it
  badTVPasses.params.randomize();

  //		composer 							//

  var width = window.innerWidth || 1;
  var height = window.innerHeight || 1;
  var parameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false
  };

  var renderTarget = new THREE.WebGLRenderTarget(width, height, parameters);

  var composer = new THREE.EffectComposer(renderer, renderTarget);
  var renderPass = new THREE.RenderPass(scene, camera);
  composer.addPass(renderPass);

  // add badTVPasses to composer	

  badTVPasses.addPassesTo(composer)
  composer.passes[composer.passes.length - 2].renderToScreen = true;

  controls = new THREE.TrackballControls(camera);

  //		render the scene						//

  onRenderFcts.push(function(delta, now) {
    // disable rendering directly thru renderer 
    // renderer.render( scene, camera )
    var freqScaled = frequencyData[320] * .001;
    if (freqScaled > 0) {
      scene.rotation.x = freqScaled;

    };

    // uniforms.amplitude.value = freqScaled + Math.sin(time * 1);
    // controls.update();
    analyser.getByteFrequencyData(frequencyData);
    // render thru composer
    composer.render(delta)
  });

}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var time = Date.now() * 0.001;
  var freqScaled = frequencyData[120] * .01;
  uniforms.amplitude.value = freqScaled + Math.sin(time * 1);
  controls.update();
  analyser.getByteFrequencyData(frequencyData);
  renderer.render(scene, camera);
}

function off() {
  badTVPasses.params.reset();
  badTVPasses.onParamsChange();
}

function distort() {
  console.log('clicked');
  badTVPasses.params.preset('light');
  badTVPasses.onParamsChange();
}

function melt() {
  badTVPasses.params.preset('strong');
  badTVPasses.onParamsChange();
}

//		loop runner							//
var lastTimeMsec = null
requestAnimationFrame(function animate(nowMsec) {
    // keep looping
    requestAnimationFrame(animate);
    // measure time
    lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60
    var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
    lastTimeMsec = nowMsec
      // call each update function
    onRenderFcts.forEach(function(onRenderFct) {
      onRenderFct(deltaMsec / 1000, nowMsec / 1000)
    })
  })
  /*  
    UI UPGRADES
    
    renderer = new THREE.WebGLRenderer({
      alpha: true
    });
    renderer.setClearColor(0x000000, 0);
    
    THREE.ImageUtils.crossOrigin = "anonymous";
    https://raw.githubusercontent.com/josdirksen/threejs-cookbook/master
    
    cubeNormalMaterial.map = THREE.ImageUtils.loadTexture("https://raw.githubusercontent.com/josdirksen/threejs-cookbook/master/assets/textures/chesterfield.png");
    
    // call the render function
    window.addEventListener('resize', onResize, false);
    render();

    function onResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };

    controls = new THREE.OrbitControls(camera);

    var ctx = new AudioContext();
  	var audio = document.getElementById('exampleAudio');
  	var audioSrc = ctx.createMediaElementSource(audio);
  	var analyser = ctx.createAnalyser();

  	audioSrc.connect(analyser);
  	audioSrc.connect(ctx.destination);
  	// frequencyBinCount tells you how many values you'll receive from the analyser
  	var frequencyData = new Uint8Array(analyser.frequencyBinCount);	
    
    cubeMaterial = new THREE.MeshPhongMaterial({color:frequencyData[i]*0xff3300});

  function render() {
  		scene.traverse(function (e){
  			if (e instanceof THREE.Mesh){
  				e.rotation.x += frequencyData[50]/1000;
  				e.rotation.y = frequencyData[e.id]/50;
  				e.rotation.z += guiControls.rotationZ;
  				var color = new THREE.Color(1,0,0);
  				e.material.color.setRGB(frequencyData[e.id]/255,0,0);
  			}
  		});			
  		guiControls.intensity = frequencyData[2];
  		spotLight.position.x = guiControls.lightX;
  		spotLight.position.y = guiControls.lightY;
  		spotLight.position.z = guiControls.lightZ;
  		analyser.getByteFrequencyData(frequencyData);
  		camera.fov = fov * zoom;
  		camera.updateProjectionMatrix();
  		zoom += inc;
  		if ( zoom <= 0.1*(frequencyData[20]/100) || zoom >= 1*(frequencyData[20]/50) ){
  			inc = -inc;
  		}
  		camera.rotation.y = 90 * Math.PI / 180;
  		camera.rotation.z = frequencyData[20] * Math.PI / 180;
  		camera.rotation.x = frequencyData[100] * Math.PI / 180;
  	}

  */