hongsir_12-CSDN博客

我们一样可以对粒子使用着色器。在前面学习粒子的时候介绍过，出于性能原因，为几何体的每个顶点都设置动画不是一个有效解决方案。而这便是能让GPU直接通过顶点着色器为顶点设置动画而发挥作用之处。我们将从一个粒子星系开始，在顶点着色器中设置粒子的动画，使得星系旋转且根据距离中心距离的不同而速度不一样。跟之前学习“创建星系”的时候一样的设置，只不过没有设置动画，因为我们要在着色器中去设置动画效果。如果查看控制台，会看到两条警告，告诉我们着色器材质不支持尺寸大小和尺寸衰减，因此要我们自己去添加这些特性，所以现

2022-07-08 23:37:55 1675 1

原创给v-html绑定事件

给需要解析成html的标签内容加上自定义属性：通过获取dataset触发事件：

2022-07-07 10:01:51 1392

原创 spreadJS初体验

spreadJS表格导出导入初体验

2022-06-16 17:00:13 1895 1

原创 three.js学习笔记(十六)——汹涌的海洋

介绍现在我们知道了如何使用着色器并绘制一些图案，那么这次就要用它来创建一个汹涌的海洋。我们将使用调试面板来设置波浪的动画并保持对各项参数的控制。初始场景现在，我们只有一个使用MeshBasicMaterial的平面，该几何体具有128x128的细分。我们将为顶点设置动画以获得波浪效果，为此我们需要非常多顶点。128x128可能不够多，但如果需要，我们将增加该值。基础现在将材质替换为着色器材质ShaderMaterialconst waterMaterial = new THREE.Shade

2022-05-25 16:09:41 2559 5

原创 three.js学习笔记(十五)——着色器图案

介绍通常在创建着色器时，我们需要绘制特定如星星、圆圈、光透镜、波等图案。初始设置像上篇笔记中的一样，场景中有个使用ShaderMaterial着色器材质的PlaneBufferGeometry平面缓冲几何体const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)// Materialconst material = new THREE.ShaderMaterial({ vertexShader: testVertexSha

2022-05-24 15:19:06 2424

原创记录简单扁平数据结构转成树结构练习

let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},]// 输出结果[ { "id": 1, "name": "部门1", "pid": 0

2022-05-20 16:59:17 336

原创 three.js学习笔记(十四)——Shaders着色器

什么是着色器？实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。之后我们会向着色

2022-05-11 22:16:29 9071 11

原创记录导出el表格为Excel文件

import FileSaver from "file-saver";import XLSX from "xlsx";/** * @param * 导出表格 * 目前只适用于el-table * @arg 参数xlsxName 导出文件名 string * @arg 参数className 类名 string * @arg 参数widths array */ exportExcel(xlsxName, className, w

2022-05-05 09:02:05 523 1

原创多步骤动画表单

index.html<!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"> <.

2022-04-03 13:35:14 618

原创 Vue中将绑定的带参事件回调函数转换为节流或者防抖

<uni-number-box :value="item.goodsNum" @change="debounceHandleChangeGoodsNum($event,item.cartsRid)"></uni-number-box>computed:{ debounceHandleChangeGoodsNum(){ return _.debounce(this.changeGoodsNum,200) } },changeGoodsNum(e,cart

2022-03-08 18:46:33 663

原创 JS执行机制学习

掘金文章“ 这一次，彻底弄懂 JavaScript 执行机制”和“浏览器多线程和JS单线程”学习记录浏览器内核是多线程的javascript是一门单线程语言Event Loop是javascript的执行机制事件循环Event Loop同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的.

2022-02-28 15:01:48 345

原创布尔类型比较与转换

console.log(([])?true:false); //trueconsole.log(([]==false?true:false)); //trueconsole.log(({}==false)?true:false) //falseBoolean([]) //true// 布尔类型里只有这几参数个返回false，其它都为trueBoolean(undefined) // falseBoolean(null) // false Boolean(0) // false

2022-02-28 00:17:28 548

原创给uni-app的uni-icons组件添加自定义图标（2022）

一、找到uniicons.ttf字体文件二、在线字体编辑器中打开uniicons.ttf在线字体编辑器链接三、去iconfont官网下载svg格式的图标四、在线字体编辑器上方工具栏点击导入svg然后就可以看到新增一个从iconfont下载的图标了。五、（可选）点击新增图标右上角编辑进入编辑页面将图标大小调整为跟默认图标差不多后点击保存，然后退出编辑。六、选中新增图标后点击上方工具栏“设置代码点”七、上方工具栏中选择导出ttf后并替换原有的uniicons.ttf八、修改文件

2022-01-26 14:15:54 3354 2

原创封装uni-app微信小程序request请求

class Request { constructor(options = {}) { // 请求的根路径 this.baseUrl = options.baseUrl || '' // 请求的 url 地址 this.url = options.url || '' // 请求方式 this.method = 'GET' // 请求的参数对象 this.data = null // header 请求头 this.heade

2022-01-23 17:34:35 1182

原创 echart堆叠柱状图，顶部显示堆叠柱总数的技巧

有这么些堆叠柱状图，想要在每个堆叠柱的顶端显示总数，这时我们可以在series里面再push一个bar，这个bar的值为前面柱子数据的总数和，因此高度是等高的。记得这个新push的bar的stack属性值是和前面相同同stack的堆叠柱是不同的值，然后设置z为-1，barGap为’-100%’，这样就能够把总计的柱子给隐藏到堆叠柱的后面了。代码//各子公司不同设备工单分布统计表let data = [ {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,.

2022-01-20 15:16:33 12272 2

原创工作记录——数组数据格式转换

// 现有以下数据格式表，按公司划分，对各公司的设备进行分类统计数量let data = [ {公司: '寿险',硬件设备: 5,操作系统: 15,数据库中间件: 25,安全: 5,网络: 9}, {公司: '健康险',硬件设备: 7,操作系统: 13,数据库中间件: 5,安全: 21,网络: 17}, {公司: '南中心',硬件设备: 18,操作系统: 28,数据库中间件: 5,安全: 12,网络: 17}, {公司: '科技运营部',硬件设备: 12,操作系统: 13,数据库中间件:

2022-01-20 15:03:03 446

原创记录moment.js的使用

moment.js中文网main.js中// 引入moment时间库import moment from 'moment'// 将全局的moment对象挂载到vue的原型对象上Vue.prototype.$moment = moment使用this.$moment.locale('zh-cn'); //更改语言环境//本周四日期let currentWeekThursday = this.$moment() .startOf('week') .wee.

2022-01-20 10:40:11 436

原创 js对页面进行动态编译以及生成导出word文件

ace编译器安装npm install ace-builds --save-dev引入并挂载在main.js中// 引入ace编辑器组件import ace from 'ace-builds'Vue.use(ace)使用创建编辑器组件<template> <div class="ace-container"> <div class="toolbar" @mousedown="toolbarDown" @mouseup="toolbarUp"&g.

2022-01-19 13:26:54 1644

原创工作记录——IP格式化相关操作

// 要求：// 将ip分开，ip属性只存放一个ip，其他ip放到另外一个属性中let obj = [ { ip: '192.168.19.1-5' }, { ip: '192.168.20.1,192.168.9.10' }, { ip: '192.168.20.13' }, { ip: '192.168.20.16,192.168.19.2-4' }]obj.forEach(e => { // 先将ip对象字符串按逗号分割转化为数组 let ip

2022-01-13 19:39:05 282

原创 input内容禁止全为空格——正则

this.$messageBox.prompt('请输入配置名称', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^(?!(\s+$))/, inputErrorMessage: '配置名称不能为空' })// /^(?!(\s+$))/ //允许input的输入内容以空格开头、以空格结尾、中间也可以有空格

2022-01-11 09:16:11 2048

原创 js修改对象属性名

代码// 更改对象属性名// 第一个参数为要更改的对象，第二个参数为属性名映射数组// 如将属性名为 “日期” 更改为 "date" : [{ key: '日期', value: 'date' }]export function copyTransFunc (obj, typeArr) { let result; let toString = Object.prototype.toString; if (toString.call (obj) === '[object Arr

2021-12-24 14:24:08 7299

原创 js将json转换为Excel并导出

安装XLSXnpm i xlsx创建json2Excel.js工具函数并导出内容代码引用自思否文章json转Excel且有些许修改import XLSX from 'xlsx'function changeData(s){ //如果存在ArrayBuffer对象(es6)最好采用该对象 if(typeof ArrayBuffer !== 'undefined'){ //1.创建一个字节长度为s.length的内存区域 let buf = new Array

2021-12-23 09:46:29 3079 1

原创 js比较俩个对象数组筛选新增对象

let newArr = [ {date:"2021-12-12",device:"ASD1",type:"SAS"}, {date:"2021-12-13",device:"ASD2",type:"SSD"}, {date:"2021-12-14",device:"ASD3",type:"CPU"}, {date:"2021-12-15",device:"ASD1",type:"SAS"}, {date:"2021-12-15",device:"ASD1",type

2021-12-23 08:59:06 554

原创 three.js学习笔记(十三)——真实渲染

初始场景只有一个测试白球和gui面板设置把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光const directionalLight = new THREE.DirectionalLight('#ffffff',1)directionalLight.position.set(0.25,3,-2.25)scene.add(directionalLight)gui.add(directionalLight, 'intensity').min(0).max(10)

2021-12-18 18:42:16 8802 5

原创 three.js学习笔记(十二)——使用Blender自定义模型

这次我们将学习如何用3D软件创建自己的模型选择软件有很多软件如Cinema 4D、Maya、3DS Max、Blender、ZBrush、Marmoset Toolbag、Substance Painter等都很不错。当然它们在用户体验、性能、功能、兼容性、价格等方面也有所不同。这次我们选择Blender，因为它是免费的，性能卓越同时适用于所有主要的操作系统，还有一个广泛的社区。下载Blender官网下载地址https://www.blender.org/download/界面区域默认区域

2021-12-16 22:48:24 8405 1

原创 three.js学习笔记(十一)——导入模型

介绍Three.js允许我们创建许多基本几何图形，但是当涉及到更复杂的形状时，我们最好使用专业的3D软件。这次课将使用已经制作完成的模型，后面将会学习在3D软件中创建自己的模型。

2021-12-14 13:42:37 11161 2

原创 three.js学习笔记(十)——物理引擎

我们可以利用数学函数和一些解决方案来实现自己的物理效果，但是如果需求更加真实的物理效果，像是物体张力、摩擦力、拉伸、反弹等真实物理效果，最好使用外部库原理我们会创建一个Three.js世界和一个Physics物理世界，虽然我们看不见后者但它是真实存在的，每当我们往Three.js世界添加对象时，相应的物理世界也会添加相同对象。物理世界在每一帧更新时都会相应更新到Three.js世界中。例如物理世界中的球体在地板上进行真实弹跳效果时，我们会取其每一帧更新后的坐标并将坐标应用到Three.js世界中的对应

2021-12-13 15:24:26 6376 4

空空如也

空空如也