Three.js - 超腾开源标签

本文介绍了如何使用Three.js结合卷积法实现平滑的物体描边效果，用于物体选中高亮或轮廓识别。文章指出传统法线延展法存在法线夹角大时描边断裂的缺陷，而卷积法通过图像处理中的卷积运算检测边缘，效果更自然。实现步骤包括：首先生成掩膜纹理（将目标物体渲染为白色，其他区域黑色），然后通过片元着色器进行卷积计算得到灰色边框，最后将边框叠加到原始场景上。该方法相比法线延展法更平滑，能有效避免断裂问题，提升三维场景视觉体验。

本文介绍了在Three.js中利用GPU选取物体并计算交点位置的技术，解决了传统Raycaster在大模型（如40万面）场景下的性能瓶颈。核心思想是为每个模型分配独立颜色并渲染到离屏缓冲区，通过读取鼠标位置像素颜色识别物体；交点计算则通过渲染深度信息并反算世界坐标实现。文章详细说明了选取材质创建、颜色分配、深度着色器编码、像素读取及世界坐标反推的完整流程，并给出了顶点与片元着色器代码。该技术适用于鼠标Hover、模型预览、测量工具等高性能交互场景，能在一帧内完成选取和交点计算。

本文介绍了一种利用Three.js创建大小不随场景变化的三维文字标注方法，解决了传统HTML元素无法被模型遮挡以及文字贴图随相机距离缩放的问题。核心步骤包括：在Canvas上绘制带黑色描边的白色文字以确保清晰度，再通过自定义着色器材质将文字渲染到三维场景中。顶点着色器通过计算屏幕坐标固定文字大小，片元着色器通过UV坐标取整避免文字模糊。该方法具有真正的三维遮挡效果和恒定的阅读尺寸，适用于建筑标注、设备标签、游戏UI等场景。文章还提供了完整示例代码和解决文字模糊的实用技巧。

本文从底层着色器原理出发，手动实现了Three.js中四种常用材质：基本材质不受光照影响直接显示纹理；兰伯特材质仅计算漫反射，适合粗糙表面；冯氏材质增加高光反射，表现光滑表面；标准材质基于物理渲染，通过金属度和粗糙度模拟真实材质。每种材质均附有顶点和片元着色器代码，并假设场景仅含环境光和平行光及一张漫反射贴图。文章还对比了各材质的特点与适用场景，并提供了BRDF、光照模型等参考资料。

vtk.js无法直接加载vtu文件，需要通过ParaView进行格式转换。具体步骤包括：下载并安装ParaView 5.13.1及对应Python版本，将其bin目录添加至环境变量；创建Vue项目并安装vtk.js依赖；复制vtk.js自带的转换脚本并修改Python路径；编写convert.py脚本将vtu文件转换为vtk.js可加载的格式；在Vue组件中使用HttpDataSetSeriesReader加载处理后的文件，并实现时间步进动画；最后需要修改HttpDataAccessHelper.js中的解压逻辑，避免vite自动解压gzip文件导致错误。

Geo-Three是一个基于Three.js的JavaScript库，用于在浏览器中构建3D地图应用。它通过瓦片分块机制支持全球尺度的地理数据可视化，并具备地形高度生成功能。核心特性包括多地图服务商支持（如Bing Maps、Google Maps、OpenStreetMaps）、CPU和GPU两种地形生成方式，以及智能LOD控制策略。文章介绍了安装方法、平面与球面模式对比、坐标转换、自定义LOD和数据提供器等进阶用法。适用于三维导航、地形可视化、数据大屏、游戏地图和城市规划等场景。项目采用MIT许可证，可免费商用。