程序员教你用代码制作3d爱心跳动特效，正好拿去送给女神给她个惊喜

晚安独角兽

已于 2023-07-28 13:55:06 修改

阅读量8.4k

点赞数 8

分类专栏：前端项目文章标签：前端 javascript 开发语言

于 2022-11-08 16:05:39 首次发布

本文链接：https://blog.csdn.net/javayoungcoolboy/article/details/127752292

版权

前端项目专栏收录该内容

10 篇文章 4 订阅

订阅专栏

🐱‍🏍 【晚安独角兽】：hello你好我是独角兽，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！

🎉 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!

🌹 吾等采石之人，应怀大教堂之心，愿我们奔赴在各自的热爱里…

HTML+CSS+JavaScript实现

先点赞后观看,养成好习惯

效果图

注:任意浏览器都可以,建议使用谷歌浏览器

代码部分

代码如下仅供参考
可以直接拿去复制粘贴

(function () {
  const _face = new THREE.Triangle();

  const _color = new THREE.Vector3();

  class MeshSurfaceSampler {

    constructor(mesh) {

      let geometry = mesh.geometry;

      if (!geometry.isBufferGeometry || geometry.attributes.position.itemSize !== 3) {

        throw new Error('THREE.MeshSurfaceSampler: Requires BufferGeometry triangle mesh.');

      }

      if (geometry.index) {

        console.warn('THREE.MeshSurfaceSampler: Converting geometry to non-indexed BufferGeometry.');
        geometry = geometry.toNonIndexed();

      }

      this.geometry = geometry;
      this.randomFunction = Math.random;
      this.positionAttribute = this.geometry.getAttribute('position');
      this.colorAttribute = this.geometry.getAttribute('color');
      this.weightAttribute = null;
      this.distribution = null;

    }

    setWeightAttribute(name) {

      this.weightAttribute = name ? this.geometry.getAttribute(name) : null;
      return this;

    }

    build() {

      const positionAttribute = this.positionAttribute;
      const weightAttribute = this.weightAttribute;
      const faceWeights = new Float32Array(positionAttribute.count / 3); // Accumulate weights for each mesh face.

      for (let i = 0; i < positionAttribute.count; i += 3) {

        let faceWeight = 1;

        if (weightAttribute) {

          faceWeight = weightAttribute.getX(i) + weightAttribute.getX(i + 1) + weightAttribute.getX(i + 2);

        }

        _face.a.fromBufferAttribute(positionAttribute, i);

        _face.b.fromBufferAttribute(positionAttribute, i + 1);

        _face.c.fromBufferAttribute(positionAttribute, i + 2);

        faceWeight *= _face.getArea();
        faceWeights[i / 3] = faceWeight;

      } // Store cumulative total face weights in an array, where weight index
      // corresponds to face index.


      this.distribution = new Float32Array(positionAttribute.count / 3);
      let cumulativeTotal = 0;

      for (let i = 0; i < faceWeights.length; i++) {

        cumulativeTotal += faceWeights[i];
        this.distribution[i] = cumulativeTotal;

      }

      return this;

    }

    setRandomGenerator(randomFunction) {

      this.randomFunction = randomFunction;
      return this;

    }

    sample(targetPosition, targetNormal, targetColor) {

      const cumulativeTotal = this.distribution[this.distribution.length - 1];
      const faceIndex = this.binarySearch(this.randomFunction() * cumulativeTotal);
      return this.sampleFace(faceIndex, targetPosition, targetNormal, targetColor);

    }

    binarySearch(x) {

      const dist = this.distribution;
      let start = 0;
      let end = dist.length - 1;
      let index = - 1;

      while (start <= end) {

        const mid = Math.ceil((start + end) / 2);

        if (mid === 0 || dist[mid - 1] <= x && dist[mid] > x) {

          index = mid;
          break;

        } else if (x < dist[mid]) {

          end = mid - 1;

        } else {

          start = mid + 1;

        }

      }

      return index;

    }

    sampleFace(faceIndex, targetPosition, targetNormal, targetColor) {

      let u = this.randomFunction();
      let v = this.randomFunction();

      if (u + v > 1) {

        u = 1 - u;
        v = 1 - v;

      }

      _face.a.fromBufferAttribute(this.positionAttribute, faceIndex * 3);

      _face.b.fromBufferAttribute(this.positionAttribute, faceIndex * 3 + 1);

      _face.c.fromBufferAttribute(this.positionAttribute, faceIndex * 3 + 2);

      targetPosition.set(0, 0, 0).addScaledVector(_face.a, u).addScaledVector(_face.b, v).addScaledVector(_face.c, 1 - (u + v));

      if (targetNormal !== undefined) {

        _face.getNormal(targetNormal);

      }

      if (targetColor !== undefined && this.colorAttribute !== undefined) {

        _face.a.fromBufferAttribute(this.colorAttribute, faceIndex * 3);

        _face.b.fromBufferAttribute(this.colorAttribute, faceIndex * 3 + 1);

        _face.c.fromBufferAttribute(this.colorAttribute, faceIndex * 3 + 2);

        _color.set(0, 0, 0).addScaledVector(_face.a, u).addScaledVector(_face.b, v).addScaledVector(_face.c, 1 - (u + v));

        targetColor.r = _color.x;
        targetColor.g = _color.y;
        targetColor.b = _color.z;
      }
      return this;

    }

  }

  THREE.MeshSurfaceSampler = MeshSurfaceSampler;

})();

运行步骤，在桌面新建个文本文档，将代码全部复制到文档后保存，然后重命名将.txt文件修改成.html文件最后点击文件就能运行成功啦，运行成功了快快发给爱慕女孩，说不定就能收获到爱情啦。(如果有不想动手的小伙伴可以私聊博主获取哦！！！！)

获取途径：https://download.csdn.net/download/javayoungcoolboy/86936685

毕设专栏介绍

☕️最近开设的专栏整理了很多优秀Java项目，详细的分享了设计思路，计算机毕业生可以参考学习数据库设计，论文写作，项目优化等，每一篇博文均整理了相关系统可以设计的具体模块，以及详细的业务讲解，祝大家学业进步！

五、项目优化升级

📝希望有基础的学生可以自己做出更优质的项目

开发建议：尽量基于SpringBoot框架搭建项目，因为潮流，简单，方便，易用！

数据库设计：参考已有的类似项目设计数据库，深入挖掘自己选题要解决什么问题，即设计什么数据表

项目升级：前端的话有条件使用vue +element等潮流的前端框架，前后端分离开发; 后台引入中间件如消息队列+缓存Redis , 微信支付（根据业务定），Jwt单点登录，爬虫，算法等！

🐱‍👤希望我们未来更高处见……