three.js 根据不同的图片做不同的动画特效科技感十足

原创

徐同保的博客 2021-07-27 20:33:22 ©著作权

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

three.js 根据不同的图片做不同的动画特效科技感十足_js

img.js里保存的是一个图片base64格式的代码

下面的代码可以根据提供的图片不同，做不同的动画效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>动画</title>
  <style>
  body{margin: 0;}
  </style>
</head>

<body>
  <canvas id="map"></canvas>
  <script type="text/javascript" src="https://cdn.staticfile.org/three.js/r83/three.js"></script>
  <script type="text/javascript" src="js/img.js"></script>
  <script>
    var renderer, scene, camera, ww, wh, particles;

    ww = window.innerWidth,
      wh = window.innerHeight;

    var centerVector = new THREE.Vector3(0, 0, 0);
    var previousTime = 0;

    var getImageData = function(image) {

      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0);

      return ctx.getImageData(0, 0, image.width, image.height);
    }

    var drawTheMap = function() {

      var geometry = new THREE.Geometry();
      var material = new THREE.PointsMaterial({
        size: 3,
        color: 0x333333,
        sizeAttenuation: false
      });
      for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {
        for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {
          if (imagedata.data[(x * 4 + y * 4 * imagedata.width) + 3] > 128) {

            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 1000 - 500;
            vertex.y = Math.random() * 1000 - 500;
            vertex.z = -Math.random() * 500;

            vertex.destination = {
              x: x - imagedata.width / 2,
              y: -y + imagedata.height / 2,
              z: 0
            };

            vertex.speed = Math.random() / 200 + 0.015;

            geometry.vertices.push(vertex);
          }
        }
      }
      particles = new THREE.Points(geometry, material);

      scene.add(particles);

      requestAnimationFrame(render);
    };

    var init = function() {
      THREE.ImageUtils.crossOrigin = '';
      renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("map"),
        antialias: true,
        alpha:true
      });
      renderer.setSize(ww, wh);
      // renderer.setClearColor(0x181818);

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
      camera.position.set(-100, 0, 220);
      camera.lookAt(centerVector);
      scene.add(camera);
      texture = THREE.ImageUtils.loadTexture(imgBase64, undefined, function() {
        imagedata = getImageData(texture.image);
        drawTheMap();
      });
      window.addEventListener('resize', onResize, false);

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

    var render = function(a) {

      requestAnimationFrame(render);

      for (var i = 0, j = particles.geometry.vertices.length; i < j; i++) {
        var particle = particles.geometry.vertices[i];
        particle.x += (particle.destination.x - particle.x) * particle.speed;
        particle.y += (particle.destination.y - particle.y) * particle.speed;
        particle.z += (particle.destination.z - particle.z) * particle.speed;
      }

      // if (a - previousTime > 100) {
      //  var index = Math.floor(Math.random() * particles.geometry.vertices.length);
      //  var particle1 = particles.geometry.vertices[index];
      //  var particle2 = particles.geometry.vertices[particles.geometry.vertices.length - index];
      //  TweenMax.to(particle, Math.random() * 2 + 1, {
      //    x: particle2.x,
      //    y: particle2.y,
      //    ease: Power2.easeInOut
      //  });
      //  TweenMax.to(particle2, Math.random() * 2 + 1, {
      //    x: particle1.x,
      //    y: particle1.y,
      //    ease: Power2.easeInOut
      //  });
      //  previousTime = a;
      // }

      particles.geometry.verticesNeedUpdate = true;
      camera.position.x = Math.sin(a / 5000) * 100;
      // camera.position.x = false;
      camera.lookAt(centerVector);

      renderer.render(scene, camera);
    };

    init();
  </script>
</body>

</html>