菜单 搜索
首页 前端知识 【Three.js】粒子爱心

【Three.js】粒子爱心

2024-05-27 09:05:13 前端知识 前端哥 813 419 我要收藏

文章目录

  • 前言
  • 三维心形函数
  • 发光shader
  • 使用对象键值对去重思路
  • 最后
  • 最后的最后——完整源码
  • 相关项目

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/9b12388fbf9a4845ab6327d76c28a5f5.png

前言

最近很火的电视剧《点燃我，温暖你》男主角学神和女主角课代表计算机考试实现的跳动的爱心，那我也来做一个粒子爱心送给女朋友。因为不想直接加载心形的模型文件作为基础，所以主要思路是三维直角坐标系内，通过心形函数绘制图形。然后呢，细化到空间中坐标粒子的发光闪烁特效。实现思路讲完了，讲一下性能优化，因为通过函数找心形表面粒子的过程是需要遍历的（没办法令函数直接 = 0，只能取＜0的数据点，取最大、最小值，再去重），多层遍历嵌套会降低页面加载速度，所以这里的思想是构建对象，因为去掉了一层循环，肯定是快很多的，只牺牲一点点内存构建对象。由于对象的键值对查找几乎不用时间，不受下标影响，就可以将性能发挥到极致。

三维心形函数

// Get surface points
// Calc xRange: [-1.12, 1.12]; yRange: [-0.96, 1.2]; zRange: [-0.64, 0.64]
// f() = (x^2 + 9/4 * z^2 + y^2 + 1)^3 - x^2 * y^3 - 9/80 * z^2 * y^3
const func = Math.pow(Math.pow(x, 2) + 9 / 4 * Math.pow(z, 2) + Math.pow(y, 2) - 1, 3) - Math.pow(x, 2) * Math.pow(y, 3) - 9 / 80 * Math.pow(z, 2) * Math.pow(y, 3)
if (func == 0) {
	// you know
}

发光shader

<script type="x-shader/x-vertex" id="vertexshader">
 varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D baseTexture;
  uniform sampler2D bloomTexture;
  varying vec2 vUv;
  void main() {
    gl_FragColor = (texture2D(baseTexture, vUv) + vec4(1.0) * texture2D(bloomTexture, vUv));
  }
</script>

使用对象键值对去重思路

function objArrDistinct(objArr) {
  let resultArr = [], itemKeyVal = {}
  objArr.forEach(item => {
    if (!itemKeyVal[`${item.x}_${item.y}_${item.z}`]) {
      itemKeyVal[`${item.x}_${item.y}_${item.z}`] = true
      resultArr.push(item)
    }
  })
  return resultArr
}

最后

对比一下，谁的爱心更好看呢？(●ˇ∀ˇ●)

最后的最后——完整源码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Heart</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="shortcut icon" href="../../svg/heart.svg">
  <link type="text/css" rel="stylesheet" href="../../main.css">
  <style type="text/css"></style>
</head>
<body>
  <script type="x-shader/x-vertex" id="vertexshader">
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>
  <script type="x-shader/x-fragment" id="fragmentshader">
    uniform sampler2D baseTexture;
    uniform sampler2D bloomTexture;
    varying vec2 vUv;
    void main() {
      gl_FragColor = (texture2D(baseTexture, vUv) + vec4(1.0) * texture2D(bloomTexture, vUv));
    }
  </script>
  <script type="module">
    import * as THREE from '../../build/three.module.js'
    import Stats from '../jsm/libs/stats.module.js'
    import { OrbitControls } from '../jsm/controls/OrbitControls.js'
    import { EffectComposer } from '../jsm/postprocessing/EffectComposer.js'
    import { RenderPass } from '../jsm/postprocessing/RenderPass.js'
    import { ShaderPass } from '../jsm/postprocessing/ShaderPass.js'
    import { UnrealBloomPass } from '../jsm/postprocessing/UnrealBloomPass.js'
    import { FXAAShader } from '../jsm/shaders/FXAAShader.js'

    let renderer, scene, camera, controls, stats, pointLight
    let transform = new THREE.Object3D()
    let result = []
    let heartMesh
    let time = 0
    let bloomComposer, finalComposer
    const materials = {}
    const ENTIRE_SCENE = 0
    const BLOOM_SCENE = 1
    const bloomLayer = new THREE.Layers()
    bloomLayer.set(BLOOM_SCENE)
    const darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' })

    initThree()
    initBloom()
    animate()

    function randomSort(a, b) {
      return Math.random() > 0.5 ? -1 : 1
    }
    function darkenNonBloomed(obj) {
      if (obj instanceof THREE.Scene) {
        materials.scene = obj.background
        obj.background = null
        return
      }
      if (obj instanceof THREE.Sprite || (obj.isMesh && bloomLayer.test(obj.layers) === false)) {
        materials[obj.uuid] = obj.material
        obj.material = darkMaterial
      }
    }
    function restoreMaterial(obj) {
      if (obj instanceof THREE.Scene) {
        obj.background = materials.scene
        delete materials.background
        return
      }
      if (materials[obj.uuid]) {
        obj.material = materials[obj.uuid]
        delete materials[obj.uuid]
      }
    }
    function initBloom() {
      const effectFXAA = new ShaderPass(FXAAShader)
      effectFXAA.uniforms['resolution'].value.set(0.6 / window.innerWidth, 0.6 / window.innerHeight)
      effectFXAA.renderToScreen = true
      const renderScene = new RenderPass(scene, camera)
      const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85)
      bloomPass.threshold = 0
      bloomPass.strength = 1.5
      bloomPass.radius = 0
      bloomComposer = new EffectComposer(renderer)
      bloomComposer.renderToScreen = false
      bloomComposer.addPass(renderScene)
      bloomComposer.addPass(bloomPass)
      bloomComposer.addPass(effectFXAA)
      const finalPass = new ShaderPass(
        new THREE.ShaderMaterial({
          uniforms: {
            baseTexture: { value: null },
            bloomTexture: { value: bloomComposer.renderTarget2.texture },
          },
          vertexShader: document.getElementById('vertexshader').textContent,
          fragmentShader: document.getElementById('fragmentshader').textContent,
          defines: {},
        }),
        'baseTexture'
      )
      finalPass.needsSwap = true
      finalComposer = new EffectComposer(renderer)
      finalComposer.addPass(renderScene)
      finalComposer.addPass(finalPass)
      finalComposer.addPass(effectFXAA)
    }
    function initThree() {
      stats = new Stats()
      // document.body.appendChild(stats.domElement)
      renderer = new THREE.WebGLRenderer({ antialias: false })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(renderer.domElement)
      scene = new THREE.Scene()
      scene.background = new THREE.Color(0x111111)
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
      camera.position.set(3, 3, 6)
      camera.lookAt(0, 0, 0)
      initOrbit()
      initLight()
      // initHelper()
      initHeart()
      toggleBloom()
      window.addEventListener('resize', onWindowResize)
      window.addEventListener('orientationchange', onWindowResize)
    }
    function toggleBloom() {
      scene.traverse((obj) => {
        if (obj.name === 'Heart') {
          obj.layers.toggle(1)
        }
      })
    }
    function initOrbit() {
      controls = new OrbitControls(camera, renderer.domElement)
      controls.enablePan = false
      controls.enableZoom = false
      controls.enableDamping = true
      controls.dampingFactor = 0.05
      controls.target.set(0, 0, 0)
      controls.autoRotate = true
    }
    function initLight() {
      pointLight = new THREE.PointLight('#ffffff')
      scene.add(pointLight)
    }
    function initHelper() {
      const mainAxesHelper = new THREE.AxesHelper(10000)
      scene.add(mainAxesHelper)
    }
    function initHeart() {
      const arr_xyz = [] // All points
      let arr_xy = [] // Points of x,y
      let arr_yz = [] // Points of y,z
      let arr_xz = [] // Points of x,z
      const unitSize = 0.01 // unit size
      const unitSpacing = 0.04 // unit spacing
      // Get surface points
      // Calc xRange: [-1.12, 1.12]; yRange: [-0.96, 1.2]; zRange: [-0.64, 0.64]
      // let xmax = 0
      // let xmin = 0
      // let ymax = 0
      // let ymin = 0
      // let zmax = 0
      // let zmin = 0
      // arr_xyz.map(v => {
      //   xmax = Math.max(xmax, v.x)
      //   xmin = Math.min(xmin, v.x)
      //   ymax = Math.max(ymax, v.y)
      //   ymin = Math.min(ymin, v.y)
      //   zmax = Math.max(zmax, v.z)
      //   zmin = Math.min(zmin, v.z)
      // })
      // console.log(xmax, xmin, ymax, ymin, zmax, zmin)
      let kvx = {}
      let kvy = {}
      let kvz = {}
      for (let x = -1.12; x <= 1.12; x += unitSpacing) {
        for (let y = -0.96; y <= 1.2; y += unitSpacing) {
          for (let z = -0.64; z <= 0.64; z += unitSpacing) {
            x = Number(x.toFixed(2))
            y = Number(y.toFixed(2))
            z = Number(z.toFixed(2))
            // f() = (x^2 + 9/4 * z^2 + y^2 + 1)^3 - x^2 * y^3 - 9/80 * z^2 * y^3
            const func = Math.pow(Math.pow(x, 2) + 9 / 4 * Math.pow(z, 2) + Math.pow(y, 2) - 1, 3) - Math.pow(x, 2) * Math.pow(y, 3) - 9 / 80 * Math.pow(z, 2) * Math.pow(y, 3)
            if (func < 0) {
              arr_xyz.push({ x, y, z })
              kvx[`${y}_${z}`] = kvx[`${y}_${z}`] ? kvx[`${y}_${z}`].concat([x]) : [x]
              kvy[`${x}_${z}`] = kvy[`${x}_${z}`] ? kvy[`${x}_${z}`].concat([y]) : [y]
              kvz[`${x}_${y}`] = kvz[`${x}_${y}`] ? kvz[`${x}_${y}`].concat([z]) : [z]
              arr_xy.push({ x, y, max_z: 0, min_z: 0 })
              arr_yz.push({ z, y, max_x: 0, min_x: 0 })
              arr_xz.push({ x, z, max_y: 0, min_y: 0 })
            }
          }
        }
      }
      arr_xy = objArrDistinct(arr_xy)
      arr_yz = objArrDistinct(arr_yz)
      arr_xz = objArrDistinct(arr_xz)
      // Filter out the maximum and minimum axial value
      arr_xy.forEach(xy => {
        xy.min_z = Math.min(...kvz[`${xy.x}_${xy.y}`])
        xy.max_z = Math.max(...kvz[`${xy.x}_${xy.y}`])
      })
      arr_yz.forEach(yz => {
        yz.min_x = Math.min(...kvx[`${yz.y}_${yz.z}`])
        yz.max_x = Math.max(...kvx[`${yz.y}_${yz.z}`])
      })
      arr_xz.forEach(xz => {
        xz.min_y = Math.min(...kvy[`${xz.x}_${xz.z}`])
        xz.max_y = Math.max(...kvy[`${xz.x}_${xz.z}`])
      })
      // Filter out the surface points => result
      arr_xy.map(xy => {
        result.push({ x: xy.x, y: xy.y, z: xy.max_z })
        result.push({ x: xy.x, y: xy.y, z: xy.min_z })
      })
      arr_yz.map(yz => {
        result.push({ z: yz.z, y: yz.y, x: yz.max_x })
        result.push({ z: yz.z, y: yz.y, x: yz.min_x })
      })
      arr_xz.map(xz => {
        result.push({ x: xz.x, z: xz.z, z: xz.max_y })
        result.push({ x: xz.x, z: xz.z, z: xz.min_y })
      })
      result = objArrDistinct(result)
      // Set InstancedMesh
      const geometry = new THREE.BoxBufferGeometry(unitSize, unitSize, unitSize)
      const material = new THREE.MeshBasicMaterial()
      heartMesh = new THREE.InstancedMesh(geometry, material, result.length)
      heartMesh.name = 'Heart'
      result = result.sort(randomSort)
      result.map((res, i) => {
        transform.position.set(res.x, res.y, res.z)
        transform.updateMatrix()
        heartMesh.setMatrixAt(i, transform.matrix)
        heartMesh.setColorAt(i, new THREE.Color(`rgb(${Math.floor(255 * Math.random())}, 0, 0)`))
      })
      scene.add(heartMesh)
    }
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }
    /**
     * Distinct 3d point (x, y, z)
     */
    function objArrDistinct(objArr) {
      let resultArr = [], itemKeyVal = {}
      objArr.forEach(item => {
        if (!itemKeyVal[`${item.x}_${item.y}_${item.z}`]) {
          itemKeyVal[`${item.x}_${item.y}_${item.z}`] = true
          resultArr.push(item)
        }
      })
      return resultArr
    }
    function blingbling() {
      const t = Date.now() * 0.005
      result.map((res, i) => {
        const scale = 1.2 * (0.5 * Math.sin(t + i * 0.1) + 0.5) // range of [0, 1.2]
        transform.position.set(res.x, res.y, res.z)
        transform.scale.set(scale, scale, scale)
        transform.updateMatrix()
        heartMesh.setMatrixAt(i, transform.matrix)
      })
      heartMesh.instanceMatrix.needsUpdate = true
    }
    function animate() {
      blingbling()
      stats.update()
      controls.update()
      scene.traverse(darkenNonBloomed)
      bloomComposer.render()
      scene.traverse(restoreMaterial)
      finalComposer.render()
      const vector = camera.position.clone()
      pointLight.position.set(vector.x, vector.y, vector.z)
      requestAnimationFrame(animate)
    }
  </script>
</body>
</html>

相关项目

🚩——坦克大战
📦—— 立体库房
🎄—— 圣诞树
✅—— 程序员升职记
🏀—— 投个篮吧
💖——粒子爱心

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9622.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

解决fixed定位z-index层级无效问题

2024-06-01 10:06:45

Node.js毕业设计基于HTML5的互动游戏新闻网站的设计与实现（Express 附源码）

2024-06-01 10:06:33

【前端问题集】安卓手机H5页面加粗失效

2024-06-01 10:06:33

HTML5(二)——获取用户位置Geolocation，万字解析

2024-06-01 10:06:32

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

由于一个完整的购物商城代码涉及多个方面（如前端、后端、数据库等），并且每种语言都有其特定的用途和优势，我将为你提供简化的示例代码，分别用前端（HTML/CSS/JavaScript）、后端（Pytho

2024-06-01 10:06:04

web前端之引入外部svg文件、html引入.svg文件、等比缩放、解决裁剪、解决若依框架无法使用img选入svg文件问题、命名空间、阿里巴巴尺量图、object标签、embed标签、iframe标签

2024-06-01 10:06:00

微信小程序实现带刻度简易仪表盘

2024-06-01 10:06:53

大家推荐的文章
1

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
2

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
3

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
4

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
5

UE4.27支持HTML5

2024-05-07 13:05:261000
6

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
7

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
8

jQuery事件处理

2024-03-12 01:03:321000
9

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
10

ECharts 饼状图颜色设置

2024-02-16 14:02:001000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！