- 博客(60)
- 收藏
- 关注
RSS订阅原创 详解PBR物理渲染
基于物理渲染，传统渲染是模仿灯光的外观，PBR是模仿光的实际行为，使图形看起来更真实。PBR更加注重对光线物理行为的模拟和计算。传统渲染技术可能无法准确模拟光线在不同材质表面的反射、折射和散射等现象，也无法准确表现光线在空间中的传播和衰减过程。而PBR则通过引入更加精确的光照模型和材质模型，解决了这些问题，从而实现了更加真实的渲染效果。
2025-01-15 16:01:38
294
原创 前端如何在生成环境下实现自动检测更新
建立一个WebSocket连接，服务器在发布新版本时通过WebSocket向客户端发送更新通知。优点：实时性强，能够即时通知客户端更新。缺点：需要额外的服务器资源来维护WebSocket连接，且可能受到网络延迟和稳定性问题的影响。
2024-10-17 16:37:10
686
原创 Three.js结合物理引擎实现掉落效果
<template></template><script setup>import * as THREE from 'three'import gsap from 'gsap'//导入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'// 导入 dat.guiimport { GUI } from 'three/addons/libs/lil-gu
2024-07-30 12:24:33
528
原创 Three.js三屏特效
<template> <div class="page page0"> <h1>Three.js</h1> <h3>投射光线实现三维物体交互</h3> </div> <div class="page page1"> <h1>Three.js</h1> <h3>炫酷三角形</h3> </div> <
2024-07-28 21:35:23
369
原创 Three.js光线投射实现三维物体交互
/ 将webgel渲染的canvas内容添加到body。// 使用渲染器，通过相机将场景渲染进来。// 设置控制器的阻尼 更真实 惯性。// 设置相机位置 x y z。// 监听画面变化，更新渲染画面。// 鼠标的二维坐标，相机坐标。// 导入 dat.gui。// 更新摄像机的投影矩阵。// 把相机添加到场景中。// 设置渲染的尺寸大小。// 设置渲染器的像素比。// 1000个立方体。// 创建投射光线对象。// 添加坐标轴辅助器。// 鼠标的位置对象。// 监听鼠标的位置。// 创建轨道控制器。
2024-07-24 09:33:58
1137
原创 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
694
原创 Three.js材质（纹理贴图Texture）
/ 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
1435
1
原创 WebGL异步绘制多点
/ 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)// 一秒钟后，向顶点数据中再添加的一个顶点，修改缓冲区数据，然后清理画布，绘制顶点。// 声明顶点着色器 attribute 变量。// 两秒钟后，清理画布，绘制顶点，绘制线条。2.一秒钟后，在左下角画一个点。// 开启顶点数据的批处理功能。// 获取到顶点着色器中变量。// 创建着色器程序。
2024-04-07 15:30:51
420
原创 WebGL根据鼠标控制生成点位，随机改变点的大小颜色
/ 片元着色器变量 uniform, precision mediump float是片元着色器的规范。// 存点的位置，如果异步执行drawArrays会导致颜色缓冲区重置，所以在这里我们需要同步执行。// 获取cavans坐标宽高，距离视口尺寸的距离。// 在范围内的片元颜色进行渲染，超出的部分废弃。// 鼠标基于webgl坐标的中心位置。// 获取鼠标距离视口尺寸的距离。// 鼠标在canvas中的位置。// canvas画布的中心位置。// 解决坐标基底的差异。// 解决y方向的差异。
2024-04-02 10:26:13
660
原创 纯前端实现根据数据导出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
599
原创 纯前端实现导入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
1245
原创 封装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
318
原创 post导出文件【fetch】
post导出文件【fetch】项目中导出excel文件很常见，分为`get`和`post`方式，get相对简单些，在url后面拼接需要的参数即可get请求方式拼接参数长度上限为2083，超过这个长度导出excel失败
2022-03-23 17:27:41
1935
1
原创 Pinia快速入门
Pinia快速入门Pinia是 Vue.js 的轻量级状态管理库，最近很受欢迎。它的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）2021.11.24 Pinia 正式成为 vuejs 的一员，尤雨溪当天在 Twitter 上宣布：Pinia 正式成为 vuejs 官方的状态库，意味着 Pinia 就是 Vuex 5
2022-02-15 13:49:59
868
原创 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
1267
原创 前端上传视频至阿里云并转码
我们这里选用的是第三方方案流程图整体流程页面展示添加脚本文件到根目录，并引入脚本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
4252
2
原创 Vue2+Ts实战项目开发与项目优化（三）用户管理和权限管理
用户管理用户管理角色->角色管理相应的权限分配角色一个用户可以拥有多个角色角色权限管理角色可用来分配菜单和资源角色分配菜单权限控制菜单角色分配资源权限控制接口
2021-12-11 20:05:33
388
原创 Vue2+Ts实战项目开发与项目优化（二）用户登录和身份认证
关于Token过期的问题access_token 作用：获取需要授权的接口数据expires_in 作用 access_token 过期时间refresh_token 作用：刷新获取新的 access_token方法一：在请求发起前拦截每个请求，判断 token 的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求优：在请求前拦截，能节省请求，省流量缺：需要后端额外提供一个token过期时间的字段，使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时
2021-12-02 23:24:39
992
原创 Vue2+Ts实战项目开发与项目优化（一）项目初始化
使用vue-cli创建项目vue create edu-boss-fed加入git版本管理
2021-11-22 23:40:57
4617
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人