无尽长廊鬼灭之刃_无尽长廊

无尽长廊鬼灭之刃_无尽长廊无尽的长廊(Gallery)示例HTMLCSSJS示例HTML<audioid="exampleAudio"crossorigin="anonymous"src="//s3.amazonaws.com/metaguru/audio/psych/20.mp3"></audio><divclass="buttons"><divid=...

无尽长廊(Gallery)


更多有趣示例 尽在
知屋安砖社区

示例

在这里插入图片描述

更多有趣话题尽在 https://xhz.bos.xyz
只听到从架构师办公室传来架构君的声音:
醉后几行书字小。有谁来对上联或下联?

HTML

此代码由Java架构师必看网-架构君整理
<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

此代码由Java架构师必看网-架构君整理
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; } */
架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/209538
0
   

发表评论