qq_58956810的博客

原创 表单校验代码和树形结构值传递错误解决

文章摘要： 本文讨论了前端开发中的两个常见问题处理方案。首先介绍了表单校验的两种实现方式：直接校验法和遍历属性法，并提供了对应的代码示例。其次针对Pinia状态管理中的数据获取问题，分析了"$treeNodeId"错误的原因，提出了通过条件渲染确保数据不为空的解决方案，建议使用三元表达式{model:organize?organize:[]}处理树形结构数据，并推荐在组件生命周期钩子中使用async/awaitc。这些方案可以有效升前端应用的稳定性和用户体验。

原创 threejs渲染器和前端UI界面

Three.js Canvas布局与交互开发摘要 本文系统介绍了Three.js中Canvas画布的布局技巧与交互开发方法。主要内容包括： Canvas画布布局 - 通过CSS实现全屏或局部布局，响应窗口尺寸变化，设置z-index处理元素叠加。 UI交互开发 - 展示如何通过HTML按钮控制3D场景，实现模型颜色切换等交互功能。 高级特性 - 背景透明度设置、渲染结果保存为图片、解决模型深度冲突闪烁问题。 优化实践 - 模型加载进度条实现，提升用户体验。 关键点： Canvas本质上仍是HTML元素，可使

原创 threejsPBR材质与纹理贴图

本文介绍了Three.js中基于物理的渲染(PBR)材质及其应用。主要内容包括： PBR材质概述：介绍了MeshStandardMaterial和MeshPhysicalMaterial两种PBR材质，以及它们与其他材质的区别和性能表现。 金属度和粗糙度：讲解了PBR材质中金属度和粗糙度属性的作用和设置方法。 环境贴图应用：详细说明了如何使用立方体纹理加载器创建环境贴图，并通过.envMap属性实现真实反射效果。 高级材质特性：介绍了MeshPhysicalMaterial特有的清漆层、透光率和折射率等高级

原创 threejs加载外部三维模型(gltf)

本文介绍了使用Three.js加载和处理GLTF格式3D模型的全流程。主要内容包括：1. 建模软件与程序员协作，推荐使用Blender等工具创建复杂模型；2. GLTF格式作为Web3D的标准格式，支持模型层级、材质、动画等丰富数据；3. 详细讲解模型加载流程，包括相机参数设置、颜色偏差解决方案；4. 模型命名管理、递归遍历修改材质等实用技巧；5. 纹理编码与渲染器输出设置的关系；6. 如何更换模型贴图及解决纹理翻转问题。文章通过代码示例演示了从模型导出到网页渲染的完整开发流程，为Web3D开发提供了实用指

原创 threejs顶点UV坐标、纹理贴图

本文摘要总结了Three.js纹理贴图的核心概念和应用技巧。主要内容包括：1）使用TextureLoader加载图片创建纹理对象，通过.map属性将纹理映射到几何体材质上；2）UV坐标的自定义方法，通过修改几何体attributes.uv属性控制纹理采样区域；3）圆形平面纹理映射的实现原理；4）利用纹理对象的.wrapS/.wrapT和.repeat属性实现阵列平铺效果；5）透明PNG贴图在场景标注中的应用；6）通过纹理.offset属性实现UV动画效果，结合.wrapS/wrapT可制作连续滚动的传送带动

原创 threejs层级模型

本文摘要： Three.js层级模型操作指南 层级模型创建与管理 使用Group类构建树形结构，通过.add()方法添加子对象 父对象变换会影响所有子对象 Object3D类可替代Group使用 模型遍历与查询 通过.traverse()递归遍历模型树 使用.getObjectByName()按名称查找特定模型节点 可为模型设置.name属性便于识别 坐标系统 本地坐标通过.position获取 世界坐标需用.getWorldPosition()计算父子位置累加值 可通过几何体平移改变模型相对坐标原点位置

原创 threejs模型对象、材质

本文介绍了Three.js中模型操作与属性的核心知识：1) 使用Vector3向量控制模型的位置(.position)和缩放(.scale)，通过.translateX()等方法实现平移；2) 通过欧拉对象Euler设置模型旋转角度(.rotation)，支持.rotateX()等旋转方法；3) 使用Color对象设置材质颜色，支持RGB、十六进制等多种格式；4) 材质继承自Material类，可设置透明度(.opacity)和可见面(.side)；5) 模型由几何体(.geometry)和材质(.mate

原创 threejs几何体BufferGeometry顶点

本文系统介绍了Three.js中几何体BufferGeometry的核心概念与应用。主要内容包括：1）几何体顶点数据的定义，通过BufferGeometry创建自定义几何形状；2）点模型、线模型和网格模型的渲染方式及区别；3）三角形面片概念、正反面判断及双面渲染设置；4）矩形平面构建方法及顶点索引优化；5）顶点法线数据的定义与光照材质的关系；6）内置几何体结构分析及细分数控制；7）几何体的旋转、缩放、平移等变换操作。文章循序渐进地讲解了从基础顶点定义到复杂几何体操作的全过程，为Three.js几何体开发提供

原创 three.js快速入门，基础语法

本文摘要： 本文详细介绍了Three.js的基础使用流程，包括下载安装、3D场景搭建、基本概念（场景、相机、渲染器）、光源设置、动画循环、坐标系理解以及常见几何体创建。通过案例演示了如何引入Three.js库、创建3D模型、添加光照效果、实现旋转动画，并讲解了相机控件OrbitControls和性能监视器Stats.js的集成方法。此外，还介绍了dat.gui.js库的用法，用于可视化调试场景参数，包括颜色、位置、光照强度等属性的交互式调整。最后提到通过官方文档和案例examples辅助开发学习。全文循序渐

原创 immutable.js介绍

Immutable.js 是一个提供不可变数据结构的 JavaScript 库，旨在通过创建不可变对象来简化数据管理。它通过复制并修改数据节点来实现不可变性，修改后的数据不会影响原始数据，从而提高应用的性能和可预测性。Immutable.js 支持多种数据结构，如 List（类似数组）、Map（类似对象）、Set（唯一值集合）等。这些数据结构提供了丰富的操作方法，如 set、get、delete、update 等，并且支持嵌套结构的操作。

原创 Electron学习+打包

什么是 Electron？什么是 Electron？是⼀个跨平台桌⾯应⽤开发框架，开发者可以使⽤：HTML、CSS、JavaScript 等Web 技术来构建桌⾯应⽤程序，它的本质是结合了Chromium和Node.js，现在⼴泛⽤于桌⾯应⽤程序开发，例如这写桌⾯应⽤都⽤到了 Electron 技术：4、新版 QQElectron 的优势1.可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。2.

原创 react学习笔记6——ReactRouter6教程

React Router 以三个不同的包发布到 npm 上，它们分别为：react-router: 路由的核心库，提供了很多的：组件、钩子。。等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除<Switch/>，新增<Routes/>等。变为等。useParamsuseMatch等。

原创 react学习笔记5——扩展

父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）

原创 react学习笔记4——React UI组件库与redux

官网github:官网Github:英文文档中文文档Github:redux是一个专门用于做的JS库不是react插件库。它可以用在等项目中但基本与react配合使用。作用: 集中式管理react应用中多个组件的状态。某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原则：能不用就不用如果不用比较吃力才考虑使用。动作的对象包含2个属性type：标识属性值为字符串唯一必要属性data：数据属性。

原创 react学习笔记3——基于React脚手架

一个路由就是一个映射关系key为路径, value可能是function或component。

原创 react学习笔记2——基于React脚手架与ajax

xxx脚手架用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库项目的整体技术架构为使用脚手架开发的项目的特点模块化组件化工程化，全局安装：，切换到想创项目的目录，使用命令：，进入项目文件夹：，启动项目：npm startpublic----静态资源文件夹-----网站页签图标------

原创 react学习1

react.jsReact核心库。：提供操作DOM的react扩展库。：解析JSX语法代码转为JS代码的库。JSX方式纯JS方式（一般不用）React提供了一些API来创建一种“特别”的一般js对象上面创建的就是一个简单的虚拟DOM对象虚拟DOM对象最终都会被React转换为真实的DOM我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。全称react定义的一种类似于XML的JS。

原创 java学习笔记16——java8的其他新特性

这是JDK9的新特性1.命令行中通过指令jshell，调取jshell工具2.常用指令:/help:获取关使用 jshell 工具的信息/help intro : jshell 工具的简介/list :列出当前 session 里所有有效的代码片段/vars :查看当前 session 下所有创建过的变量/methods :查看当前 session 下所有创建过的方法/imports :列出导入的包/history :键入的内容的历史记录。

原创 java学习笔记15——反射机制

2、声明榨汁机(Juicer)，包含运行方法:public void run(Fruit f)，方法体中，调用f的榨汁方法squeeze()4.(了解)反射的应用4:通过反射获取注解的信息(见com.atguigu04.other.annotation包的测试)> 因为反射体现了动态性(可以在运行时动态的获取对象所属的类，动态的调用相关的方法)，所以我们在设计框架的时候，> 从我们作为程序员开发者的角度来讲，我们开发中主要是完成业务代码，对于相关的对象、方法的调用都是确定的。

原创 java学习笔记14——网络编程

总结：1.要想实现网络通信，需要解决的三个问题- 问题1:如何准确地定位网络上一台或多台主机- 问题2:如何定位主机上的特定的应用- 问题3:找到主机后，如何可靠、高效地进行数据传输2.实现网络传输的三个要素:(对应解决三个问题)> 使用IP地址(准确地定位网络上一台或多台主机)> 使用端口号(定位主机上的特定的应用)> 规范网络通信协议(可靠、高效地进行数据传输)3.通信要素1:IP地址3.1 作用IP地址用来给网络中的一台计算机设备做唯一的编号3.2 IP地址分类。

原创 java学习笔记13——IO流

总结：1.File类的理解> File类位于java.io包下，本章中涉及到的相关流也都声明在java.io包下> File类的一个对象，对应与操作系统下的一个文件或一个文件目录(或文件夹)> File类中声明了新建、删除、获取名称、重命名等方法，并没有涉到文件内容的读写操作。要想实现文件内容的读写，我们就需要使用io流。> File类的对象，通常是作为io流操作的文件的端点出现的。> 代码层面，将File类的对象作为参数传递到IO相关类的构造器中。2.内部api使用说明。

原创 java学习笔记11——泛型

总结：1.自定义泛型类\接口1.1 格式1.2 使用说明① 我们在声明完自定义泛型类以后，可以在类的内部(比如:属性、方法、构造器中)使用类的泛型。② 我们在创建自定义泛型类的对象时，可以指明泛型参数类型。一旦指明，内部凡是使用类的泛型参数的位置，都具体化为指定的类的泛型类型。③ 如果在创建自定义泛型类的对象时，没有指明泛型参数类型，那么泛型将被擦除，泛型对应的类型均按照object处理，但不等价于object。- 经验:泛型要使用一路都用。要不用，一路都不要用。

原创 java学习笔记10——集合框架

总结：集合框架概述1.内存层面需要针对于多个数据进行存储。此时，可以考虑的容器有:数组、集合类2.数组存储多个数据方面的特点:> 数组一旦初始化，其长度就是确定的。> 数组中的多个元素是依次紧密排列的，有序的，可重复的> (优点)数组一旦初始化完成，其元素的类型就是确定的。不是此类型的元素，就不能添加到此数组中。arr[0]= 1;//编译报错> (优点)元素的类型既可以是基本数据类型，也可以是引用数据类型数组存储多个数据方面的弊端:> 数组一旦初始化，其长度就不可变了。

原创 java学习笔记9——常用类

指向同一个地址可才相等注意这个地方，两个person对象的name实际上指向的是同一个字符串常量池（Tom）总结：1.string类的理解(以JDK8为例说明)1.1 类的声明> final:String是不可被继承的> Serializable:可序列化的接口。凡是实现此接口的类的对象就可以通过网络或本地流进行数据的传输。> Comparable:凡是实现此接口的类，其对象都可以比较大小。1.2 内部声明的属性jdk8中://存储字符串数据的容器。

原创 java学习笔记——多线程

总结：1.程序、进程和线程的区分:程序(program):为完成特定任务，用某种语言编写的`一组指令的集合`。即指一段静态的代码。进程(process):程序的一次执行过程，或是正在内存中运行的应用程序。程序是静态的，进程是动态的。进程作为操作系统调度和分配资源的最小单位。线程(thread):进程可进一步细化为线程，是程序内部的一条执行路径线程.作为CPU调度和执行的最小单位2.线程调度策略分时调度:所有线程轮流使用`CPU`的使用权，并且平均分配每个线程占用CPU的时间。

原创 java学习笔记8——异常处理

异常处理机制二： throws。

原创 IDEA常用快捷键

原创 java学习笔记7——面向对象

订单状态:Nonpayment(未付款)、Paid(已付款)、Fulfilled(已配货)、Delivered(已发货)、checked(已确认收货)、Return(退货)、Exchange(换货)、Cancel(取消)- 支付方式:Cash(现金)、WechatPay(微信)、Alipay(支付宝)、BankCard(银行卡)、Creditcard(信用卡)(装箱)基本数据类型 ---> 包装类: ① 使用包装类的构造器 ② (建议)调用包装类的valueOf(xxxxx)为了能够进行这些运算，就。

原创 java学习笔记6——面向对象

编译的时候会认为我们还是调用的person里面的方法，注意前面的virtual是虚拟的意思，调用我们这个虚的方法，编译时方法，也即是父类当中的方法，运行时会动态绑定创建的对象的方法。④ （超纲）子类重写的方法抛出的异常类型可以与父类被重写的方法抛出的异常类型相同，或是父类被重写的方法抛出的异常类型的子类。> 父类被重写的方法的返回值类型是引用数据类型（比如类），则子类重写的方法的返回值类型可以与被重写的方法的返回值。但是，如果出现子类重写了父类的方法或子父类中出现了同名的属性时,

原创 java学习笔记5——面向对象

练习5：重写排序（根据传递的参数来确定是排序还是降序，交换的部分可以重新定义一个方法来交换，注意交换的是数组，通过地址值找到实例对象来交换数据当中的内容，注意有传递的参数为null的情况）1.定义一个Circle类，包含一个double型的radius属性代表圆的半径，一个findArea()方法返回圆的面积。> 创建类以后，在没有显示提供任何构造器的情况下，系统会默认提供一个空参的构造器，且构造器的权限。例如，time为5，则输出半径1，2，3，4，5，以及对应的圆面积。该类的属性和方法如下图所示。

原创 java学习笔记4——数组

定义了一个基准值pivot，有两个指针，一个从数组的从前往后指，另外一个从后往前指，从前往后走，找到的第一个low比pivot大的，就停下来，high从后往前走，找到第一个比pivot小的就停下来，交换low与high，按照当前的索引，继续执行上述操作。定义数组:int[] arr2 = new int[]{2,4,5,8,12,15,19,26,37,49,51,66,89,100};定义数组:int[] arr =new int[]{34,54,3,2,65,7,34,5,76,34,67};

原创 IDEA的相关配置

导入其他项目的模块并且是可以运行的状态，（可以通过操作文件目录，从一个目录移动到另一个目录，或者复制要导入到模块到另一个工程，但是这两种方式导入到模块，不是可以运行的状态），通过下面的方式导入，此外还需要删除，在C盘中AppData目录下Local和Roaming对应目录当中的JetBrains文件。在控制面板中，找到程序，卸载程序，然后删除对应的IDEA即可。也可以单独指定项目下的模块使用的jdk。可以单独指定某一个模块下的字节编码。直接点击下一步next即可导入。可以指定当前项目的jdk。

原创 java学习笔记3——流程控制

java api文档获取随机数：4.需求：获取一个[a,b]范围的随机整数？

原创 java学习笔记2——变量与运算符

s-2，b+4，s+b是int类型，原因：byte，short，char类型的变量之间做运算，结果为int类型。第一位表示的是符号位，那么-1的二进制码也就是10000001，取反之后为11111110。String与基本数据类型之间的转换。针对于short类型的自增。

原创 java学习笔记1——概述

java程序执行步骤。

原创 java运行软件安装以及环境变量配置

java8.0相当于jdk8.0。

原创 Vue3+TS+vite项目笔记1

setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。

原创 jQuery学习笔记3

索引号，如果是亲兄弟，就会编排，如果不是亲兄弟，就不会编排，点击任何一个ul当中的a标签都是索引0。注意头部底部不用复制，头部是seo标识，底部是广告之类的。注意浅拷贝与深拷贝的特点。

原创 jQuery学习笔记2

获取父级元素，以及简写方法。

原创 jQuery学习笔记1

/ jQuery的入口函数// 1.等着DOM结构渲染完毕即可执行内部代码，不必等到所以外部资源加载完毕，jQuery帮我们完成了封装// 相当于原生js中的DOMContentLoaded。