于一的博客
搜索文章
首页
分类
文章
前端开发
情绪
关于我
心路
首页
分类
文章
前端开发
情绪
关于我
心路
于一
无限进步！
全部
默认分类 (182)
前端开发 (184)
HTML+CSS (23)
JavaScript (15)
ES6 (19)
TypeScript (28)
Canvas 2D (21)
图表+ECharts (7)
WebSocket+MQTT (7)
阶段1收官 (7)
Vue3 (14)
Canvas × Vue (7)
阶段2收官 (7)
Three.js (28)
情绪 (0)
【Three.js】day126-boss-data-dashboard
Day 126 · BOSS 战 — 3D 数据看板交付日：柱、面、点与交互的四线合流 前五天把数据管线的每一环做通了：映射设计、柱/面/点三种形态、数据层与渲染层解耦、拾取联动。今天把它们合流成"3D 数据看板"并做最终验收。参照 Day 70/119 的交付纪律：今天以验收、录片、成文为主，不写
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day125-interaction-drilldown
Day 125 · 交互与钻取 — 拾取、tooltip 与联动：让数据看板"能查" 前四天让图表"能看"，今天让它"能查"——点击一根柱子弹出它的详情、hover 曲面某处显示该点温度、选中某个设备联动 2D 图表。这是数据可视化从"展示"到"分析"的分水岭。核心三件事：Raycaster 拾取（
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day124-data-render-decoupling
Day 124 · 数据层与渲染层解耦 — 为实时数据铺好管道（本周架构核心） 前三天把柱/面/点三种图表做出来了，但它们现在都"直接吃数据"——数据格式一变，图表代码就要改。今天做本周（甚至整个数字孪生主线）最关键的一件事：把数据层与渲染层解耦。解耦 = 渲染层只认"归一化数值快照"，不认"能耗/
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day123-particle-flowfield
Day 123 · 粒子与流场 — 用 Points 让"空间数据"活起来 柱状图管"离散类目"、曲面管"连续场"，今天补上第三类：空间点位与密度/流向。工业场景里最常见的需求是"这一片区域里，某指标的空间分布"（厂区空气质量、管道流速、人员/设备密度）——数据是一堆带坐标的点。Three.js 处
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day122-heat-surface
Day 122 · 3D 曲面与热力图 — 顶点位移成"地形"：温度场立起来 柱状图表达"离散类目"，今天处理连续场（温度场/压力场/高度场）：把一块平面网格的每个顶点，用数据抬高成起伏的"地形"，再用顶点颜色把数值涂上去——这就是 3D 热力曲面。核心三件事：PlaneGeometry 的顶点结构
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day121-3d-bar-chart
Day 121 · 3D 柱状图 — 数据驱动的柱体与实例化：500 根柱子不卡 昨天的映射图纸今天落地第一张：3D 柱状图——最常用、最能体现"数据驱动渲染"的形态。核心三件事：用数据生成柱子几何体（高度/位置/颜色全部由数据算出来）、用 InstancedMesh 让 500+ 根柱子只花 1
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day120-data-mapping
Day 120 · 数据映射思维 — 2D 图表到 3D 形态：动手前的设计日 今天一行渲染代码都不写，先建立"数据 → 3D 形态"的映射思维。这是本周的施工图：数据刻度怎么归一化、柱/面/粒子分别适合什么数据、颜色怎么映射才可读。3D 可视化的失败 90% 死在映射设计——数据没想清楚就堆几何体
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day119-boss-workshop-v3
Day 119 · BOSS 战 — 车间 3.0 交付日：氛围、特效与性能的三线合流 前六天把氛围（粒子+辉光）、特效（着色器）、性能（预算+降档）三条线各自做透了，今天把它们合流成"3D 车间 3.0"并做最终验收。参照 Day 70 的交付纪律：今天以验收、录片、成文为主，不写大块新代码——任
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day118-performance-budget
Day 118 · 性能与体验优化 — 合并几何、FPS 预算与动效纪律：给效果记账 前四天把"好看"做到了极致：粒子、辉光、调色、着色器、LOD——但每一个效果都是成本。今天不写新特效，做本周的收尾功夫：先把"每个效果花了几毫秒"用一张 FPS 预算表 记清楚，再用 合并几何 / 纹理图集
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day117-shader-practice
Day 117 · 着色器实战 — 扫描脉冲、能量发光与顶点动画 Day 116 你学会了 GLSL 基础，写出会呼吸的发光平面。今天把它们拼成真正的工业特效——三种最常见的工业 3D 效果：扫描脉冲（光带沿设备扫过，体现"数据流动"）、设备能量发光（选中/告警时设备外圈泛光）、顶点动画（形状变形，
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day116-shader-basics
Day 116 · 自定义着色器入门 — 打开 3D 特效的最后一道门 前三周你一直在 Three.js 的"预设材质"里工作：MeshStandardMaterial 调参数、贴图、光照——效果好，但有天花板。今天打开最后一道门：自定义着色器（ShaderMaterial）。着色器是"直接给 GP
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day115-lod-optimization
Day 115 · LOD 与渲染优化 — 让"上量"不卡 Day 106 用实例化解决了"重复设备"；但 50 台不同的模型设备呢？粒子、辉光、阴影叠加后呢？今天的主题LOD（Level of Detail，细节层次）：同一个设备准备"高模/中模/低模"三档，离得近用高模、离得远用低模——人眼根本
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day114-postprocessing-advanced
Day 114 · 后期处理进阶 — 辉光与工业调色：画面的"高级感" Day 109 你已经把 EffectComposer 跑起来了（渲染 → OutlinePass 描边）。今天的主题是让画面有"电影感"：UnrealBloomPass 辉光（工业大屏最出效果的后处理——设备边缘、指示灯、扫描
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day113-particle-system
Day 113 · 粒子系统 — 扫描线、粉尘与火花：让车间"活"起来 前两周的车间"真实但静止"——设备在转，但空气是空的。今天的主题粒子系统：用成千上万个"点"营造工业氛围——扫描线扫过车间、粉尘在光柱里浮动、告警火花迸溅。粒子是"氛围"最便宜的工具：一个 Points 对象就能承载几千个点，成
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day112-boss-workshop-v2
Day 112 · BOSS 战 — 3D 车间 2.0：十天资产拧成一件作品 第 16 周收官。今天把 Day 106-111 攒下的全部资产——真实模型、贴图质感、阴影描边、关键帧动画、加载降级——拧成"3D 车间 2.0"。上午组装（全效果整合 + 布局 + 交互），下午验收（功能清单 + 性
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day111-asset-integration
Day 111 · 资产集成与边界 — 加载态、资源管理与降级 前九天你把资产做出来了：模型、贴图、动画、阴影。但它们都是异步加载的——这引出一个工程问题：页面怎么优雅地等它们？ 今天解决三件事：加载态（进度条 + 加载完成才渲染，不让用户看"黑屏/半成品"）、资源管理（缓存、释放、成对纪律的系统化
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day110-animation-system
Day 110 · 动画系统 — 让设备"动"起来 前九天的车间是"静态大片"：真实模型、质感材质、阴影氛围——但设备不动。今天的主题动画系统：模型自带动画怎么播放（AnimationMixer）、代码里怎么编动作（关键帧 KeyframeTrack）、以及"叶轮转 + 指示灯闪"这类设备动作怎么编
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day109-shadow-outline
Day 109 · 阴影与描边 — 让车间"立得住、看得清" Day 101 的三灯法则给了立体感，但设备脚下没有影子——浮在空中的观感。今天的两个主题：**阴影（Shadow）**让设备"踩"在地上，**描边（OutlinePass）**让选中设备"发光圈"——同时替换掉 Day 104 那个"换
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day108-model-import
Day 108 · 模型导入 — GLTF 与 GLB：让真实设备进车间 前六天设备都是"几何拼装"的——能看，但"一眼假"。真实工业项目里，设备来自 3D 建模（Blender/SolidWorks/Revit 导出），前端要做的是导入。今天的主题：3D 行业的通用格式 GLTF/GLB、GLTF
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
【Three.js】day107-materials-textures
Day 107 · 材质与贴图 — 从"纯色"到"真实质感" Day 101 你学会了材质类型，但材质只有 color——整个世界像"塑料玩具"。今天的主题是让材质有真实质感：贴图（Texture）把一张图片"贴"到几何表面，UV 决定贴图怎么铺，环境贴图（Environment）让金属真正反光——
作者：mario
发布时间：2026-09-07
分类：
默认分类
,
Three.js
标签：
#
前端开发
共 183 篇文章
1
2
3
4
5
6
7
8
9
10
页
# 情绪
(0)
# 前端开发
(183)
友情链接
github
Gitee
