Southern Wind-CSDN博客

原创 vue3——H5页面调起微信订阅通知

/ 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。// 必填，需要使用的JS接口列表。// 必填，公众号的唯一标识。// 必填，生成签名的时间戳。// 必填，生成签名的随机串。

2024-04-08 11:47:47 649

原创 HarmonyOS4.0系列——08、整合UI常用组件

通用组件标签、属性及效果展示

2024-02-19 11:28:15 1339

原创 HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

自定义组件的生命周期，路由以及传参写法

2024-01-19 20:56:30 782

原创 HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。写法和 TS 的一样，简单看一下即可效果：另外，@State 定义的变量归父组件所有。因此，当子组件实例被删除时，该变量不会被销毁。子组件通过@Link装饰器引用状态。状态必须从子级移动到其父级（或父级的父级），以避免在条件内容或重复内容被销毁时丢失状态。

2024-01-13 16:02:15 1193

原创 HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器

看下面这张图Components部分的装饰器为组件级别的状态管理，部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。

2024-01-10 11:15:37 1426

原创 HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles

通用样式类似于css中的class放在struct内调用总结：@Styles 内部样式和外部样式，内部样式优先级高于外部样式，内部不要需要用函数function定义，外部需要function;缺点：只能用于通用样式，@Styles不能进行传参那么如何进行传参呢？

2023-12-29 19:30:00 616

原创 HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章小程序的第三方ui库推荐较多的还是uview的，看起来比较美观，功能也比较完善，下面将提一下Vue3安装uview-plus库的教程。

2023-12-08 22:00:00 1190

原创 HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

当我们需要写多个文本不同但样式相同的效果，需要使用自定义组件来实现，下面是需要注意的几点@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Entry放在哪个组件前面，哪个就在页面上显示在Entry组件中，build()中必须有且只有一个更组件自定义组件必须定义build()函数定义一个的组件@Component。

2023-12-04 11:10:15 534

原创 HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

我们在每次退出编辑器后再次打开会直接进入项目文件中，这样在新建项目用起来很是不方便，所以这里跟着设置一下就好。这样下次进入就不会直接跳转到当时的文件项目中！→重启DevEco-Studio完成汉化。也就是所谓的前端开发方式。

2023-11-24 15:24:21 887

原创 HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

原生鸿蒙OS安装以及运行初始项目

2023-11-20 15:00:38 1539 2

原创策略模式——多重if-else解决方案

策略模式 💤：是一种行为设计模式，它允许你在运行时根据不同情况选择不同的算法或行为。设计模式 🤌：就是提前第一次了解全过程，第二次直接规划不必要的坑。

2023-10-16 15:54:06 1015

原创 ThreeJS——在3D地球上标记中国地图板块

用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转如果是 Vue 写的话需要从生命周期中获取 Dom 元素动画渲染函数用于制作开始场景镜头动画(由远到近并附带略微旋转)这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果此时星空就已经搭建好了，可以左右旋转试试效果其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可绘制红色圆点和点与点之间的飞线效果用画布渲染

2023-08-14 13:14:51 2177

原创微信小程序——XR-frame图像跟踪效果

可以尝试点击切换模式查看效果，会发现两个模式都能够正常渲染普通的页面。然后我就打算尝试按照官网给出的例子继续尝试下去，之后就遇到的问题。在使用xr-frame时，遇到很多坑，这里给出解决办法。这里面是不带这个新的渲染引擎的包。为了避免这个坑，可以使用这个包。

2023-08-08 09:49:29 407

原创 Mindar.JS——实现AR图像追踪插入图片或视频

上面图片提到需要一个Mind文件，这个文件就是图像识别的图片，工具在这里。如果我想扫描图片展示视频该如何去操作呢？我这里加了两张png图片用来做暂停按钮。如果是图片识别显示图片的话就很简单了。// alert('播放')// alert('暂停')// alert('执行')层级往内移动或者让。

2023-07-28 13:05:49 2517 3

原创 Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi

2023-07-17 10:24:06 1774

原创 Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）

两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突。效果：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次，通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug，所以这里可以用解决冲突问题。注意：如果两模型面间隙过小，或者重合，，此渲染器对数深度缓冲区也是没有效果的区别：不加这里拿来测试这里可以进行判断，如果等于100，也就

2023-07-17 09:44:41 641

原创 Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件（图片）

- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;

2023-07-17 09:41:24 948

原创 Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率（结尾附代码）

和都是拥有金属度、粗糙度属性的PBR材质，是的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1，默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型，它是基于物理的渲染（PBR）材质，可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质，可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性，以实现更真实的渲染效果。还支持高光反射和透明度，可以用于创建逼真的玻璃、水

2023-07-17 09:37:13 827

原创 Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用

如果想使用环境贴图对scene所有Mesh添加贴图材质，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中，环境贴图的不同也会对渲染效果造成影响，也需要选择合适的贴图，往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。总结：粗糙度越小，反射效果越强，如果设置为0，那么他将完全镜面反射，等同于镜子。

2023-07-11 12:08:49 1311

原创 Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）

前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法glTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3D 模型格式，以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素，并且可以使用 JSON 格式进行序列化和压缩，从而减少

2023-07-11 11:17:03 4460

原创 Threejs——360°jpg全景环绕

360°全景环绕

2023-06-29 10:00:23 652

原创 ThreeJS案例一——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画

首先我们需要两个模型，一个是场景模型，另一个是人物模型。人物模型我这里用的Threejs官网中的给的模型，名称是。当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来方式二：将所用到的动画统一放在一个时间戳中场景加载完后再放入人物模型：这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型到这里模型就全部引入完成注意：视频无

2023-06-24 16:42:11 2210

原创 Element-Plus——暗黑主题设置

暗黑主题设置

2023-06-15 10:55:39 1756

原创 Vue3——404、重定向以及导航守卫

【代码】Vue3——404、重定向以及导航守卫。

2023-06-15 09:31:48 855

原创 Vue3——首屏加载速度过慢解决方案

具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。在函数内部，创建了一个frameCount ref对象，并定义了一个updateFrameCount函数，用于递增frameCount的值，并在达到maxCount时停止递增。最后，函数返回一个defer函数，用于检查当前帧数是否达到指定的值n。用于实现一个延迟函数。

2023-06-06 11:20:10 1807

原创 Three.js——九、纹理贴图、纹理对象阵列、地面网格辅助观察、UV坐标以及动画

color 和 map 同时使用会出现重叠混合的现象，最好就是设置了 color 就不用设置 map，设置 map 就不用设置 color。把一个背景透明的.png 图像作为平面矩形网格模型 Mesh 的颜色贴图是一个非常有用的功能，通过这样一个功能，可以对 three.js 三维场景进行标注。texture.wrapS是WebGL中纹理对象的属性之一，用于指定纹理在水平方向上的重复方式。，将图片作为圆形的材质贴图，那么他就会将一张方形图片剪切渲染为圆形效果。的UV坐标会对颜色纹理贴图.map进行提取，

2023-06-05 12:03:38 1413

原创 Vue3接收静态页面URL中携带的参数

从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目，我需要从静态页面的链接跳转到Vue项目中，并且这两个项目可以通过参数进行关联这里有两种方案：一种是将静态页面中的id存在本地，在vue中通过获取本地id传给接口从而渲染页面影响：可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数。

2023-06-02 13:26:46 1694

原创 Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

remove和visible的区别：remove是等同于删除某个模型对象，visible只是把模型隐藏起来。// 光源和网格模型Mesh对应一样是三维场景的一部分，自然需要添加到三维场景中才能起作用。，模型默认是以原点为中心，所以要把他拿到X、Y轴上方就给他加一半的坐标，之后将父级。这里跟js中的remove()方法一致，选择对应的父节点删除里面的子节点即可。// 支持的参数：fov, aspect, near, far。这里注意：如果隐藏模型的材质，将会把所有同材质的模型进行隐藏。

2023-06-01 21:20:20 3412

原创 Three.js——七、Group层级模型

通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。

2023-05-30 12:48:07 1432

原创 Element-plus图片上传

Element-plus图片上传功能

2023-05-29 09:37:00 634

原创 Three.js——六、模型对象/材质

该类表示的是一个三维向量（3D vector）。绕着 xyz 轴分别旋转 45 度，0 度，90 度。可以设置模型在场景 Scene 中的位置。网格模型绕(0,1,0)向量表示的轴旋转π/20。复制一份和原对象一样的新对象，可以参考这种写法。设置模型 xyz 坐标。

2023-05-29 09:29:41 618

原创 vant4——自定义Collapse折叠面板右侧的图标改为图片并调整图片旋转

自定义折叠面板图标替换图片

2023-05-18 13:33:16 822

原创 Threejs——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移

本章节针对与几何体的基本概念进行效果展示

2023-05-09 11:26:50 1730

原创 Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

文章：Three.js 常见的几何体：常见的几何体：这里拿平面做示例：Three.js 的材质默认正面可见，反面不可见,对于矩形平面、圆形平面如果你想看到两面，可以设置。高光网格材质和基础网格材质、漫反射网格材质一样都是网格模型的 Mesh 的材质。注意：高光网格材质和漫反射网格材质一样会受到光照的影响。和都会收到光照的影响区别在于，对光线反射方式有差异。可以实现高光反射效果，而恰恰相反。所谓的高光，就比如你在一个太阳下方去看一个小汽车，你会在特定的角度及位置看到玻璃表面某个位置特别亮。可以提供一

2023-05-06 14:07:18 883 2

原创 Three——三、动画执行、画布大小、渲染帧率和相机适配体验

通过 stats.js 库可以查看 three.js 当前的渲染性能，具体说就是计算 three.js 的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是 three.js 每秒钟完成的渲染次数，一般渲染达到每秒钟 60 次为最佳状态。Threejs 渲染的结果是一个 canvas 画布，画布也是 HTML 元素之一，布局和普通前端的习惯是一样的。方法的参数 mode 的数值设置首次打开页面，测试结果的显示模式，鼠标单击可以更换不同的显示模式。所谓的全屏渲染那就是把宽高改成当前窗口高度宽度即可。

2023-05-04 16:15:27 855

原创 Three——二、加强对三维空间的认识

Three.js中给出了多种模拟生活中光源的API，在文档中查找light就可以看到这三种光源看图片大家应该就可以理解，这里主要解释一下环境光后面还会说到环境光主要就是把周围的场景的光打在模型上，比如阴，晴，日，夜，黄昏，黎明等，烘托主体，突出主体，在不使主体淹没在背景中，还具备营造环境气氛的作用点光源PointLight可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。这里代码需要用到点光源，坐标，将光源加载场景中三部即可渲染在浏览器中查看效果注意：这里的材质需要使用。

2023-04-23 20:00:00 824

原创 Three——glb模型压缩

引入外部模型太大？用DRACOLoader压缩一下！

2023-04-23 09:31:54 1642

原创 Three.js——一、初识Three以及基础的前端场景搭建(结尾含源码)

给模型添加标签时需要准标签部分从本章开始会从最初的搭建场景模型开始到插入精灵图部分结尾，便于刚入门three而不知如何去学起的前端工程师去学习，这里可以学到场景搭建的基础知识，引入外部模型以及动画，对模型添加标签以及优化模型方案等。详情可查找搭建3D场景需要认识一下场景Scene相机Camera三个概念，看张图片在创建模型在页面中显示出来时我们需要先创建一个场景(这里所用到的东西都在THREE中，直接就可以了)

2023-04-12 21:00:00 1331