Three.js——粒子效果、粒子水波、粒子组成立方体

个人简介

👀个人主页: 前端杂货铺
开源项目: rich-vue3 (基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL)
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍖开源 rich-vue3 🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

内容参考链接
WebGL专栏WebGL 入门
Three.js(一)创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
Three.js(二)scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机
Three.js(三)聚光灯、环境光、点光源、平行光、半球光
Three.js(四)基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质
Three.js(五)Three.js——二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字
Three.js(六)Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器
Three.js(七)Three.js——骨骼动画
Three.js(八)Three.js——基础纹理、凹凸纹理、法向贴图、环境贴图、canvas贴图

文章目录

    • 前言
    • 一、粒子效果
    • 二、粒子水波
    • 三、粒子组成立方体
    • 总结

前言

大家好,这里是前端杂货铺。

上篇文章我们学习了 基础纹理、凹凸纹理、法向贴图、环境贴图、canvas贴图。接下来,我们继续我们 three.js 的学习!

在学习的过程中,如若需要深入了解或扩展某些知识,可以自行查阅 => three.js官方文档。


一、粒子效果

Sprite 精灵,是一个总是面朝着摄像机的平面,通常含有使用一个半透明的纹理。

new THREE.Sprite( material : Material );
参数名称描述
material(可选值)是 SpriteMaterial 的一个实例。 默认值是一个白色的 SpriteMaterial

SpriteMaterial 点精灵材质,一种使用 Sprite 的材质。

new THREE.SpriteMaterial( parameters : Object )
参数名称描述
parameters(可选) 用于定义材质外观的对象,具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从 Material 继承的任何属性)。

接下来,我们创建一个 10 x 10 的粒子效果,通过精灵和点精灵材质构建,添加到场景中。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>*{ margin: 0; padding: 0;}</style>
    <script src="../lib/three/three.js"></script>
</head>

<body>
<script>
    const clock = new THREE.Clock();
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 200);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    renderer.setClearColor(0xffffff);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    scene.add(spotLight);

    createNormalSprite();

    // 基础粒子
    function createNormalSprite() {
        for (let i = -5; i < 5; i++) {
            for (let j = -5; j < 5; j++) {
                const material  = new THREE.SpriteMaterial({
                    color: Math.random() * 0xffff
                })
                const sprite = new THREE.Sprite(material);
                sprite.position.set(i * 10, j * 10, 0);
                sprite.scale.set(2, 2, 2);
                scene.add(sprite);
            }
        }
    }


    // createSystemSprite();
    // 粒子系统创建粒子
    function createSystemSprite() {
        const geometry = new THREE.Geometry();
        const material = new THREE.PointCloudMaterial({
            size: 4,
            vertexColors: true
        })
        for (let i = -5; i < 5; i++) {
            for (let j = -5; j < 5; j++) {
                // 坐标
                geometry.vertices.push(new THREE.Vector3(i * 10, j * 10, 0));
                // 颜色
                geometry.colors.push(new THREE.Color(Math.random() * 0xffffff));
            }
        }
        scene.add(new THREE.PointCloud(geometry, material));
    }

    const animation = () => {
        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

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

</html>

在这里插入图片描述


二、粒子水波

接下来,我们基于上述的粒子效果和 canvas 纹理贴图,制作出水波的效果。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>*{ margin: 0; padding: 0;}</style>
    <script src="../lib/three/three.js"></script>
</head>

<body>
<script>
    const clock = new THREE.Clock();
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 50, 200);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    scene.add(spotLight);

    // 使用canvas贴图实现圆形纹理
    function getSprite() {
        const canvas = document.createElement('canvas');
        const size = 8;
        canvas.width = size * 2;
        canvas.height = size * 2;

        const c = canvas.getContext('2d');
        c.fillStyle = '#00ff00';
        c.arc(size, size, size / 1.5, 0, Math.PI * 2);
        c.fill();

        const texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        return texture;
    }

    // 存储粒子内容
    const spriteList = [];

    // 粒子数量
    const total = 20;

    createNormalSprite();

    // 基础粒子
    function createNormalSprite() {
        const material  = new THREE.SpriteMaterial({
            color: 0x008800,
            map: getSprite()
        })

        for (let i = -total; i < total; i++) {
            for (let j = -total; j < total; j++) {
                const sprite = new THREE.Sprite(material);
                sprite.position.set(i * 10, 0, j * 10);
                spriteList.push(sprite);
                scene.add(sprite);
            }
        }
    }

    // 变化的速度
    const speed = 0.1;
    // 波浪的高度
    const height = 5;
    // 波浪的幅度
    const step = 0.3;

    let status = 0;

    const animation = () => {
        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);

        let index = -1;

        // 通过 sin 曲线,设置点的位置
        for (let x = 0; x < total * 2; x++) {
            for (let y = 0; y < total * 2; y++) {
                index++;
                spriteList[index].position.y = ((Math.sin(x + status) * step) * height + (Math.sin(y + status) * step) * height);

                // 缩放系数
                const scaleValue = (Math.sin(x + status) * step) + 1;
                spriteList[index].scale.set(scaleValue, scaleValue, scaleValue);
            }
        }

        status += speed;
    }

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

</html>

水波效果


三、粒子组成立方体

接下来,我们实现粒子组成立方体,组成法向材质的立方体。

这需要我们使用 canvas 贴图实现圆形纹理、使用法向材质创建几何体、随机设置点的位置创建点云、使用 TWEEN 实现动画效果等

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>*{ margin: 0; padding: 0;}</style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/tween.min.js"></script>
  <script src="../lib/three/dat.gui.js"></script>
</head>

<body>
<script>
  const clock = new THREE.Clock();
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机 视野角度FOV、长宽比、近截面、远截面
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机位置
  camera.position.set(0, 30, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  scene.add(spotLight);

  // 使用canvas贴图实现圆形纹理
  function getSprite() {
    const canvas = document.createElement('canvas');
    const size = 8;
    canvas.width = size * 2;
    canvas.height = size * 2;

    const c = canvas.getContext('2d');
    c.fillStyle = '#00ff00';
    c.arc(size, size, size / 1.5, 0, Math.PI * 2);
    c.fill();

    const texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
  }

  const geometry = new THREE.BoxGeometry(10, 10, 10, 10, 10, 10);

  // 存储原始坐标
  const indexList = [];

  // 设定当前随机的范围
  const range = 100;

  // gui 控制
  const controls = {
    polymeric: false, // 是否要组合成立方体
    completeMesh: false, // 组合之后是否要显示立方体
    showMesh: false // 是否要现在显示立方体
  }

  // 创建随机位置
  function createRandomPosition(i) {
    geometry.vertices[i].x = Math.random() * range - range / 2;
    geometry.vertices[i].y = Math.random() * range - range / 2;
    geometry.vertices[i].z = Math.random() * range - range / 2;
  }

  let cloud;

  // 创建法向材质的几何体
  function createMesh() {
    cloud = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10, 10, 10), new THREE.MeshNormalMaterial());
    scene.add(cloud);
  }

  function createPointCloud() {
    let listen = false;
    for (let i = 0; i < geometry.vertices.length; i++) {
      indexList.push({
        x: geometry.vertices[i].x,
        y: geometry.vertices[i].y,
        z: geometry.vertices[i].z,
      })
      // 随机坐标
      createRandomPosition(i);

      // 聚合点 => 体
      if (controls.polymeric) {
        // 聚合的动画为 2s
        const tween = new TWEEN.Tween(geometry.vertices[i]).to(indexList[i], 2000).start();
        if (!listen) {
          listen = true;

          // 动画完成时,创建法向材质的几何体
          if (controls.completeMesh) {
            tween.onComplete(() => {
              // 先移除点几何体
              scene.remove(cloud);
              createMesh();
            })
          }
        }
      }
    }

    // 点云材质
    const material = new THREE.PointCloudMaterial({
      size: 2,
      transparent: true,
      map: getSprite()
    });

    // 点云
    cloud = new THREE.PointCloud(geometry, material);
    cloud.sortParticles = true;
    scene.add(cloud);
  }

  createPointCloud();

  const gui = new dat.GUI();

  const onChange = () => {
    scene.remove(cloud);
    controls.showMesh ? createMesh() : createPointCloud();
  }

  // gui 控制
  for (const key in controls) {
    gui.add(controls, key).onChange(onChange);
  }

  const animation = () => {
    scene.rotation.y += 0.01;
    // 渲染
    renderer.render(scene, camera);
    TWEEN.update();
    requestAnimationFrame(animation);
  }

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

</html>

粒子组成立方体


总结

本篇文章我们讲解了粒子的基本使用,包括 粒子效果、粒子水波、粒子组成立方体。

更多内容扩展请大家自行查阅 => three.js官方文档,真心推荐读一读!!

好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!


参考资料:

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者:慕课网_yancy】

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/690158.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux卸载RocketMQ教程【带图文命令巨详细】

巨详细Linux卸载RocketMQ教程 #查询rocketmq进程 ps -ef | grep rocketmq #杀掉相关进程 kill -9 进程id #查找安装目录 find / -name runbroker.sh #删除rocketMQ目录 rm -rf 安装目录框起来的就是进程id&#xff0c;全部杀掉 这里就是我的安装目录&#xff0c;我的删除命令…

【进程调度的基本过程】初步认识进程和线程的区别与联系:计算机是如何工作的

​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f43a;一.冯诺依曼体系结构 认识计算机的祖师爷 -- 冯诺依曼 冯诺依曼&#xff08;John von Neumann&#xff0c;1903年12⽉28⽇-1957年2⽉8⽇&…

北航第四次数据结构与程序设计编程题复习

到期末了&#xff0c;所以再来复习一下以前的作业。 北航第四次数据结构与程序设计编程题 一、栈操作&#xff08;栈-基本题&#xff09;二、C程序括号匹配检查三、计算器&#xff08;表达式计算-后缀表达式实现&#xff0c;结果为浮点&#xff09;四、文本编辑操作模拟&#…

Flutter 使用ffigen生成ffmpeg的dart接口

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频 第六章 桌面端使用texture_rgba_renderer渲染视频 第七章 使用ff…

数据挖掘--引论

数据挖掘--引论 数据挖掘--认识数据 数据挖掘--数据预处理 数据挖掘--数据仓库与联机分析处理 数据挖掘--挖掘频繁模式、关联和相关性&#xff1a;基本概念和方法 数据挖掘--分类 数据挖掘--聚类分析&#xff1a;基本概念和方法 1.2什么是数据挖掘 数据挖掘是从大量数据…

【Python】成功解决SyntaxError: invalid syntax

【Python】成功解决SyntaxError: invalid syntax 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&am…

QT Udp广播实现设备发现

测试环境 本文选用pc1作为客户端&#xff0c;pc2&#xff0c;以及一台虚拟机作为服务端。 pc1,pc2(客户端&#xff09;: 虚拟机&#xff08;服务端)&#xff1a; 客户端 原理&#xff1a;客户端通过发送广播消息信息到ip:255.255.255.255(QHostAddress::Broadcast),局域网…

使用MATLAB的BP神经网络进行数据分类任务(简单版)

BP神经网络&#xff0c;即反向传播&#xff08;Backpropagation&#xff09;神经网络&#xff0c;是一种多层前馈神经网络&#xff0c;它通过反向传播算法来更新网络权重。这种网络结构特别适合于分类和回归任务。 MATLAB环境设置 在开始之前&#xff0c;请确保MATLAB环境已经…

smbmap一键查扫描SMB共享信息(KALI工具系列十八)

目录 1、KALI LINUX 简介 2、smbmap工具简介 3、在KALI中使用smbmap 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、操作示例 4.1 寻找共享目录 4.2 指定目标主机 4.3 指定共享目录 4.4 带密码访问 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功…

LeetCode 7- 整数反转

给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [-231, 231 - 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 1&#xff1a; 输入&…

【计算机网络】对应用层协议中HTTPS协议的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

让 AI 写高考作文丨10 款大模型 “交卷”,实力水平如何?

文章部分素材来源 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 前言 在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;已不再是遥不可及的未来科技&#xff0c;而是逐渐融入我们日常生活的实用工具。从智能语音助手到自动驾驶汽车&#xff0c…

超详解——识别None——小白篇

目录 1. 内建类型的布尔值 2. 对象身份的比较 3. 对象类型比较 4. 类型工厂函数 5. Python不支持的类型 总结&#xff1a; 1. 内建类型的布尔值 在Python中&#xff0c;布尔值的计算遵循如下规则&#xff1a; None、False、空序列&#xff08;如空列表 []&#xff0c;空…

【全部更新完毕】2024全国大学生数据统计与分析竞赛B题思路代码文章教学数学建模-电信银行卡诈骗的数据分析

电信银行卡诈骗的数据分析 摘要 电信银行卡诈骗是当前社会中严重的犯罪问题&#xff0c;分析电信银行卡交易数据&#xff0c;找出高风险交易特征&#xff0c;建立预测模型&#xff0c;将有助于公安部门和金融机构更好地防范诈骗行为&#xff0c;保障用户的财产安全。 针对问…

RTOS笔记--信号量+互斥量+事件组

信号量的本质 信号量是一个特殊的队列&#xff0c;但并不涉及数据传输&#xff0c;因此不需要读写位置和发送者列表&#xff0c;但是多了一个最大计数值。 个人理解&#xff1a;信号量类似一个加入了保护机制的全局变量&#xff0c;不会因为中断切换的原因而导致数据出错。 信号…

SAP HCM OPT函数作用

导读 INTRODUCTION OPT函数&#xff1a;SAP HCM工资核算是很多函数的汇总集&#xff0c;原有有兴趣问过SAP的人为什么SCHEMA需要这样设计&#xff0c;SAP的人说是用汇编的逻辑设计的&#xff0c;当时是尽可能用机器语言加速速度读取&#xff0c;每个函数都有对应的业务逻辑代码…

使用python绘制桑基图

使用python绘制桑基图 桑基图效果代码 桑基图 桑基图&#xff08;Sankey Diagram&#xff09;是一种用来表示流动&#xff08;如能源、资金、材料等&#xff09;在不同实体之间转移的图表。 每个流的宽度与流量成正比&#xff0c;通常用于显示能量或成本流动的分布情况。 桑基…

从大到小吗?-分支c++

题目描述 给出 4 个整数&#xff0c;a , b , c , d 。 判断这四个数字是否满足从大到小。 输入 输入 4 个整数&#xff0c;a , b , c , d 。 输出 输出 Yes 或者 No 。 样例输入 4 3 2 1 样例输出 Yes 提示 分析&#xff1a; 这道题十分的简单&#xff0c;只需判断…

pdf文件如何防篡改内容

PDF文件防篡改内容的方法有多种&#xff0c;以下是一些常见且有效的方法&#xff0c;它们可以帮助确保PDF文件的完整性和真实性&#xff1a; 加密PDF文档&#xff1a; 原理&#xff1a;通过设置密码来保护PDF文档&#xff0c;防止未经授权的访问和修改。注意事项&#xff1a;密…

FreeSurFer的recon-all处理流——学习记录

官方网址&#xff1a;ReconAllTableStableV6.0 - Free Surfer Wiki &#xff08;1&#xff09;颅骨剥离skullstrip 颅骨剥离后生成文件&#xff1a;/mri/brainmask.mgz &#xff08;2&#xff09;图像配准canorm Freesurfer图像配准&#xff1a;将 mri/nu.mgz 体积与 FREESU…