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) {// 聚合的动画为 2sconst 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】

在这里插入图片描述


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DevOps后时代,构建基于价值流的平台化工程

本文来自腾讯蓝鲸智云社区用户: CanWay 平台化工程涉及双重核心意义。一方面&#xff0c;是类似利用IDE等工具提高工程师效率的平台化工程&#xff0c;如GitOps或命令行调度般便捷。然而&#xff0c;本文重点探讨的是基于价值流的平台化工程&#xff0c;尤其针对传统金融行业&a…

wordpress 使用api发布文章

1.安装插件 在/wp-content/plugins/目录执行以下命令 $ sudo git clone https://github.com/WP-API/Basic-Auth.git 2.Python脚本 import requestsurl http://www.ziyuanwang.online/wp-json/wp/v2/postsuser adminpassword xxxxxheaders {Content-Type: application/j…

npm有哪些插件包??

1.Web开发相关 Web开发相关的npm插件包涵盖了各种工具、框架和库&#xff0c;帮助开发人员简化开发流程、提高效率并实现更好的用户体验。以下是一些常见的Web开发相关的npm插件包及其功能&#xff1a; 1. webpack&#xff1a;一个现代的JavaScript应用程序的静态模块打包工具…

金融领域的AI解决方案

AI可赋能金融营销、资管、风控等领域&#xff0c;面向金融消费者、金融机构和金融监管机构&#xff0c;改善金融 市场信息对称性并提升金融交易的效率和安全性。目前&#xff0c;金融行业各机构对于安全认证和客户身份识别的需求较为迫切&#xff0c;身份识别和智能客服应用和落…

中子介程五

X$XFX$XEXyXαXiXαXyXEX$XFX$XEXyXαXiXαXyXEX$XαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$XdX$XpX$XdX$XyXeXαX$XEXyXαXiXαXyXEX$XαXeXyX$XdX$XpX$XdX$XhXαXeX$XηXqXαXpX$XWXyX$XyXWX$XαXtXηXαXpX$XEX$XZX$XpXαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$…

DevExpress winForm gridView 设置复选框并可多选

OptionsSelection.MultiSelect True OptionsSelection.MultiSelectMode CheckBoxRowSelect

python爬虫入门教程(二):requests库的高级用法

requests库除了基本的GET和POST请求外&#xff0c;requests库还提供了许多高级功能&#xff0c;本文将介绍其中一些常用的用法。包括&#xff1a; 会话保持&#xff08;Session&#xff09;SSL证书验证文件上传代理设置自定义HTTP适配器超时设置 请求参数 文章最开始&#x…

深入解析Java扩展机制:SPI与Spring.factories

目录 Java SPI概述 1.1 什么是SPI&#xff1f;1.2 SPI的工作原理1.3 SPI的优缺点 SPI的应用 2.1 Java标准库中的SPI应用2.2 自定义SPI示例 Spring.factories概述 3.1 什么是spring.factories&#xff1f;3.2 spring.factories的工作原理3.3 spring.factories的优缺点 spring.f…

多线程leetcode编程题

synchronized 实现 class ReentrantTest {private int n;private volatile int flag 1;private Object lock new Object();public ReentrantTest(int n) {this.n n;}public void zero(IntConsumer printNumber) throws InterruptedException{for(int i1;i<n;){synchron…

redis vs memcached

## Redis 和 Memcache 的区别总结 | 特征 | Redis | Memcache | |---|---|---| | 数据结构 | 字符串、哈希表、列表、集合、有序集合、位图 | 字符串 | | 持久化 | 支持 | 不支持 | | 性能 | 整体性能优于 Memcache | 读取简单字符串数据性能略胜一筹 | | 复杂性 | 功能更丰富…

Socket编程权威指南(一)打通网络通信的任督二脉

在网络化的今天&#xff0c;Socket已成为构建分布式系统、实现进程间通信的利器。无论是搭建Web服务器、还是开发网络游戏&#xff0c;Socket编程技能都是必不可少的武器。本文将为你娓娓道来Socket编程的精髓&#xff0c;包括基本流程概览、常用函数剖析&#xff0c;以及精彩实…

如何保证数据库和缓存的数据一致性?

保证数据库和缓存的数据一致性是一个复杂的问题&#xff0c;通常需要根据具体的应用场景和业务需求来设计策略。以下是一些常见的方法来处理数据库和缓存之间的数据一致性问题&#xff1a; 缓存穿透&#xff1a;确保缓存中总是有数据&#xff0c;即使数据在数据库中不存在&…

【CS.CN】优化HTTP传输:揭示Transfer-Encoding: chunked的奥秘与应用

文章目录 0 序言0.1 由来0.2 使用场景 1 Transfer-Encoding: chunked的机制2 语法 && 通过设置Transfer-Encoding: chunked优化性能3 总结References 0 序言 0.1 由来 Transfer-Encoding头部字段在HTTP/1.1中被引入&#xff0c;用于指示数据传输过程中使用的编码方式…

Locust:用Python编写可扩展的负载测试

Locust&#xff1a;简化性能测试&#xff0c;让负载模拟更直观- 精选真开源&#xff0c;释放新价值。 概览 Locust是一个开源的性能和负载测试工具&#xff0c;专门用于HTTP和其他协议的测试。它采用开发者友好的方法&#xff0c;允许用户使用普通的Python代码来定义测试场景。…

nvm,node不是内部命令,npm版本不支持问题(曾经安装过nodejs)

nvm安装后nvm -v有效&#xff0c;node指令无效 环境变量配置无问题 推荐方案 下载你需要的node版本 Index of /dist/ (nodejs.org) 下载后解压到你的nvm存储版本的位置 cmd进入切换你的使用版本&#xff08;此时你的nodejs是从网上下载的&#xff0c;npm文件是存在的&…

Maven中的DependencyManagement和Dependencies

Maven中的DependencyManagement和Dependencies Dependencies Dependencies是Maven项目中用来声明项目依赖的部分。在pom.xml文件中的<dependencies>部分&#xff0c;你可以直接列出项目所依赖的库&#xff08;artifacts&#xff09;。每个依赖通常包括以下信息&#xf…

如何配置Feign以实现服务调试

1、引入依赖 在项目中&#xff0c;需要引入Spring Cloud OpenFeign的依赖。这通常是通过在pom.xml文件中添加相应的Maven依赖来完成的。例如&#xff1a; <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starte…

Python基础知识详解

目录 Python解释器与环境配置 数据类型与结构 控制流语句 文件与IO操作 异常处理机制 函数与模块化编程 Python全栈开发技术栈 Linux环境下的Python开发与自动化 数据分析与挖掘 人工智能与机器学习 自然语言处理 Python知识图谱是指用来组织和展示Python编程语言及…

【PythonCode】力扣Leetcode21~25题Python版

【PythonCode】力扣Leetcode21~25题Python版 前言 力扣Leetcode是一个集学习、刷题、竞赛等功能于一体的编程学习平台&#xff0c;很多计算机相关专业的学生、编程自学者、IT从业者在上面学习和刷题。 在Leetcode上刷题&#xff0c;可以选择各种主流的编程语言&#xff0c;如C…

如何将HTTP升级成HTTPS?既简单又免费的方法!

在当今数字化时代&#xff0c;网络安全已成为用户和企业关注的焦点。HTTPS作为一种更加安全的网络通信协议&#xff0c;正逐渐取代传统的HTTP成为新的标准。对于许多网站管理员和内容创作者来说&#xff0c;如何免费升级到HTTPS是一个值得探讨的问题。本文将详细介绍一些免费的…