- 博客(55)
- 收藏
- 关注
原创 Three.js光照与阴影
/ 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true。// 3、设置光照投射阴影 directionalLight.castShadow = true。// 5、设置物体接收阴影 plane.receiveShadow = true。// 4、设置物体投射阴影 sphere.castShadow = true。//设置three.js渲染区域的尺寸(像素px)// 1、材质要满足能够对光照有反应。// 相机围绕目标进行轨道运动。// 目标:灯光与阴影。
2024-05-14 07:41:13
379
原创 Three.js纹理贴图
/ texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图,镜像重复。// texture.wrapT = THREE.RepeatWrapping // 垂直贴图,纹理重复到无穷大。// texture.minFilter = THREE.NearestFilter // 取最接近的。// texture.rotation = Math.PI / 4 // 旋转45°。// texture.offset.x = 0.5 // 向左偏移,负为反。
2024-05-06 07:41:08
951
1
原创 Three.js使用动画库( GSAP 一款基于 JavaScript 的 web动画库)
【代码】Three.js使用动画库( GSAP 一款基于 JavaScript 的 web动画库)
2024-04-26 09:29:19
385
3
原创 WebGL异步绘制多点
/ 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)// 一秒钟后,向顶点数据中再添加的一个顶点,修改缓冲区数据,然后清理画布,绘制顶点。// 声明顶点着色器 attribute 变量。// 两秒钟后,清理画布,绘制顶点,绘制线条。2.一秒钟后,在左下角画一个点。// 开启顶点数据的批处理功能。// 获取到顶点着色器中变量。// 创建着色器程序。
2024-04-07 15:30:51
323
原创 WebGL根据鼠标控制生成点位,随机改变点的大小颜色
/ 片元着色器变量 uniform, precision mediump float是片元着色器的规范。// 存点的位置,如果异步执行drawArrays会导致颜色缓冲区重置,所以在这里我们需要同步执行。// 获取cavans坐标宽高,距离视口尺寸的距离。// 在范围内的片元颜色进行渲染,超出的部分废弃。// 鼠标基于webgl坐标的中心位置。// 获取鼠标距离视口尺寸的距离。// 鼠标在canvas中的位置。// canvas画布的中心位置。// 解决坐标基底的差异。// 解决y方向的差异。
2024-04-02 10:26:13
560
原创 纯前端实现根据数据导出excel文件
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, '表单1的名称')XLSX.writeFile(workbook, 'excel的名称.xlsx')
2023-11-29 13:33:24
477
原创 纯前端实现导入excel数据
const reader = new FileReader();reader.onload = e => {const data = e.target?.resultconst workbook = XLSX.read(data, { type: 'array' })const firstSheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[firstSheetName]const results = XLSX.utils.s
2023-11-28 16:51:58
946
原创 封装WebGL初始化着色器函数
/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器: 通过程序代替固定的渲染管线,来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器:像素(颜色,纹理)// 要绘制的点的坐标。// 顶点着色器:顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。
2023-05-08 17:46:20
215
1
原创 post导出文件【fetch】
post导出文件【fetch】项目中导出excel文件很常见,分为`get`和`post`方式,get相对简单些,在url后面拼接需要的参数即可get请求方式拼接参数长度上限为2083,超过这个长度导出excel失败
2022-03-23 17:27:41
1818
1
原创 Pinia快速入门
Pinia快速入门Pinia是 Vue.js 的轻量级状态管理库,最近很受欢迎。它的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)2021.11.24 Pinia 正式成为 vuejs 的一员,尤雨溪当天在 Twitter 上宣布:Pinia 正式成为 vuejs 官方的状态库,意味着 Pinia 就是 Vuex 5
2022-02-15 13:49:59
814
原创 Vue2+Ts实战项目开发与项目优化(四)发布部署
项目打包npm run build本地预览部署npm i -g serveserve -s dist创建本地服务test-serve/app.jsnpm i -D expressnpm i --save-dev http-proxy-middleware // 使用代理中间件const express = require('express')const app = express()const path = require('path')const { createProxy
2021-12-16 00:00:03
1239
原创 前端上传视频至阿里云并转码
我们这里选用的是第三方方案流程图整体流程页面展示添加脚本文件到根目录,并引入脚本public/index.html<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
2021-12-15 21:25:18
3973
2
原创 Vue2+Ts实战项目开发与项目优化(三)用户管理和权限管理
用户管理用户管理角色->角色管理相应的权限分配角色一个用户可以拥有多个角色角色权限管理角色可用来分配菜单和资源角色分配菜单权限控制菜单角色分配资源权限控制接口
2021-12-11 20:05:33
354
原创 Vue2+Ts实战项目开发与项目优化(二)用户登录和身份认证
关于Token过期的问题access_token 作用:获取需要授权的接口数据expires_in 作用 access_token 过期时间refresh_token 作用:刷新获取新的 access_token方法一:在请求发起前拦截每个请求,判断 token 的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token后再继续请求优:在请求前拦截,能节省请求,省流量缺:需要后端额外提供一个token过期时间的字段,使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时
2021-12-02 23:24:39
939
原创 Vue2+Ts实战项目开发与项目优化(一)项目初始化
使用vue-cli创建项目vue create edu-boss-fed加入git版本管理
2021-11-22 23:40:57
4033
原创 GitHub Actions自动化部署
现代化的部署方式(CI/CD)持续集成,持续部署CI/CD服务Jenkins, GitHub Actions, Gitlab CI, Travis CI, Circle Ci// 这里我们用到GitHub Actions
2021-11-15 22:43:11
1655
1
原创 ElementUI table动态展开收起,以及初始收起状态(另累写法仅作参考)
最近的需求碰到一个使用ElementUI table表格的时候需要实现点击动态加载数据并展开和收起。效果图实现????ElementUI 树形数据与懒加载 <el-table ref="table" :row-key="id" :tree-props="{ children: 'children' }" @expand-change="handleExpendRow" ></el-table> //
2021-10-10 14:40:59
5131
原创 options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】
options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】
2021-09-25 14:11:27
7796
6
原创 虚拟DOM与diff算法
diff算法新虚拟dom和老虚拟dom进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的dom上虚拟DOM(虚拟DOM->真实DOM是通过模板编译)真实dom计算机处理起来比较复杂->转换用js对象描述dom的层次解构。dom中的一切属性都在虚拟dom中有对应的属性为什么要有虚拟dom,因为diff是发生在虚拟dom上的...
2021-09-23 08:35:00
144
原创 微信小程序开发中遇到的问题
这里是我在写微信小程序时,使用cover-view遇到的一些坑cover-view的层级问题微信小程序中cover-view的层级不受z-index控制,且层级最高cover-view在ios中iconfont图标无法显示官方的解释是:cover-view不支持使用字体icon,请使用图片代替...
2021-09-17 14:11:58
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人