本文章分为两部分:
第一部分为实现效果展示,第二部分是实现跳动爱心源码。
关注微信公众号: ClassmateJie

跳动的爱心效果展示


关注微信公众号【ClassmateJie】获取完整源码,回复爱心代码

实现步骤

1.建一个html文件,代码如下:

爱心跳动,3D拖拽搬<!--  -->(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 " />
  • 建立一个css文件
  • body {background: rgb(0, 0, 0);overflow: hidden;margin: 0;/* background-color: #000 !important; */}
    1. 运行html文件

    获取源码直接运行

    关注微信公众号「ClassmateJie」 更多惊喜等待你的发掘