自定义噪波纹理 Shader
https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 Classic Perlin 3D Noise
https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 Classic Perlin 3D Noise
支持所有主流浏览器
基本概念 Shader（着色器）是用来描述顶点和像素如何在 GPU 上处理的程序。每个着色器都包含了两个类型的着色器，分别是顶点着色器 Vertex Shader 和 片段着色器 Fragment Shader.顶点着色器定位几何体的每个顶点坐标。片段着色器用于为几何体的每个可见像素着色。 Attributes 顶点特有的数据，只在顶点着色器中使用。 属性是每个顶点独有的数据，例如顶点的位置、法线…
安装 基础概念 基本使用 坐标 在 PIXI.js 中的坐标同 html 坐标一致，原点从页面左上方开始 图形 Graphics 将基本形状（如线条，圆形，矩形等）渲染到显示器，并为他们添加样式。页可以使用 Graphics 对象构建图形。 PIXI.js 官方文档：Graphics Bilibili 视频教程：02-Pixi图形Graphics具体应用 常用图形类型 属性与方法 文字 Text …
React Three Fiber 基于 Three.js，是 Three.js 的 React 绑定，为 React 开发者提供了一种简单、直观的方式来创建和管理 3D 场景。
在对数组或对象数据进行复制时，在编辑复制的数据时，使用深拷贝方法原有的数据不会受到影响。 以下代码可用于数组或对象的数据类型
使用 CSS 方法隐藏元素自带的滚动条。
Promise 是 JavaScript 中处理异步操作的一种机制。它是一种表示异步操作最终完成或失败的对象。
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是一个流行的 JavaScript 库，用于在客户端与服务器之间进行 HTTP 请求和响应。
TypeScript 是 JavaScript 的超集。这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码，但 TypeScript 提供了额外的静态类型检查和其他语言功能。
概述 https://www.bilibili.com/video/BV11r4y1n7Sj?p=1 Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。 使用场景 功能特点 为什么 React 要使用 Redux React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案，因此 React 在涉及到数据的处理以及组件之间的通信时比较复杂。对于大型…
SVG 已有十几年的发展历史，具有丰富的滤镜工具且可处理复杂的视觉效果。 创建 SVG 滤镜 创建 SVG 滤镜有两种方式可选，一种是直接在 SVG 中通过 <filter> 标签来定义然后在元素中通过 filter 属性进行引用，另一种是在 CSS 中对 HTML 元素进行引用，两种方式产生的结果都完全一致。 使用 <filter> 标签定义 定义的 filter 不会直接被浏览器渲…
lenis 是一款用于实现网页平滑滚动的轻量级 JS 插件。 安装 引入 配置 lerp 属性值则是控制滚动平滑程度，数值越小，滚动平滑越明显 插件主页 https://github.com/studio-freight/lenis
创建自定义函数，采用四舍五入形式 输出
基本概念 Cookie 是浏览器用于暂时存储数据，Cookie 里的数据存放在电脑中的浏览器里，以各个站点为单位。不同的浏览器之间 Cookie 不共用，要在服务器环境下才能设置 Cookie。 基本使用 创建 Cookie 一次只可设置一个 Cookie 值 设置有效期 Expires 设置有效期，值是一个日期对象 (国际标准时间) 字符串。 获取 Cookie 封装 参考链接： Bilibil…
概述 Webpack 是一种前端资源构建工具，静态模块打包器 ( module bundler )。在 Webpack 看来，前端的所有资源文件 ( js / json / css / img / less / … ) 都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源 ( module )。 基础使用 安装 首先使用 npm init 初始化项目，然后安装 …
Ajax 基础概念与使用方法以及封装 Ajax 函数。
hover-effect.js 插件提供了及具个性的鼠标悬浮时图片切换效果，需配合 three.js 和 gsap.js 共同使用。
three.js 的基础入门以及常用方法与属性。
判断页面的滚动方向是往上还是往下滚动或是否滚动到最顶部
数据转换 parseInt() 解析一个字符串并返回指定基数的十进制整数 parseFloat() Boolean() JSON.parse() 将文本字符串转换为 JSON 数据 字符串 split() 将字符串按照制定的符号进行分割 trim() 从一个字符串的两端删除空白字符，不影响原先的字符串本身，将返回一个新的字符串。 includes() 是否包含其中的字符串 ${} 可以直接在模版字…
将本地字体导入到 CSS 中使用。 参考链接： https://www.digitalocean.com/community/tutorials/how-to-load-and-use-custom-fonts-with-css
纯 CSS 方式绘制三角箭头。
输入框中 placeholder 的替代文字样式，可以调整配色或其他不同样式。
PUJI Design 朴及设计 (c) 2024. 沪ICP备17052229号