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

2024-06-08 12:52

本文主要是介绍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】

在这里插入图片描述


这篇关于Three.js——粒子效果、粒子水波、粒子组成立方体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1042239

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的。使用python创建生命倒计时图表,珍惜时间