three实现三维边框小球旋转故障闪烁动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维边框小球旋转故障闪烁动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
h1 {
  color: white;
  font-family: VT323;
  position: absolute;
  top: 70vh;
  left: 50vw;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  width: 100%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  text-align: center;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<h1>// Scanning your memories...</h1>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script >
      
      function buildScene() {

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  var composer = new THREE.EffectComposer(renderer);
  renderer.setSize(window.innerWidth, window.innerHeight);
  composer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  window.addEventListener('resize', onWindowResize, false);

  var cubeGroup = new THREE.Group();
  scene.add(cubeGroup);

  function makeRing(radius, parent) {
    var geometry = new THREE.CylinderGeometry(radius, radius, 0.1, 64);
    var edges = new THREE.EdgesGeometry(geometry);
    var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x11ee77 }));
    parent.add(line);
    return line;
  };

  var ring0 = makeRing(3, scene);
  var ring1 = makeRing(3.3, ring0);
  var ring2 = makeRing(3.6, ring1);

  (function () {
    var geometry = new THREE.OctahedronGeometry(2, 3);
    var material = new THREE.MeshPhongMaterial({ color: 0x444444, opacity: 0.8, transparent: true });
    var cube = new THREE.Mesh(geometry, material);
    cubeGroup.add(cube);

    var edges = new THREE.EdgesGeometry(geometry);
    var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x1188dd }));
    line.scale.set(1.1, 1.1, 1.1);
    cubeGroup.add(line);
  })();

  var cylinder = function () {
    var geometry = new THREE.CylinderGeometry(8, 8, 1000, 3);
    const edges = new THREE.EdgesGeometry(geometry);
    const cylinder = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x444444 }));
    cylinder.rotation.set(Math.PI / 2, 0, 0);
    scene.add(cylinder);

    return cylinder;
  }();

  var light = new THREE.DirectionalLight(0xFFFFFF, 1);
  scene.add(light);

  camera.position.z = 8;

  var renderScene = new THREE.RenderPass(scene, camera);
  var glitchPass = new THREE.GlitchPass();
  var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 3, 1, 0.4);
  var copyShader = new THREE.ShaderPass(THREE.CopyShader);
  copyShader.renderToScreen = true;

  composer.addPass(renderScene);
  composer.addPass(glitchPass);
  composer.addPass(bloomPass);
  composer.addPass(copyShader);

  function render() {
    cubeGroup.rotation.x += 0.01;
    cubeGroup.rotation.y += 0.03;
    ring0.rotation.x += 0.011;
    ring0.rotation.y += 0.032;
    ring1.rotation.z += 0.013;
    ring1.rotation.y += 0.034;
    ring2.rotation.x += 0.015;
    ring2.rotation.y += 0.036;
    cylinder.rotation.y += 0.002;
    cylinder.rotation.x -= 0.001;
    cylinder.rotation.z += 0.003;
    requestAnimationFrame(render);

    composer.render();
  }
  render();
}

// Everything here down was pulled from ThreeJS Examples under postprocessing and shaders.

/**
 * @author alteredq / http://alteredqualia.com/
 *
 * Full-screen textured quad shader
 */

THREE.CopyShader = {

  uniforms: {

    "tDiffuse": { value: null },
    "opacity": { value: 1.0 } },



  vertexShader: [

  "varying vec2 vUv;",

  "void main() {",

  "vUv = uv;",
  "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

  "}"].

  join("\n"),

  fragmentShader: [

  "uniform float opacity;",

  "uniform sampler2D tDiffuse;",

  "varying vec2 vUv;",

  "void main() {",

  "vec4 texel = texture2D( tDiffuse, vUv );",
  "gl_FragColor = opacity * texel;",

  "}"].

  join("\n") };



/**
 * @author felixturner / http://airtight.cc/
 *
 * RGB Shift Shader
 * Shifts red and blue channels from center in opposite directions
 * Ported from http://kriss.cx/tom/2009/05/rgb-shift/
 * by Tom Butterworth / http://kriss.cx/tom/
 *
 * amount: shift distance (1 is width of input)
 * angle: shift angle in radians
 */

THREE.DigitalGlitch = {

  uniforms: {

    "tDiffuse": { value: null }, //diffuse texture
    "tDisp": { value: null }, //displacement texture for digital glitch squares
    "byp": { value: 0 }, //apply the glitch ?
    "amount": { value: 0.08 },
    "angle": { value: 0.02 },
    "seed": { value: 0.02 },
    "seed_x": { value: 0.02 }, //-1,1
    "seed_y": { value: 0.02 }, //-1,1
    "distortion_x": { value: 0.5 },
    "distortion_y": { value: 0.6 },
    "col_s": { value: 0.05 } },


  vertexShader: [

  "varying vec2 vUv;",
  "void main() {",
  "vUv = uv;",
  "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  "}"].
  join("\n"),

  fragmentShader: [
  "uniform int byp;", //should we apply the glitch ?

  "uniform sampler2D tDiffuse;",
  "uniform sampler2D tDisp;",

  "uniform float amount;",
  "uniform float angle;",
  "uniform float seed;",
  "uniform float seed_x;",
  "uniform float seed_y;",
  "uniform float distortion_x;",
  "uniform float distortion_y;",
  "uniform float col_s;",

  "varying vec2 vUv;",.........完整代码请登录后点击上方下载按钮下载查看