文字遮罩

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Dust = function () {
  function Dust() {
    _classCallCheck(this, Dust);

var mesh, geometry, material, p, particle, vert, speed, _x, _y, _z;

this.delta = 0;

geometry = new THREE.Geometry();
    material = new THREE.ParticleBasicMaterial({
      color: 0xFFFFFF,
      size: 20,
      map: THREE.ImageUtils.loadTexture("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJBMjU2QTc5RDQ4NTExRTNCN0UxQUFCM0E1RjNCMTgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJBMjU2QTdBRDQ4NTExRTNCN0UxQUFCM0E1RjNCMTgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkEyNTZBNzdENDg1MTFFM0I3RTFBQUIzQTVGM0IxODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkEyNTZBNzhENDg1MTFFM0I3RTFBQUIzQTVGM0IxODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7+rtUtAAAEdklEQVR42rSajW6rMAyFcQisff93vV0LJFdUpDKHYyewDSkKrCz4w/nzMdI1HDnncirqz6Jqdo73ZWxW1ez8c4+IVG2UCxBiGC/Gb57x2fnbKSA5CVDqAEaHClDnGLuW5PyWW2DkghcCnOsiUNPmleFJlUzOm2HkBEQgxvdQI5Rug3lhgTrBtb53N4YQRhogLABdogFkdS1tsC4zAbS63g5GGiCKQcXIqIyPcN0DjMCslclbn7eyXk8AtZDuR2EQxINA4weoI3ipBaQYPEE9A9RiwexACIRANypGDk6JxCs4cxVDNEQx2iozgUl6AlhhoupSFkSvIEZVj+paw5zxSIHQLyE4y0Imbb4dIeANPbB76Eba+C9Vl9/iRZC1vDagtX5u5aXKBF3t0M00CJuZBoD42soNgMp9OEZwZrRANISG+W6EeXtEewPHxUAAbupag0SYhqUy/eJgLwZ/KwiEeSn4nVcKCBsXGqIYfwcgPU76ykCvjRPtlW9SnsozODV/QLQ3ypvV3em+GX4Hr4xqfHhrCNtraa9MZIw8NoCHgnkBzA6ELXgDdKe7KggykJVdnL1czSsahME8mVcKCPMGg0AQHORyAsQaKwjyAKgnjJU3TCTb7kCm32gsftZ0K5VYR4xAS8MNMKu5z4rGYsg2hbEBIBhRpHUEAnJ2H/d+RjRWdGuXy2Ymtttt8YY07CasPdzhecEJWVnDoRJ3NIXP5H4rTLCeL5ZHOgMiGFv5lrD2CoxUok/zeaGxUWlp7AKMF1J7YfVBRwiVt1RTTX5ivAd15oVJ5wgEv23cnx+e0mEJakyj+ovD0rjoM0OD7pSM6982uqtoW5ZwlzVITfVLRk11pwvGsz1YJpJQMl5mDhXxbIH9kCWm/RQmVTSvBZ57ePnB8ALKNQsp6aJnPG+j4Sg8sOd2ekH0NCdUPObt/5btRaRtlkuwLp2FSUSsw+cmS+eKDY3ORsHtSa9gMllnckX/xfYn2KqjaLfzCMYjPQRWt0pghTIQCtheWiEBBAus1vjjnxNYzTqwYqGuVk5uEOreQXgYKzKQVGanGWQhHbM/CASL203xAcPdL/AGxuwDUVAsOciThJ7EIwhBlRQNIkRFQSXlBqrKaOhageyTaiHupIz1FJQJVPudHNQ5khB6BkU6CyQ0gMxE19KaFqqOE6QfPusKKo1WzD4StXEkSspA1BQGslRAnqA8voxp+CCZMpi+ov+OhkeiETtY3QpBXobuO3uKfFwleQWD06OXA2T9/KoaP4PRrQCftAJL9JyRhmKjPFSbsWaSE5lgEbTScB0DaRUhBpBqBpJLFCNMaN05LGR2whU9H1JvTuaqJRFqJUTFAbH2Viwp6kJ46Wkvv+5JNpbqgVt2TMElozbz7W56ugHGk4s8CEv31UCpksF1Pxo4+wmHBSTGVw+1TWN2okEW3+RTn3A0fo/i6V9dJaHZGRrApe9Qrn4dVNO8uorymB3B4fKnTs36VQNQ16gB5wrUKYBLQhzJyZ+5ruljh+tWiPX4L8AAhzPTbbKPzxYAAAAASUVORK5CYII="),
      blending: THREE.AdditiveBlending,
      transparent: true,
      opacity: 0.4
    });

for (p = 0; p < 50; p += 1) {
      _x = Math.random() * 800 - 400;
      _y = -500 + Math.random() * 500 - 250;
      _z = -100 + Math.random() * 200;

vert = new THREE.Vector3(_x, _y, _z);
      speed = 0.3 + Math.random() * 0.7;
      vert.speed = speed;
      vert.baseX = _x;

geometry.vertices.push(vert);
    }

mesh = new THREE.ParticleSystem(geometry, material);
    mesh.sortParticles = true;

this.mesh = mesh;
  }

Dust.prototype.update = function update() {
    var p, vert;
    this.delta += 1;
    for (p = 0; p < this.mesh.geometry.vertices.length; p += 1) {
      vert = this.mesh.geometry.vertices[p];
      vert.y += vert.speed;
      vert.x = vert.baseX + Math.sin(this.delta * vert.speed / 100) * 2;

if (vert.y > 0) {
        vert.y -= 900;
      }
    }
  };

return Dust;
}();

var Beam = function () {
  function Beam(b) {
    _classCallCheck(this, Beam);

var geometry,
        material,
        object,
        wMaterial,
        wGeometry,
        edges,
        scale,
        multiplier,
        radius = 500,
        lineColor,
        squareColor,
        i,
        x,
        y,
        z;

var colors = [{
      lineColor: 0x00d8ff,
      squareColor: 0xccccff
    }, // blue
    {
      lineColor: 0xcc66ff,
      squareColor: 0xcc99ff
    }];

this.blue = b;
    this.alternateColor = false;

if (this.blue) {
      lineColor = colors[0].lineColor;
      squareColor = colors[0].squareColor;
    } else {
      lineColor = colors[1].lineColor;
      squareColor = colors[1].squareColor;
    }

this.mesh = new THREE.Object3D();

//lines
    wMaterial = new THREE.LineBasicMaterial({
      color: lineColor,
      linewidth: Math.random() * 4 + 2,
      blending: THREE.AdditiveBlending,
      transparent: true,
      opacity: 0.4
    });

wGeometry = new THREE.BoxGeometry(40, 40, 3000);

edges = new THREE.Line(wGeometry, wMaterial, THREE.LinePieces);
    edges.rotation.x = Math.PI / 2;
    this.mesh.add(edges);
    this.edges = edges;

//square
    material = new THREE.MeshBasicMaterial({
      color: squareColor,
      blending: THREE.AdditiveBlending,
      transparent: true,
      opacity: 0.9
    });

geometry = new THREE.PlaneGeometry(40, 40);

object = new THREE.Mesh(geometry, material);
    // object.rotation.x = Math.PI/2;
    object.position.x = 1500;
    this.mesh.add(object);
    this.square = object;

//positioning
    scale = 0.2 + Math.random() * 0.5;
    z = -(radius / 2) + Math.random() * radius;
    y = -(radius / 2) + Math.random() * radius;
    x = Math.random() * 3500;

this.mesh.position.set(x, y, z);
    this.mesh.scale.set(scale, scale, scale);
  }

Beam.prototype.update = function update(hide, alternate) {
    var x = this.mesh.parent.position.x + this.mesh.position.x,
        opacity;

if (x > 1500) {
      this.mesh.position.x -= 3500;
    }

opacity = this.alternateColor && this.blue || !this.alternateColor && !this.blue ? 0.2 : 1;

this.square.material.opacity = hide ? 0 : 0.9 * opacity;
    this.edges.material.opacity = hide ? 0 : 0.4 * opacity;
  };

return Beam;
}();

var Beams = function () {
  function Beams() {
    _classCallCheck(this, Beams);

var count = 400,
        object,
        i,
        b;

this.shapes = [];
    this.mesh = new THREE.Object3D();
    this.mesh.position.set(0, 0, -500);

for (i = 0; i < count; i += 1) {
      if (i % 2 === 0) {
        b = true;
      } else {
        b = false;
      }

object = new Beam(b);
      this.mesh.add(object.mesh);
      this.shapes.push(object);
    }
  }

Beams.prototype.update = function update(d, currentText) {
    var i, hide, alternateColor, threshold;

this.mesh.position.x += 10;
    threshold = Math.ceil((Math.sin(d * 2 - Math.PI / 2) * 0.51 + 0.5) * this.shapes.length);

for (i = 0; i < this.shapes.length; i += 1) {
      this.shapes[i].update(i >= threshold, currentText);
    }
  };

return Beams;
}();

var Text = function () {
  function Text(d) {
    _classCallCheck(this, Text);

var attributes, uniforms, material, geometry, mesh, i;

this.animating = false;
    this.w = 1000;
    this.h = 600;
    this.delta = d || 0;
    this.text1 = "LOVE";
    this.text2 = "HATE";
    this.currentText = 0;
    this.textArray = [this.text1, this.text2];
    this.textAttributes = [];

this.createScene();
    this.createMask();
    this.drawMask(this.delta);
    this.updateMask();

attributes = {};

uniforms = {
      map: {
        type: "t",
        value: this.texture
      },
      mask: {
        type: "t",
        value: this.mask
      }
    };

material = new THREE.ShaderMaterial({
      uniforms: uniforms,
      attributes: attributes,
      vertexShader: document.getElementById('vertShader').innerText,
      fragmentShader: document.getElementById('fragShader').innerText,
      blending: THREE.AdditiveBlending,
      transparent: true
    });

geometry = new THREE.PlaneGeometry(10, 5, 1, 1);

mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = -10;
    this.mesh = mesh;
  }

Text.prototype.createScene = function createScene() {
    var canvas,
        w = this.w,
        h = this.h,
        i;

canvas = document.createElement('canvas');
    //document.body.appendChild(canvas);
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';

this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(100, w / h, 1, 10000);
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      canvas: canvas
    });

this.renderer.setSize(w, h);

this.beams = new Beams();
    this.scene.add(this.beams.mesh);

this.texture = new THREE.Texture(canvas);

for (i = 0; i < this.textArray[0].length; i += 1) {
      this.textAttributes.push({
        rotation: Math.random() * 360,
        rotationSpeed: Math.random() * 2 + 0.2,
        scale: Math.random() * 360,
        scaleSpeed: Math.random() * 2 + 0.2,
        x: Math.random() * 360,
        xSpeed: Math.random() * 3 + 0.5,
        y: Math.random() * 360,
        ySpeed: Math.random() * 3 + 0.5
      });
    }
  };

Text.prototype.createMask = function createMask() {
    var canvas;

canvas = document.createElement('canvas');
    canvas.width = this.w;
    canvas.height = this.h;
    //document.body.appendChild(canvas);
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';

this.ctx = canvas.getContext('2d');
    this.ctx.fillStyle = 'red';
    this.ctx.font = "800 140px Proxima Nova, proxima-nova, sans-serif";
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";

this.mask = new THREE.Texture(canvas);
  };

Text.prototype.drawMask = function drawMask() {
    var i,
        x,
        y,
        att,
        letter,
        len,
        scale,
        SPACER = 110,
        R_RANGE = Math.PI / 8,
        X_RANGE = 8,
        Y_RANGE = 20,
        S_RANGE = 0.2,
        MULTIPLIER = 1.5,
        DEG2RAD = Math.PI / 180;

this.ctx.clearRect(0, 0, this.w, this.h);
    this.currentText = Math.sin(this.delta) > 0 ? 0 : 1;

len = this.textArray[this.currentText].length;

for (i = 0; i < len; i += 1) {
      letter = this.textArray[this.currentText][i];
      att = this.textAttributes[i];
      x = -(SPACER * len) / 2.5 + i * SPACER + Math.sin(att.x * DEG2RAD) * X_RANGE;
      y = Math.sin(att.y * DEG2RAD) * Y_RANGE;
      scale = 1 + Math.sin(att.scale * DEG2RAD) * S_RANGE;
      this.ctx.save();
      this.ctx.translate(this.w / 2 + x * MULTIPLIER, this.h / 2 + y * MULTIPLIER);
      this.ctx.scale(scale * MULTIPLIER, scale * MULTIPLIER);
      this.ctx.rotate(Math.sin(att.rotation * DEG2RAD) * R_RANGE);
      this.ctx.fillText(letter, 0, 0);
      this.ctx.restore();
    }
  };

Text.prototype.updateMask = function updateMask() {
    var i, att;

for (i = 0; i < this.textAttributes.length; i += 1) {
      att = this.textAttributes[i];
      att.rotation += att.rotationSpeed;
      att.scale += att.scaleSpeed;
      att.x += att.xSpeed;
      att.y += att.ySpeed;
    }

this.drawMask(this.delta);
    this.mask.needsUpdate = true;
  };

Text.prototype.update = function update() {
    this.delta += 0.015;

this.beams.update(this.delta, this.currentText);
    this.texture.needsUpdate = true;

this.updateMask();

this.renderer.render(this.scene, this.camera);
  };

return Text;
}();

var World = function () {
  function World() {
    _classCallCheck(this, World);

this.delta = 0;

this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    });
    this.renderer.setClearColor(0x000000);
    document.body.appendChild(this.renderer.domElement);
    this.resize();

this.addCube();
    this.addLight();

requestAnimationFrame(this.render.bind(this));
    window.addEventListener('resize', this.resize.bind(this));
  }

World.prototype.update = function update() {
    this.delta += 0.1;

this._text.update();
    this._dust.update();
  };

World.prototype.addLight = function addLight() {
    var ambient;
    ambient = new THREE.AmbientLight(0x777777);
    this.scene.add(ambient);
  };

World.prototype.addCube = function addCube() {
    this._text = new Text(1);
    this.scene.add(this._text.mesh);

this._dust = new Dust();
    this._dust.mesh.position.y = 344;
    this._dust.mesh.position.z = -1000;
    this.scene.add(this._dust.mesh);
  };

World.prototype.render = function render() {
    this.update();
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
  };

World.prototype.resize = function resize() {
    this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);

this.renderer.setSize(window.innerWidth, window.innerHeight);
  };

return World;
}();

var _w = new World();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg