- 博客(64)
- 收藏
- 关注
RSS订阅原创 React性能优化API
PureComponent：React 自带的一个纯组件，其 shouldComponentUpdate 函数已经被自动实现，只有在 props 或 state 发生变化时才会重新渲染组件。shouldComponentUpdate：通过重写该函数实现组件的条件渲染，即只有在组件的 props 或 state 发生变化时才重新渲染组件。memo：类似于 PureComponent，但是用于函数式组件，可以使其只在 props 发生变化时重新渲染。
2023-06-15 18:15:11
1213
原创 Umi、React框架学习笔记
Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
2023-01-16 11:43:19
784
原创 Three.js地图轮廓分割效果
Three.js地图轮廓分割轮廓效果基于GeoJson数据解析绘制,支持多级国家/省/市细粒度路径绘制可以通过Shader/材质/贴图实现不同的轮廓分割效果阿里云GeoJson配置/下载地址相关方法 // 经纬度与世界坐标转换 const getPosition = (lng, lat, radius) => { const phi = (180 + lng) * (Math.PI / 180); const theta = (90 - lat) * (Math
2021-12-28 15:29:26
1017
原创 Three.js/Shader墙体流光特效
Three.js墙体流光效果基于ShaderMaterial，通过两张贴图实现流动效果，配置不同的贴图可以有不同效果生成方法 /** * 创建流体墙体材质 * option => * params bgUrl flowUrl * **/ const createFlowWallMat = ({ bgUrl, flowUrl }) => { // 顶点着色器 const vertex
2021-12-24 18:50:06
5471
13
原创 Three.js通过不规则路径生成墙体
Three.js通过不规则路径生成墙体在一些3D场景的搭建中，经常会遇到图中通过墙体来分割内容的效果，目前Threejs提供的Geometry类型还无法直接处理一些不规则墙体的搭建生成算法通过BufferGeometry基础图形搭建通过路径解析算法，构建出所有需要渲染的面支持三维路径进行构造 /** * option => * params height path material * 通过path构建墙体 * **/
2021-12-23 11:18:53
5587
22
原创 判断经纬度是否在某个区域内
通过经纬度信息，判断某点是否在某个区域内代码/** * 处理区域轮廓点数据 * path : [ [ lon,lat ] ] */export function preceedPointInArea(lng, lat, points) { const polygon = []; for (const point of points) { if (point.length == 2) { point["lng"] = parseFloat(point[0]);
2021-11-22 17:27:36
2611
原创 Vue3.0接入踩坑记录
ref()与reactive()用法上的区别两个方法都是用于为数据添加响应式绑定，ref()一般用于给基础数据添加绑定 字符串/数字绑定后使用.value访问。reactive()一般用于给 object 等复杂类型添加动态绑定，绑定后直接访问即可。 const a = ref({ name: 'bob', age: 18 }); const b = reactive({ name: 'bob', age: 18 }); console.log('a::', a, 'b::'.
2021-07-12 17:19:02
3569
2
原创 Babylon.js 实现鼠标拾取操作
Babylon.js 实现鼠标拾取操作通过scene.pick(scene.pointerX, scene.pointerY);API实现物体选中,并返回结果对象hit（bool）：如果点击击中了场景中的一个对象，则为true。distance（float）：当前活动相机与命中点之间的距离（如果未命中任何物体，则为infinite无限）。pickMesh（BABYLON.Mesh）：如果击中一个物体，则这就是这个物体的实例对象。 如果不是，则为空。pickPoint（BABYLON.Vector
2021-07-07 11:10:10
1853
1
原创 Babylon.js实现物体碰撞检测
Babylon.js实现物体碰撞检测通过intersectsMesh()api实现物体间碰撞检测通过intersectsPoint()api实现物体与点间的碰撞检测代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &
2021-07-06 14:34:43
1375
原创 Three.js清除场景/模型释放内存
加在开发时，若遇到需要动态添加删改模型、场景，页面切换重渲染时，为避免内存叠加占用，需要手动清除场景所占用的内存，避免溢出与资源浪费。使用 dispose() 清除所有网格模型几何体的顶点缓冲区占用内存使用 object.clear() 销毁模型对象，清除页面内存暂停 requestAnimationFrame() 方法，避免无意义运行清空 canvas画布，置空dom与相关元素清除场景 clearScene() { cancelAnimationFrame(this.animati
2021-04-19 18:48:26
14905
7
原创 Vue3.x接入Vuex，Vue-router
一、Vuex用法近乎相同，{ mapState,mapMutations,mapActions,mapGetters }方法在option写法中用法依旧相同，在组合api中需要用 useStore 代替 $store，在Vue3中新增了{ provide,inject }方法，在多组件共用数据时提供了更方便的选择1.安装npm install vuex@next --save2.编写store/store/index.jsimport { createStore } from "vuex";e
2021-01-19 20:42:41
1560
原创 Three.js无限星空特效
效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {
2021-01-15 18:01:48
1342
原创 Three.js星空粒子特效
效果代码只渲染固定个数与区域的粒子保证性能初始化时确定每个粒子偏移向量方向，操作帧动画时做三维向量偏移超过规定区域时还原，实现无限粒子移动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2021-01-15 17:27:18
1932
1
原创 Three.js Line2渐变色线条序列帧动画
效果代码1. 生成轨迹线// 轨迹曲线线 const curve = new THREE.CatmullRomCurve3( [ new THREE.Vector3(-20, 30, 4), new THREE.Vector3(20, 30, 4), new THREE.Vector3(20, 0, 4), new THREE.Vector3(-20, 0, 4),
2021-01-15 11:36:04
6692
11
原创 Three.js渲染Dom元素到3D场景
效果中间两个swiper部分用dom方式实现，再将其转化成为Three中的CSS3DObject对象添加到3D场景中，代码需要创建两个场景与渲染器（普通渲染器，CSS3Render）通过两个场景融合实现dom插入（这种方式会导致深度信息丢失）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" c
2021-01-14 20:39:04
2438
5
原创 Three.js基于Canvas的文字贴图
Three.js基于Canvas的文字贴图居中对齐，对中文文字做了长度兼容处理，可更具开发需求自行构造Canvas贴图 const createLabel = () => { const name = "马达加斯加的企鹅们正在快乐的玩耍"; const canvas = document.createElement("canvas"); const color = "#dddddd"; const fontSize = 50;
2020-12-28 19:56:23
1606
原创 Three.js 修复UnrealBloomPass导致背景失效问题
Three.js 修复UnrealBloomPass导致背景失效问题import { AdditiveBlending, Color, LinearFilter, MeshBasicMaterial, RGBAFormat, ShaderMaterial, UniformsUtils, Vector2, Vector3, WebGLRenderTarget} from "../../../build/three.module.js";import { Pass } from "
2020-12-21 16:04:20
2611
11
原创 Three.js带Depth实现分区辉光
一、效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道，实现辉光效果。3.接住ShaderPass，保此原有material。4.单帧两次渲染，分别渲染辉光部分，还原正常部分。5.相比直接分层两次渲染，修复了深度信息丢失导致的层级问题。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&
2020-12-21 11:36:02
1859
3
原创 Vue按比例居中适配组件
Vue实现按比例居中适配实现类似视频缩放，居中，保持视频比例不变形效果<template> <div class="pageWarp32Ratio9"> <div class="content-wrap" :style="{ transform: `scale(${scaleRation})` }"> <slot></slot> </div> </div></templat
2020-12-02 11:48:12
587
1
原创 Three.js实现hover与Click选中效果
一、效果展示二、如何实现使用Three.js提供的光线投射Raycaster模块通过Raycaster将物体在场景中的位置与鼠标的位置进行对比当鼠标的平面坐标与场景中物体的平面坐标发生重叠时认为选中了物体三、代码实现<script type="module"> import * as THREE from "./node_modules/three/build/three.module.js"; import { OrbitControls } from
2020-11-26 11:52:37
3886
原创 Three.js实现分区Bloom辉光效果
一、效果展示辉光效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道，实现辉光效果。3.了解three.js中 layers 分层的概念，实现分层渲染。4.单帧两次渲染，分别渲染两个不同的场景，组合成为需要的场景。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <
2020-11-23 20:17:34
5727
6
原创 webpack多页应用打包配置
项目结构webpack.config.dev.jsconst path = require("path");const resolve = (url) => path.resolve(__dirname, url);const HtmlWebpackPlugin = require("html-webpack-plugin");// const CopyWebpackPlugin = require("copy-webpack-plugin");module.exports = {
2020-11-17 23:11:51
229
原创 Git 常用命令
git 分布式版本控制工具git中有以下四个区域工作区 正常书写，改变代码的区域暂存区 存储修改过的代码本地仓库 存在于本地的代码管理仓库远程仓库 与所有成员共享，远程同步的代码仓库一段代码 修改并提交 到远程仓库的流程为：1.工作区代码发送改变 ---->2.将改变的代码提交到暂存区(git add) ---->3.将暂存区代码提交到本地仓库(git commit) ---->4.将本地仓库修改的内容推送到远程仓库(git push) ---- 完
2020-11-01 01:45:05
59
原创 Http协议相关知识
一、OSI五层网络模型OSI五层网络模型应用层为应用软件提供了很多服务，构建于协议之上http、ftp协议传输层数据的传输都是在这层定义的，数据过大分包，分片TCP、UDP(建立端到端服务)网络层为数据在节点之间传输创建逻辑链路为网络上的不同主机提供通信数据链路层为通讯实体间建立数据链路连接传输以帧为单位的数据物理层主要作用是定义物理设备如何传输数据光缆，网线二、三次握手客户端发起建立连接请求，携带SYN包。服务端接收到连
2020-10-26 15:22:32
112
原创 Egg.js使用注意点
一、MySql事务sql事务，保证所有sql执行成功，避免出现断档 const client = app.mysql.get('default'); const conn = await client.beginTransaction(); try { // 1.执行SQL await conn.select('process'{ where: { batchId: item } }); await conn.select('process'{
2020-10-26 15:18:11
782
原创 Koa基础用法
Koa是由express团队打造的新一代node框架，在express的基础上对一些用法做了一定的封装，两者在用法上比较类似，在koa中将req,res对象抽离融合成为了ctx上下文对象，有过express开发经验的同学上手应该很容易。一、基础配置，挂载服务器实例const koa = require('koa') //引入koaconst Router = require('koa-router') //引入koa的router模块const app = new koa() //创建服务器实例
2020-08-23 01:25:34
157
原创 正则表达式
什么是正则表达式？用于匹配字符串中字符组合的模式。 字符匹配、替换、提取。一、在js中创建正则表达式 // 1.1 对象 let reg1 = new RegExp(/123/); // 1.2 字面量 let reg2 = /123/;二、边界符 ^ $ //^ 必须以正则字符开头 console.log(/^abc/.test("absd")); // false console.log(/^abc/.test(
2020-08-23 01:23:52
155
原创 Axios常见用法指南
axios是基于promise封装的异步请求插件，其中包含两套核心，基于浏览器的XHR核心，基于服务端http模块，可以兼容浏览器与服务端两个业务场景，同时通过了多种传参方式，拦截全局请求，全局数据格式化等功能，方便开发者使用。一、发送请求传统用法 类$.Ajax// 发送 POST 请求axios({ method: '',//类型 url: '',// url data: { // data }}).then(res=>{}).catch(err=>{})
2020-06-14 23:54:59
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人