Three.js与WebGL实战项目
关注
分享
扫一扫
文章平均质量分 93
随着Web技术的飞速发展，3D图形在网页设计中的应用越来越广泛。Three.js，作为一个基于WebGL的JavaScript库，极大地简化了在网页上创建和展示复杂3D图形的过程。本专栏旨在带领读者深入探索Three.js与WebGL的强大功能，并通过一系列实践案例，展示如何构建引人入胜的3D网页
三月的一天
计算机专业硕士毕业，多年的数学建模、复杂网络、软件开发、前后端技术开发的实践经验。作为一名博客作者，我致力于将我所学到的知识和经验分享给更多的人。我相信，知识的力量在于传播，而分享则是知识传播的最佳途径。我的博客内容涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识。旨在为读者提供有价值的信息和实用的技巧。如果您对我的博客内容感兴趣，或者有任何问题想要交流，您可以通过评论或者私信与我联系！
展开
-
有限元分析结果可视化——如何使用顶点、片元着色器实现有限元网格的动态色彩、渐变色效果
基于有限元剖分的网格需要根据顶点的某些属性（比如压力、温度、位移）等给顶点添加颜色，从而有直观的数值强度变化趋势。threejs本身自带的material材质是没有这个功能的。本文通过一个立方体堆叠案例，展示了 React Three.js 中顶点着色器的核心用法。这种方法特别适合：有限元分析结果可视化（应力 / 应变云图）建筑信息模型（BIM）的构件着色科学计算数据的 3D 可视化原创 2025-03-13 17:10:14 · 998 阅读 · 0 评论 -
3D模型网格剖分——如何使用threejs绘制单元面三角形边(以react框架为例）
背景：项目里需要对有限元输出的3d模型进行网格绘制。已知有限元输出的单元面索引信息：三个顶点组成的三角形为一个单元面，索引数组中相邻的三个节点为一个单元面。已知顶点信息、顶点坐标信息；项目的其中一个需求是根据以上信息绘制单元面。也即绘制几何表面的网格。这里的网格并不是几何的框线显示，还是显示所有的三角形面。所以仅用three的BufferGeometry创建几何显示为线框是不行的。因此项目的难点：1.如何绘制三角形2.绘制三角形需要哪些数据。原创 2025-03-12 11:31:10 · 826 阅读 · 0 评论 -
3D模型网格剖分——如何将有限元剖分的网格应用到Three.js模型中
设置 Three.js 的场景、相机和渲染器，并将网格对象添加到场景中。将有限元剖分的数据转换为 Three.js 可以使用的格式，通常是。有限元剖分的数据通常包含节点（顶点）信息和单元（面）信息。选择合适的材质来定义模型的外观。将几何体和材质组合成一个网格对象。使用渲染循环来不断更新和渲染场景。来创建一个简单的材质。所需的顶点和面数据。原创 2025-03-03 14:35:05 · 736 阅读 · 0 评论 -
Three.js机器人与星系动态场景（四）：封装Threejs业务组件
实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以 将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部，通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于react+threejs开发，感兴趣可以看看之前的博客关于这部分详细的介绍。原创 2024-07-08 09:03:17 · 752 阅读 · 0 评论 -
Three.js机器人与星系动态场景（三）：如何实现动画
在前面的博客中分别介绍了如何快速搭建3D交互场景以及通过坐标辅助工具加深对坐标系的理解。本文将继续探讨其中动画实现的细节。通过调整rotation加深对动画的印象。动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。实现上述效果只需要添加如下动画，在动画中给物体旋转增加一个正向或负向的增量，在方法中调用自身达到一个循环。原创 2024-07-04 15:20:35 · 1240 阅读 · 0 评论 -
Three.js机器人与星系动态场景（二）：强化三维空间认识
在上篇博客中介绍了如何快速利用react搭建three.js平台，并实现3D模型的可视化。本文将在上一篇的基础上强化坐标系的概念。引入AxesHelper辅助工具，带你快速理解camer、坐标原点、可视区域。引入字体标签辅助坐标系，并让字体使用朝向用户原创 2024-07-03 11:16:48 · 1154 阅读 · 0 评论 -
使用React复刻ThreeJS官网示例——keyframes动画
最近在看three.js相关的东西，想着学习一下threejs给的examples。源码是用html结合js写的，恰好最近也在学习react，就用react框架学习一下。本文参考的是threeJs给的第一个示例。原创 2024-07-01 16:02:52 · 1873 阅读 · 0 评论 -
Three.js机器人与星系动态场景：实现3D渲染与交互式控制
使用Three.js库构建了一个交互式的3D场景。组件中创建了一个机器人模型，包括头部、眼睛、触角、身体和四肢，以及两个相同的机器人实例以实现动态效果。场景中还加入了粒子效果，模拟星系环境，增强了视觉效果。通过OrbitControls，用户可以对机器人进行旋转控制。组件在渲染时会根据用户界面的变化动态调整渲染，并在指定的div容器中显示。整体上，这个组件提供了一个基础的3D动画展示和用户交互的框架。原创 2024-07-01 09:34:55 · 1720 阅读 · 0 评论 -
迈向三维：vue3+Cesium.js三维WebGIS项目实战
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。原创 2024-02-21 22:21:06 · 5657 阅读 · 0 评论