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

简介: 使用HTML、CSS和JavaScript实现了一个三维网格采样器`MeshSurfaceSampler`,适用于任意浏览器,推荐谷歌。代码创建了一个类,从缓冲几何体的三角形网格中进行随机采样。提供了设置权重属性、构建分布和自定义随机数生成器的功能。用户只需将代码复制到文本文档并保存为HTML文件,即可运行。适合编程爱好者尝试,也可分享给他人。

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文件最后点击文件就能运行成功啦,运行成功了快快发给爱慕女孩,说不定就能收获到爱情啦。(如果有不想动手的小伙伴可以私聊博主获取哦!!!!)

相关文章
超好看的照片墙HTML源码
超好看的照片墙HTML源码
315 10
超好看的照片墙HTML源码
|
JavaScript 前端开发
Node-RED 规则引擎重构:添加自定义节点
Node-RED 规则引擎重构:添加自定义节点
641 1
|
网络架构 网络协议
如何查看路由器的mac和计算机的mac
如何查看路由器的mac和计算机的mac 一、查看路由器的mac     方法一: 直接看路由器的背面,如下图,即可看到MAC地址   打开命令提示符窗口,输入ipconfig,找到网关地址,如192.168.1.1 3 再在命令提示符窗口中输入 arp -a 找到对应的ip地址 192.168.1.1 后的地址即为无线路由MAC地址     二、查看计算机的mac       cmd命令窗口中输入ipconfig/all命令即可查看。
3513 0
html动态爱心代码【一】(附源码)
html动态爱心代码【一】(附源码)
13310 0
爱心代码---html代码合集他来咯(1)
爱心代码---html代码合集他来咯
647 0
|
编译器
html动态爱心代码【三】(附源码)
html动态爱心代码【三】(附源码)
864 0
|
前端开发 JavaScript 程序员
程序员教你用代码制作圣诞树,正好圣诞节拿去送给女神给她个惊喜
使用HTML、CSS和JavaScript实现了一个圣诞树效果,包括一个闪烁的圣诞树和一个动态的光斑。代码包含一个&lt;div&gt;元素作为遮罩,一个&lt;canvas&gt;元素绘制星星动画,以及一个SVG元素绘制圣诞树。页面还包含一个提示用户先点赞再观看的提示。此效果适用于任何浏览器,推荐使用谷歌浏览器。提供了一段HTML代码,可以直接复制粘贴到文件中并以.html格式打开查看效果。
356 0
爱心代码---html代码合集他来咯(2)
爱心代码---html代码合集他来咯
677 0
|
前端开发 JavaScript
html动态爱心代码【四】(附源码)
html动态爱心代码【四】(附源码)
1830 0
最新的爱心代码已就绪 发射成功 速来领取啦
最新的爱心代码已就绪 发射成功 速来领取啦
602 0