- 博客(275)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Web Worker
Web Worker为前端带来了后端的计算能力，扩大了前端的业务边界；可以实现主线程与复杂计运算线程的分离，从而减轻了因大量计算而造成UI阻塞的情况；不短，还可能出现用户频繁操作，接口数据被覆盖等情况Web Worker为前端带来了后端的计算能力，扩大了前端的业务边界；可以实现主线程与复杂计运算线程的分离，从而减轻了因大量计算而造成UI阻塞的情况；并且更大程度地利用了终端硬件的性能。
2024-08-11 17:07:49
914
原创 Svelte之基础知识二：绑定、生命周期、Stores
只要一个对象正确的使用 subscribe ，它就是可以称之为store。因此，使用特定语法来创建自定义 stores变得非常容易。
2024-03-17 15:39:35
448
原创 Svelte之基础知识一
- Svelte 是一个`构建 web 应用程序的工具`。- Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。但是有一个关键的区别：Svelte 在 `构建/编译阶段` 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中
2024-03-10 10:30:11
1084
原创 Threejs之精灵模型Sprite
Three.js的精灵模型`Sprite`和Threejs的网格模型`Mesh`一样都是模型对象，父类都是`Object3D`,关于精灵模型对象`Sprite`的方法和属性除了可以查看文档Sprite，也可以查看父类`Object3D`。`Sprite`与矩形平面`Mesh`的区别在于,当你旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，你可以发现`Sprite`矩形平面会始终平行于Canvas画布或者说屏幕，而矩形平面`Mesh`的姿态角度会跟着旋转，不一定平行于canvas画
2024-03-03 14:52:01
925
原创 Threejs之生成曲线、几何体
参考资料生成圆弧顶点…山脉地形高度可视化知识点注：基于Three.jsv0.155.0生成圆弧顶点几何体方法.setFromPoints()曲线Curve简介椭圆、圆样条曲线贝塞尔曲线样条、贝塞尔曲线应用组合曲线CurvePath拼接曲线曲线路径管道TubeGeometry旋转成型LatheGeometry轮廓填充ShapeGeometry拉伸ExtrudeGeometry扫描ExtrudeGeometry多边形轮廓Shape简介多边形轮廓Shape(圆弧)多
2023-11-26 15:55:28
520
原创 Threejs之射线拾取模型
参考资料射线Ray…射线拾取Sprite控制场景知识点注：基于Three.jsv0.155.0射线RayRaycaster(射线拾取模型)屏幕坐标转标准设备坐标Raycaster(鼠标点击选中模型)Canvas尺寸变化(射线坐标计算)射线拾取层级模型(模型描边)射线拾取Sprite控制场景代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2023-11-19 17:08:37
522
原创 Threejs之后处理EffectComposer
参考资料后处理(发光描边OutlinePass)…抗锯齿后处理知识点注：基于Three.jsv0.155.0后处理(发光描边OutlinePass)：EffectComposer、RenderPass、OutlinePassOutlinePass描边样式：visibleEdgeColor edgeThickness edgeStrength pulsePeriod Bloom发光通道：UnrealBloomPass多通道组合(GlitchPass和描边)：GlitchPass（闪
2023-11-18 16:50:37
566
原创 Three.js之渲染器和前端UI界面
/ 想把canvas画布上内容下载到本地，需要设置为true。// MeshLambertMaterial：受光。// MeshBasicMaterial：不受光。// 设置对数深度缓冲区，优化深度冲突问题。注：基于Three.js。// 设置模型宽度、高度。// // 辅助点光源。// 网格模型：物体。// 创建一个a链接。
2023-11-11 15:10:27
585
原创 Three.js之PBR材质与环境贴图
所谓PBR就是，基于物理的渲染(physically-based rendering)网格模型材质Lambert光照模型(漫反射)Phong光照模型(漫反射、高光反射)基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射…)PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果，当然也会占用更多的电脑硬件资源。
2023-11-05 17:05:51
704
原创 Three.js之加载外部三维模型
GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。比如你可以把.gltf模型和贴图信息全部合成得到一个.glb文件中，.glb文件相对.gltf文件体积更小，网络传输自然更快。特殊行业项目可能涉及到行业软件，比如机械相关、建筑相关。
2023-11-05 15:07:45
562
原创 Three.js之顶点UV坐标、纹理贴图
- 纹理贴图加载器：TextureLoader- 纹理对象：Texture- 颜色贴图属性.map- 顶点UV坐标- 圆形平面设置纹理贴图：CircleGeometry- 设置阵列模式：THREE.RepeatWrapping- 网格地面辅助观察：GridHelper- 纹理对象.offset属性
2023-09-10 16:34:45
821
1
原创 Three.js之层级模型
- 层级Group- 遍历模型树结构、查询模型节点- 本地坐标和世界坐标- 改变模型相对局部坐标原点位置- 移除对象.remove()- 模型隐藏或显示
2023-09-03 15:50:46
425
原创 Three.js之模型对象、材质
- 三维向量Vector3与模型位置- 欧拉Euler与角度属性.rotation- 模型材质颜色(Color对象)- 模型材质父类Material：透明、面属性- 模型材质和几何体属性- 克隆.clone()和复制.copy()
2023-09-02 16:53:22
724
原创 Three.js之几何体BufferGeometry
- 缓冲类型几何体：BufferGeometry- 定义几何体顶点数据：BufferAttribute- 点模型：Points、PointsMaterial- 线模型：Line、LineBasicMaterial- 网格模型：Mesh、MeshBasicMaterial- 顶点索引：geometry.index- 顶点法线：geometry.attributes.normal- 材质属性-线条模式渲染：.wireframe- 细分数：细分数越大，表面越光滑，但是三角形和顶点数量却越多- 旋
2023-08-27 17:57:15
573
原创 Three.js之几何体、高光材质、渲染器设置、gui
- 长方体：oxGeometry- 球体：SphereGeometry- 圆柱：CylinderGeometry- 矩形平面：PlaneGeometry- 圆形平面：CircleGeometry- 高光网格材质：MeshPhongMaterial（shininess、specular）- WebGL渲染器设置：antialias 、setPixelRatio、setClearColor- gui.js库：
2023-08-20 15:29:35
801
原创 Three.js之相机、渲染器、光源、动画、性能监测
- 透视投影相机PerspectiveCamera- WebGL渲染器WebGLRenderer- 辅助观察坐标系AxesHelper- 漫反射网格材质MeshLambertMaterial- 点光源PointLight- 点光源辅助观察PointLightHelper- 环境光AmbientLight- 平行光DirectionalLight- 平行光辅助观察DirectionalLightHelper- 相机控件OrbitControls- 请求动画帧window.requestAn
2023-08-12 17:12:13
1272
1
原创 Three.js之创建3D场景
有没有原生WebGL基础，你都可以直接学习Three.js,刚刚入门three.js时候，可以先不用学习WebGL，当你需要进阶深入学习Three.js的时候，最好先去学学原生WebGL，了解了解图形学相关理论知识，即便只是稍微入门WebGL，那对于three.js深入学习帮助都是很大的。实际生活中，一个物体往往是有位置的，对于threejs而言也是一样的，你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。Three.js是一款。
2023-07-30 17:07:05
1043
原创 Web3D之简介
Web3D是指在Web浏览器中展示和交互的三维图形技术。它是将三维图形技术与Web技术相结合的产物，可以通过浏览器在网页上呈现出逼真的三维场景、模型和动画。Web3D技术使得用户无需安装额外的插件或软件，只需使用现代的Web浏览器就可以体验到三维图形的交互和视觉效果。Web3D技术通常使用HTML、CSS、JavaScript等Web标准技术进行开发，并使用各种3D引擎和库来实现3D渲染、交互和动画等功能。
2023-07-23 16:22:17
1241
原创 JavaScript之接口和面向接口编程
什么是接口？1. 字面意义上的api接口，供外部使用，不需关注内部实现；2. 静态语言提供的关键字 interface，为编写类提供一种契约，方便编译器检查；3. 面向接口编程的接口。
2023-07-09 14:42:14
645
原创 设计原则之开放-封闭原则
开放封闭原则(Open Closed Principle，OCP)的定义是：当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，但是不允许改动程序的源代码。
2023-07-02 15:52:53
537
原创 设计原则之最少知识原则
最少知识原则(Least Knowledge Principle，LKP)，又叫迪米特法则（Law of Demeter，LoD）。最少知识原则的定义是：一个软件实体应当尽可能少地与其他实体发生相互作用。这里的软件实体是一个广义的概念，不仅包括对象，还包括系统、类、模块、函数、变量等。在应用中，可以引入第三方来管理实体之间的联系。高内聚低耦合。强调了类之间的松耦合，类之间的耦合越弱，越有利于复用，一个处在弱耦合的类被修改，不会对有关系的类造成波及。
2023-07-01 15:18:33
595
原创 设计原则之单一职责原则
单一职责原则(Single Responsibility Principle SRP)的职责：一个对象（方法）只做一件事情。
2023-06-18 15:17:54
387
原创 设计模式之适配器模式
适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”。
2023-06-11 16:48:23
1035
原创 设计模式之状态模式
状态（State）模式属于行为型设计模式，对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为，对象看起来似乎修改了它的类。简单的说，就是定义好各个状态（一般是定义好的），通过一个中间对象来设置和获取当前状态，并执行对应状态的方法。状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。
2023-05-28 16:51:25
1132
原创 设计模式之装饰者模式
装饰者模式（Decorator Pattern）是一种结构型设计模式，给对象动态地增加职责的方式称为装饰者(decorator)模式。装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。跟继承相比，装饰者是一种更轻便灵活的做法。装饰者是一种“即付即用”的方式，比如天冷了就多穿一件外套。在前端中，装饰者模式经常被用于扩展或修改组件的行为或样式。
2023-05-27 15:55:54
1284
1
原创 设计模式之中介者模式
中介者模式的作用就是解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。
2023-05-14 16:10:21
681
原创 设计模式之职责链模式
使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。
2023-05-07 15:20:27
526
原创 设计模式之享元模式
享元模式的英文叫：Flyweight Design Pattern。享元设计模式是用于性能优化的模式，这种设计模式的核心在于可以共享技术并支持对大量细分过后的对象进行调整，如果系统中因为创建大量类似的对象而导致内存占用过高，享元设计模式在其中就会起到非常重要的作用，因为它可以使其减少重复创建相同类似的实例对象。在JavaScript中浏览器特别是移动端的浏览器部分所能够使用的内存并不是很多，所以在其中节省内存就变得至关重要。享元模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结构的方式。
2023-05-03 16:41:33
1003
原创 设计模式之模板方法模式
在《JavaScript设计模式与开发实践》 中对模版方法模式模版方法模式是一种只需使用继承就可以实现的非常简单的模式。模版方法模式抽象父类和具体的实现子类。通常，在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。
2023-04-22 08:15:08
579
原创 设计模式之组合模式
组合模式就是用小的子对象来构建成更大的对象，而这些小的子对象本身也许是更小的“孙对象”构成。又叫 “部分整体” 模式，将对象组合成树形结构，以表示 “部分-整体” 的层次结构。通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性。
2023-04-16 08:17:03
358
原创 设计模式之命令模式
命令模式中的命令指的是一个执行某些特定事情的指令。命令模式有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时需要一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
2023-04-09 15:21:23
587
原创 设计模式之迭代器模式
提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序返回其中的每个元素。
2023-03-25 16:37:36
842
1
原创 设计模式之代理模式
为一个对象提供一个代用品或占位符，以便控制对它的访问。代理模式的关键是当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问。客户实际上访问的是替身对象。替身对象对请求做出一些处理之后，再把请求转交给本体对象。
2023-03-19 16:41:53
330
jQuery实现数字滚动
2015-06-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人