OSGearth城市可视化功能详解本文详细解析了 3D 城市可视化中 12 个核心功能的实现原理与应用场景目录鹰眼Mini-map / Overview Camera城市City Generation / Building System漫游Roaming / Fly-Through经纬线Latitude/Longitude Grid坡度分析Slope Analysis飞线Flow Lines / Arc Lines动态纹理Dynamic Textures卫星模拟Satellite Simulation航拍模拟Aerial Photography Simulation绘制坐标点Point Drawing绘制图形Shape Drawing下雪Snow Effect剖面分析Section / Profile Analysis1. 鹰眼Mini-map / Overview Camera实现原理鹰眼功能本质是一个独立的小地图渲染系统主要步骤创建独立摄像机在场景正上方设置一个俯视摄像机位置固定在高空如 y 100独立渲染器创建小尺寸的 WebGLRenderer如 200×200覆盖在主窗口角落位置同步小地图摄像机跟随主摄像机在 XZ 平面的位置保持俯视视角标记绘制在小地图上用不同颜色的点或图标标记主摄像机位置和朝向核心技术- 双渲染器Multi-Renderer - 摄像机位置同步Camera Position Sync - Mini-map 标记CSS2DRenderer 或 Sprite应用场景导航辅助在大场景中快速定位自身位置城市漫游辅助实时显示摄像机在城市中的相对位置游戏/模拟器战略地图、雷达图2. 城市City Generation / Building System实现原理城市生成通常分为程序化生成和数据驱动两种方式地块划分将城市区域划分为若干街区Block每个街区有尺寸和位置属性建筑生成在每个街区内随机放置建筑参数包括宽度/深度5~25 单位高度10~80 单位产生天际线变化颜色HSL 色相变化纹理细节使用 Canvas 生成窗户纹理随机亮暗表示灯光建筑贴图LOD 多级细节性能优化InstancedMesh 批量渲染同类型建筑LODLevel of Detail远距离简化Frustum Culling 视锥裁剪核心技术- BoxGeometry / InstancedMesh - CanvasTexture 程序化纹理 - LOD 多级细节 - 随机化算法应用场景数字孪生城市智慧城市可视化城市规划建筑密度、天际线仿真游戏开放世界程序化城市生成3. 漫游Roaming / Fly-Through实现原理路径定义设置一系列路点Waypoints每个路点包含位置Position和注视点LookAt插值运动在两路点之间进行线性插值或贝塞尔曲线插值摄像机控制位置插值camera.position.lerpVectors(current, next, progress)朝向插值camera.lookAt(lookTarget)路径类型直线路径线性插值曲线路径Catmull-Rom / Bezier 曲线环绕路径Orbit Controls 自动旋转核心技术- 线性插值Lerp - CatmullRomCurve3 曲线路径 - 摄像机动画系统 - Tween.js / GSAP 动画库应用场景城市宣传片自动生成的飞行游览路径建筑漫游室内/室外漫游展示游戏过场动画脚本化摄像机运动4. 经纬线Latitude/Longitude Grid实现原理纬线Latitude Lines在球面上沿纬度方向φ等间距取点每个纬度圈的水平圆周由 64 个顶点构成通过sin(φ)*cos(θ),cos(φ),sin(φ)*sin(θ)计算顶点位置经线Longitude Lines在球面上沿经度方向θ等间距取点每条经线是从南极到北极的弧线视觉效果赤道线高亮不同颜色/粗度透明度区分经线透明度低于纬线可点击交互拾取经纬度坐标核心技术- SphereGeometry 参数化 - BufferGeometry.setFromPoints() - LineBasicMaterial透明度/颜色区分应用场景地球/星球可视化经纬度参考网格气象数据展示全球数据分析卫星轨道模拟定位参考系统5. 坡度分析Slope Analysis实现原理坡度分析通过计算地形三角面的法向量与水平面的夹角来实现法向量计算edge1 v2 - v1 edge2 v3 - v1 normal edge1 × edge2归一化坡度角度angle acos(|normal · up|) slope angle * 180 / π分级着色两种实现方式CPU 方式遍历所有三角面计算坡度按坡度分级赋予颜色绿→黄→橙→红GPU 方式Shader在顶点着色器中计算法向量在片元着色器中实时计算坡度并着色性能更高支持实时更新坡度分级标准坡度范围颜色等级描述0°~5°绿色 #22cc44Ⅰ级平坦5°~15°黄色 #cccc22Ⅱ级缓坡15°~30°橙色 #cc6622Ⅲ级陡坡30°红色 #cc2222Ⅳ级极陡应用场景地形分析建筑用地适宜性评估道路规划选线方案比选地质灾害评估滑坡风险区域识别6. 飞线Flow Lines / Arc Lines实现原理飞线用于表示两点之间的数据流动核心是弧形轨迹 动态流动效果弧线生成起点startPos和终点endPos计算中点mid (startPos endPos) / 2弧高控制mid.y distance * 0.3使用 QuadraticBezierCurve3 生成贝塞尔曲线流动动画CPU 方式更新顶点透明度形成光点沿路径移动的效果GPU 方式Shader使用aProgress属性表示每个顶点在路径上的进度片元着色器中计算流动位置flowPos mod(vProgress time * speed, 1.0)亮度随流动位置变化产生拖尾效果多线渲染优化使用 LineSegments 批处理颜色编码不同数据类别使用不同颜色核心技术- QuadraticBezierCurve3贝塞尔弧线 - ShaderMaterial 流动效果 - 透明度混合AdditiveBlending应用场景数据流向可视化人口迁移、物流路线网络拓扑展示通信数据流交通流量航线、车流轨迹7. 动态纹理Dynamic Textures实现原理动态纹理是通过实时更新纹理内容实现的视觉效果方式一Canvas 纹理创建 HTML Canvas 元素使用 Canvas 2D API 绘制内容创建THREE.CanvasTexture(canvas)在动画循环中更新 Canvas 内容并设置texture.needsUpdate true方式二Video 纹理创建 HTML Video 元素加载视频源创建THREE.VideoTexture(video)视频自动播放纹理实时更新方式三DataTexture像素级操作创建THREE.DataTexture(data, width, height)直接操作像素缓冲区Uint8Array适用于粒子系统、噪声生成等动态纹理类型示例类型实现方式更新频率水波纹Canvas 绘制椭圆弧线每帧更新建筑灯光像素级随机闪烁每帧更新信息流动Canvas 绘制移动文字/图形每帧更新视频播放VideoTexture视频帧率应用场景水面/流体模拟实时水纹理信息展示屏数据大屏动态内容特效制作动态光效、LED屏幕8. 卫星模拟Satellite Simulation实现原理地球模型球体创建SphereGeometry(radius, 64, 64)纹理映射地表贴图 法线贴图 高光贴图大气层略大于地球的半透明球体radius × 1.02Shader 实现边缘发光效果Fresnel 效应混合模式AdditiveBlending卫星轨道轨道参数半长轴a、偏心率e轨道倾角i、升交点赤经Ω真近点角θ轨道计算r a * (1 - e²) / (1 e * cos(θ)) x r * cos(θ) z r * sin(θ) // 应用倾角和升交点赤经旋转卫星模型主体BoxGeometry太阳能板两侧展开朝向运动方向Quaternion 旋转动画逻辑卫星沿轨道点移动位置插值平滑运动速度可配置不同卫星不同速度应用场景航天任务可视化卫星轨道模拟天基观测卫星覆盖区域分析教育科普轨道力学教学9. 航拍模拟Aerial Photography Simulation实现原理无人机模拟三维模型机身 旋翼臂简化模型飞行路径环绕飞行Orbit圆心 半径 高度航线飞行Waypoints预设路径点自由飞行Free用户控制摄像机参数模拟- 焦距focalLength模拟真实相机镜头 - 地面采样距离GSD (高度 × 传感器宽度) / (焦距 × 1000) - 快门速度影响运动模糊 - ISO模拟噪声效果视觉效果大气雾效FogExp2模拟空气透视摄像机抖动添加微小随机偏移模拟真实航拍光晕/眩光镜头光晕效果Lens Flare应用场景影视预可视化航拍镜头规划测绘模拟无人机航测路径规划游戏/VR飞行体验10. 绘制坐标点Point Drawing实现原理屏幕坐标转世界坐标射线检测Raycastermouse.x(event.clientX/width)*2-1mouse.y-(event.clientY/height)*21raycaster.setFromCamera(mouse,camera)raycaster.ray.intersectPlane(groundPlane,intersectPoint)地面平面检测与水平面y0求交标记点的三种实现方式方式优势劣势Sprite精灵始终面向摄像机性能好不能立体显示3D 几何体Cone/Sphere立体感强可加光照远距离变小CSS2DRenderer可渲染 HTML 标签交互性强渲染层分离标记功能脉冲动画scale 1 sin(time) * 0.2实现呼吸效果颜色编码不同类别使用不同颜色文本标签使用 CSS2DRenderer 或 Sprite 显示文字应用场景地图标注POI 点标记数据可视化事件位置标记测量工具坐标采集11. 绘制图形Shape Drawing实现原理多边形绘制交互绘制鼠标点击收集顶点实时预览当前绘制状态双击/右键完成绘制3D 几何体生成Shape2D轮廓→ ExtrudeGeometry挤压成3D → 旋转至水平rotation.x -π/2 → 设置透明度填充边框绘制将顶点连接为 LineLoop可设置不同颜色和粗细图形类型类型实现方式应用矩形对角两点定义选择框、区域标注圆形圆心半径缓冲区、覆盖范围多边形多点序列任意区域标注箭头方向向量箭头计算方向指示曲线贝塞尔/样条路径标注交互功能拖拽调整拖动顶点修改形状吸附功能顶点吸附到网格或其他顶点面积/周长计算实时显示测量数据应用场景地理标注区域划定、地物标注测量工具距离、面积测量规划设计建筑红线、用地范围12. 下雪Snow Effect实现原理下雪效果使用**粒子系统Points/PointsMaterial**实现1. 粒子初始化constparticleCount10000;constgeometrynewTHREE.BufferGeometry();constpositionsnewFloat32Array(particleCount*3);constvelocitiesnewFloat32Array(particleCount);// 在三维空间随机分布for(leti0;iparticleCount;i){positions[i*3](Math.random()-0.5)*200;// Xpositions[i*31]Math.random()*100;// Ypositions[i*32](Math.random()-0.5)*200;// Zvelocities[i]0.5Math.random()*1.5;// 下落速度}geometry.setAttribute(position,newTHREE.BufferAttribute(positions,3));2. 粒子材质consttexturecreateSnowflakeTexture();// Canvas绘制雪花形状constmaterialnewTHREE.PointsMaterial({size:0.5,map:texture,transparent:true,opacity:0.8,blending:THREE.AdditiveBlending,depthWrite:false,});3. 雪花纹理Canvas绘制绘制六角形雪花形状边缘模糊处理产生透明度渐变可随机生成多种雪花形态4. 动画循环// 每个粒子向下移动positions[i*31]-velocities[i]*deltaTime;// 添加水平飘动positions[i*3]Math.sin(timei)*0.02;positions[i*32]Math.cos(time*0.7i*0.3)*0.02;// 超出底部则重置到顶部if(positions[i*31]-10){positions[i*31]100;positions[i*3](Math.random()-0.5)*200;positions[i*32](Math.random()-0.5)*200;}5. 风效果可选添加风向向量粒子沿风向偏移风速变化产生飘忽感旋转粒子产生旋转效果优化技巧使用BufferGeometry而非Geometry粒子数量控制在合理范围5000~20000使用frustumCulled false避免裁剪问题LOD远景减少粒子数应用场景天气模拟降雪可视化场景氛围冬季城市效果特效制作粒子系统教学13. 剖面分析Section / Profile Analysis实现原理剖面分析用于展示地形或模型在某一截面上的高程变化方法一切割平面Clipping Plane定义切割平面使用THREE.Plane定义切割位置和方向渲染器启用裁剪renderer.localClippingEnabledtrue;material.clippingPlanes[clippingPlane];material.clipShadowstrue;截面填充使用Stencil Buffer在切割面处绘制填充颜色方法二采样插值适合地形定义剖面线在水平面上定义一条直线或折线高程采样沿剖面线等距采样点对每个采样点获取地形高度通过射线检测或高度图采样生成剖面图采样点 (x, z) → 获取 y高度 展平为 2D横坐标 沿路径距离纵坐标 高程绘制剖面曲线使用 Line 或 AreaChart 绘制方法三Shader 实现实时切割- 在片元着色器中判断像素是否在切割面一侧 - 丢弃另一侧的片段discard - 在切割边缘绘制高亮线剖面图内容元素说明地形曲线沿剖面线的高程变化地质分层不同地质材料的分层显示标注信息最高点、最低点、坡度标注比例尺水平和垂直比例尺网格线参考网格应用场景地形分析山谷、山脊、坡度变化分析道路设计纵断面设计、填挖方计算地质勘探地层结构可视化管线规划地下管线剖面展示总结功能核心技术主要应用鹰眼双渲染器 摄像机同步导航辅助城市InstancedMesh 程序化纹理数字孪生漫游路径插值 摄像机动画自动游览经纬线球面参数化 LineSegments参考网格坡度分析法向量计算 Shader着色地形评估飞线贝塞尔曲线 Shader流动数据流向动态纹理Canvas/Video/DataTexture特效展示卫星模拟轨道力学 地球渲染航天可视化航拍模拟飞行路径 相机参数模拟航拍规划绘制坐标点Raycaster Sprite/几何体地图标注绘制图形Shape ExtrudeGeometry区域标记下雪粒子系统 PointsMaterial天气模拟剖面分析ClippingPlane / 高程采样地形分析
OSGearth开发
OSGearth城市可视化功能详解本文详细解析了 3D 城市可视化中 12 个核心功能的实现原理与应用场景目录鹰眼Mini-map / Overview Camera城市City Generation / Building System漫游Roaming / Fly-Through经纬线Latitude/Longitude Grid坡度分析Slope Analysis飞线Flow Lines / Arc Lines动态纹理Dynamic Textures卫星模拟Satellite Simulation航拍模拟Aerial Photography Simulation绘制坐标点Point Drawing绘制图形Shape Drawing下雪Snow Effect剖面分析Section / Profile Analysis1. 鹰眼Mini-map / Overview Camera实现原理鹰眼功能本质是一个独立的小地图渲染系统主要步骤创建独立摄像机在场景正上方设置一个俯视摄像机位置固定在高空如 y 100独立渲染器创建小尺寸的 WebGLRenderer如 200×200覆盖在主窗口角落位置同步小地图摄像机跟随主摄像机在 XZ 平面的位置保持俯视视角标记绘制在小地图上用不同颜色的点或图标标记主摄像机位置和朝向核心技术- 双渲染器Multi-Renderer - 摄像机位置同步Camera Position Sync - Mini-map 标记CSS2DRenderer 或 Sprite应用场景导航辅助在大场景中快速定位自身位置城市漫游辅助实时显示摄像机在城市中的相对位置游戏/模拟器战略地图、雷达图2. 城市City Generation / Building System实现原理城市生成通常分为程序化生成和数据驱动两种方式地块划分将城市区域划分为若干街区Block每个街区有尺寸和位置属性建筑生成在每个街区内随机放置建筑参数包括宽度/深度5~25 单位高度10~80 单位产生天际线变化颜色HSL 色相变化纹理细节使用 Canvas 生成窗户纹理随机亮暗表示灯光建筑贴图LOD 多级细节性能优化InstancedMesh 批量渲染同类型建筑LODLevel of Detail远距离简化Frustum Culling 视锥裁剪核心技术- BoxGeometry / InstancedMesh - CanvasTexture 程序化纹理 - LOD 多级细节 - 随机化算法应用场景数字孪生城市智慧城市可视化城市规划建筑密度、天际线仿真游戏开放世界程序化城市生成3. 漫游Roaming / Fly-Through实现原理路径定义设置一系列路点Waypoints每个路点包含位置Position和注视点LookAt插值运动在两路点之间进行线性插值或贝塞尔曲线插值摄像机控制位置插值camera.position.lerpVectors(current, next, progress)朝向插值camera.lookAt(lookTarget)路径类型直线路径线性插值曲线路径Catmull-Rom / Bezier 曲线环绕路径Orbit Controls 自动旋转核心技术- 线性插值Lerp - CatmullRomCurve3 曲线路径 - 摄像机动画系统 - Tween.js / GSAP 动画库应用场景城市宣传片自动生成的飞行游览路径建筑漫游室内/室外漫游展示游戏过场动画脚本化摄像机运动4. 经纬线Latitude/Longitude Grid实现原理纬线Latitude Lines在球面上沿纬度方向φ等间距取点每个纬度圈的水平圆周由 64 个顶点构成通过sin(φ)*cos(θ),cos(φ),sin(φ)*sin(θ)计算顶点位置经线Longitude Lines在球面上沿经度方向θ等间距取点每条经线是从南极到北极的弧线视觉效果赤道线高亮不同颜色/粗度透明度区分经线透明度低于纬线可点击交互拾取经纬度坐标核心技术- SphereGeometry 参数化 - BufferGeometry.setFromPoints() - LineBasicMaterial透明度/颜色区分应用场景地球/星球可视化经纬度参考网格气象数据展示全球数据分析卫星轨道模拟定位参考系统5. 坡度分析Slope Analysis实现原理坡度分析通过计算地形三角面的法向量与水平面的夹角来实现法向量计算edge1 v2 - v1 edge2 v3 - v1 normal edge1 × edge2归一化坡度角度angle acos(|normal · up|) slope angle * 180 / π分级着色两种实现方式CPU 方式遍历所有三角面计算坡度按坡度分级赋予颜色绿→黄→橙→红GPU 方式Shader在顶点着色器中计算法向量在片元着色器中实时计算坡度并着色性能更高支持实时更新坡度分级标准坡度范围颜色等级描述0°~5°绿色 #22cc44Ⅰ级平坦5°~15°黄色 #cccc22Ⅱ级缓坡15°~30°橙色 #cc6622Ⅲ级陡坡30°红色 #cc2222Ⅳ级极陡应用场景地形分析建筑用地适宜性评估道路规划选线方案比选地质灾害评估滑坡风险区域识别6. 飞线Flow Lines / Arc Lines实现原理飞线用于表示两点之间的数据流动核心是弧形轨迹 动态流动效果弧线生成起点startPos和终点endPos计算中点mid (startPos endPos) / 2弧高控制mid.y distance * 0.3使用 QuadraticBezierCurve3 生成贝塞尔曲线流动动画CPU 方式更新顶点透明度形成光点沿路径移动的效果GPU 方式Shader使用aProgress属性表示每个顶点在路径上的进度片元着色器中计算流动位置flowPos mod(vProgress time * speed, 1.0)亮度随流动位置变化产生拖尾效果多线渲染优化使用 LineSegments 批处理颜色编码不同数据类别使用不同颜色核心技术- QuadraticBezierCurve3贝塞尔弧线 - ShaderMaterial 流动效果 - 透明度混合AdditiveBlending应用场景数据流向可视化人口迁移、物流路线网络拓扑展示通信数据流交通流量航线、车流轨迹7. 动态纹理Dynamic Textures实现原理动态纹理是通过实时更新纹理内容实现的视觉效果方式一Canvas 纹理创建 HTML Canvas 元素使用 Canvas 2D API 绘制内容创建THREE.CanvasTexture(canvas)在动画循环中更新 Canvas 内容并设置texture.needsUpdate true方式二Video 纹理创建 HTML Video 元素加载视频源创建THREE.VideoTexture(video)视频自动播放纹理实时更新方式三DataTexture像素级操作创建THREE.DataTexture(data, width, height)直接操作像素缓冲区Uint8Array适用于粒子系统、噪声生成等动态纹理类型示例类型实现方式更新频率水波纹Canvas 绘制椭圆弧线每帧更新建筑灯光像素级随机闪烁每帧更新信息流动Canvas 绘制移动文字/图形每帧更新视频播放VideoTexture视频帧率应用场景水面/流体模拟实时水纹理信息展示屏数据大屏动态内容特效制作动态光效、LED屏幕8. 卫星模拟Satellite Simulation实现原理地球模型球体创建SphereGeometry(radius, 64, 64)纹理映射地表贴图 法线贴图 高光贴图大气层略大于地球的半透明球体radius × 1.02Shader 实现边缘发光效果Fresnel 效应混合模式AdditiveBlending卫星轨道轨道参数半长轴a、偏心率e轨道倾角i、升交点赤经Ω真近点角θ轨道计算r a * (1 - e²) / (1 e * cos(θ)) x r * cos(θ) z r * sin(θ) // 应用倾角和升交点赤经旋转卫星模型主体BoxGeometry太阳能板两侧展开朝向运动方向Quaternion 旋转动画逻辑卫星沿轨道点移动位置插值平滑运动速度可配置不同卫星不同速度应用场景航天任务可视化卫星轨道模拟天基观测卫星覆盖区域分析教育科普轨道力学教学9. 航拍模拟Aerial Photography Simulation实现原理无人机模拟三维模型机身 旋翼臂简化模型飞行路径环绕飞行Orbit圆心 半径 高度航线飞行Waypoints预设路径点自由飞行Free用户控制摄像机参数模拟- 焦距focalLength模拟真实相机镜头 - 地面采样距离GSD (高度 × 传感器宽度) / (焦距 × 1000) - 快门速度影响运动模糊 - ISO模拟噪声效果视觉效果大气雾效FogExp2模拟空气透视摄像机抖动添加微小随机偏移模拟真实航拍光晕/眩光镜头光晕效果Lens Flare应用场景影视预可视化航拍镜头规划测绘模拟无人机航测路径规划游戏/VR飞行体验10. 绘制坐标点Point Drawing实现原理屏幕坐标转世界坐标射线检测Raycastermouse.x(event.clientX/width)*2-1mouse.y-(event.clientY/height)*21raycaster.setFromCamera(mouse,camera)raycaster.ray.intersectPlane(groundPlane,intersectPoint)地面平面检测与水平面y0求交标记点的三种实现方式方式优势劣势Sprite精灵始终面向摄像机性能好不能立体显示3D 几何体Cone/Sphere立体感强可加光照远距离变小CSS2DRenderer可渲染 HTML 标签交互性强渲染层分离标记功能脉冲动画scale 1 sin(time) * 0.2实现呼吸效果颜色编码不同类别使用不同颜色文本标签使用 CSS2DRenderer 或 Sprite 显示文字应用场景地图标注POI 点标记数据可视化事件位置标记测量工具坐标采集11. 绘制图形Shape Drawing实现原理多边形绘制交互绘制鼠标点击收集顶点实时预览当前绘制状态双击/右键完成绘制3D 几何体生成Shape2D轮廓→ ExtrudeGeometry挤压成3D → 旋转至水平rotation.x -π/2 → 设置透明度填充边框绘制将顶点连接为 LineLoop可设置不同颜色和粗细图形类型类型实现方式应用矩形对角两点定义选择框、区域标注圆形圆心半径缓冲区、覆盖范围多边形多点序列任意区域标注箭头方向向量箭头计算方向指示曲线贝塞尔/样条路径标注交互功能拖拽调整拖动顶点修改形状吸附功能顶点吸附到网格或其他顶点面积/周长计算实时显示测量数据应用场景地理标注区域划定、地物标注测量工具距离、面积测量规划设计建筑红线、用地范围12. 下雪Snow Effect实现原理下雪效果使用**粒子系统Points/PointsMaterial**实现1. 粒子初始化constparticleCount10000;constgeometrynewTHREE.BufferGeometry();constpositionsnewFloat32Array(particleCount*3);constvelocitiesnewFloat32Array(particleCount);// 在三维空间随机分布for(leti0;iparticleCount;i){positions[i*3](Math.random()-0.5)*200;// Xpositions[i*31]Math.random()*100;// Ypositions[i*32](Math.random()-0.5)*200;// Zvelocities[i]0.5Math.random()*1.5;// 下落速度}geometry.setAttribute(position,newTHREE.BufferAttribute(positions,3));2. 粒子材质consttexturecreateSnowflakeTexture();// Canvas绘制雪花形状constmaterialnewTHREE.PointsMaterial({size:0.5,map:texture,transparent:true,opacity:0.8,blending:THREE.AdditiveBlending,depthWrite:false,});3. 雪花纹理Canvas绘制绘制六角形雪花形状边缘模糊处理产生透明度渐变可随机生成多种雪花形态4. 动画循环// 每个粒子向下移动positions[i*31]-velocities[i]*deltaTime;// 添加水平飘动positions[i*3]Math.sin(timei)*0.02;positions[i*32]Math.cos(time*0.7i*0.3)*0.02;// 超出底部则重置到顶部if(positions[i*31]-10){positions[i*31]100;positions[i*3](Math.random()-0.5)*200;positions[i*32](Math.random()-0.5)*200;}5. 风效果可选添加风向向量粒子沿风向偏移风速变化产生飘忽感旋转粒子产生旋转效果优化技巧使用BufferGeometry而非Geometry粒子数量控制在合理范围5000~20000使用frustumCulled false避免裁剪问题LOD远景减少粒子数应用场景天气模拟降雪可视化场景氛围冬季城市效果特效制作粒子系统教学13. 剖面分析Section / Profile Analysis实现原理剖面分析用于展示地形或模型在某一截面上的高程变化方法一切割平面Clipping Plane定义切割平面使用THREE.Plane定义切割位置和方向渲染器启用裁剪renderer.localClippingEnabledtrue;material.clippingPlanes[clippingPlane];material.clipShadowstrue;截面填充使用Stencil Buffer在切割面处绘制填充颜色方法二采样插值适合地形定义剖面线在水平面上定义一条直线或折线高程采样沿剖面线等距采样点对每个采样点获取地形高度通过射线检测或高度图采样生成剖面图采样点 (x, z) → 获取 y高度 展平为 2D横坐标 沿路径距离纵坐标 高程绘制剖面曲线使用 Line 或 AreaChart 绘制方法三Shader 实现实时切割- 在片元着色器中判断像素是否在切割面一侧 - 丢弃另一侧的片段discard - 在切割边缘绘制高亮线剖面图内容元素说明地形曲线沿剖面线的高程变化地质分层不同地质材料的分层显示标注信息最高点、最低点、坡度标注比例尺水平和垂直比例尺网格线参考网格应用场景地形分析山谷、山脊、坡度变化分析道路设计纵断面设计、填挖方计算地质勘探地层结构可视化管线规划地下管线剖面展示总结功能核心技术主要应用鹰眼双渲染器 摄像机同步导航辅助城市InstancedMesh 程序化纹理数字孪生漫游路径插值 摄像机动画自动游览经纬线球面参数化 LineSegments参考网格坡度分析法向量计算 Shader着色地形评估飞线贝塞尔曲线 Shader流动数据流向动态纹理Canvas/Video/DataTexture特效展示卫星模拟轨道力学 地球渲染航天可视化航拍模拟飞行路径 相机参数模拟航拍规划绘制坐标点Raycaster Sprite/几何体地图标注绘制图形Shape ExtrudeGeometry区域标记下雪粒子系统 PointsMaterial天气模拟剖面分析ClippingPlane / 高程采样地形分析
