- 博客(81)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 基于three开发的开源引擎ThreeMap
文章主要讨论了在开发ThreeMap引擎过程中遇到的地面遮挡问题及其优化方案。作者通过多年开发经验，提取通用功能封装成SDK，提升了项目复用性和成本效益。在ThreeMap引擎的开发中，地面遮挡问题源于深度缓冲精度不足，当地面高度设置较低时，无法正确区分地面与物体的前后关系。通过调整相机参数、启用对数深度缓冲、自定义深度材质和分层渲染技术，作者成功解决了这一问题，显著提升了引擎的稳定性和渲染效果。这些优化不仅解决了具体的技术难题，也为类似问题的处理提供了参考。
2025-05-22 03:40:36
916
原创 22.three官方示例+编辑器+AI快速学习webgl_buffergeometry_uint
本Three.js示例展示了如何通过使用Uint类型的BufferAttribute来优化大规模3D场景的内存使用。通过采用Int16和Uint8类型的缓冲区属性存储法线和颜色数据，并启用归一化选项，可以在保持良好视觉效果的同时显著减少内存占用。核心技术包括：使用不同类型的BufferAttribute优化内存、法线和颜色数据的归一化处理、大规模三角形网格的高效渲染以及Phong光照模型的应用。示例代码详细展示了如何生成随机三角形、计算法线和颜色，并使用这些数据创建高效的BufferGeometry，最终通
2025-05-13 12:19:03
565
原创 21.three官方示例+编辑器+AI快速学习webgl_buffergeometry_selective_draw
该Three.js示例展示了如何通过着色器选择性绘制技术高效控制大量线条的可见性。通过自定义着色器和顶点属性，实现了在单个绘制调用中动态隐藏或显示特定线条，避免了传统方法中频繁切换绘制状态的性能开销。核心技术包括自定义着色器实现选择性绘制、顶点属性控制线条可见性、高效管理大量几何元素以及动态更新顶点属性。示例中，通过顶点着色器和片段着色器，结合顶点属性visible，动态控制线条的显示与隐藏，从而优化渲染性能。
2025-05-13 12:18:46
949
原创 20.three官方示例+编辑器+AI快速学习webgl_buffergeometry_rawshader
这个Three.js示例展示了如何使用RawShaderMaterial创建自定义着色器，实现高级的图形渲染效果。通过编写自定义的顶点着色器和片段着色器，开发者可以完全控制渲染过程，实现基于时间和位置的动态颜色变化。示例中，顶点着色器处理顶点位置和颜色，片段着色器根据时间和位置动态调整颜色。核心技术包括自定义着色器、uniform和varying变量的使用，以及RawShaderMaterial的应用。代码中还展示了如何生成随机三角形、设置几何体属性、初始化渲染器，并通过动画循环实现动态效果。该示例为开发者
2025-05-13 12:18:31
782
原创 19.three官方示例+编辑器+AI快速学习webgl_buffergeometry_points
本示例展示了如何使用Three.js的BufferGeometry和Points对象创建高效的粒子系统。通过随机生成50万个粒子，并为每个粒子设置基于位置的颜色，结合雾效果和旋转动画，构建了一个视觉效果丰富的3D粒子场景。核心技术包括BufferGeometry的高效使用、顶点颜色的应用、粒子系统的性能优化以及雾效果的实现。BufferGeometry以连续数组存储顶点数据，提升内存和渲染效率，适合处理大规模场景。顶点颜色通过为每个粒子指定颜色，实现平滑渐变效果。雾效果则增强了场景的深度感。该技术适用于需要
2025-05-13 12:18:06
766
原创 18.three官方示例+编辑器+AI快速学习webgl_buffergeometry_points_interleaved
本示例展示了如何使用Three.js的BufferGeometry和Points对象创建高效的粒子系统，实现了50万个粒子的流畅渲染。通过共享内存缓冲区和交错存储顶点数据，系统为每个粒子设置了基于位置的颜色。主要技术包括使用ArrayBuffer存储粒子数据、应用交错缓冲区(InterleavedBuffer)、动态计算顶点颜色以及优化大规模粒子系统的性能。代码中详细展示了如何初始化场景、创建粒子系统、设置颜色和位置数据，并通过动画循环实现粒子旋转。交错缓冲区的应用显著提升了内存访问效率，减少了GPU的调用
2025-05-13 00:15:21
721
1
原创 17.three官方示例+编辑器+AI快速学习webgl_buffergeometry_lines
本Three.js示例展示了如何利用BufferGeometry创建大量线段，并通过**变形目标(Morph Targets)**实现动态变形效果。通过随机生成的点云数据，结合顶点颜色和变形动画，构建了一个视觉效果丰富的3D线条场景。核心技术包括BufferGeometry的高效使用、顶点颜色的应用、变形目标动画技术以及动态场景的性能优化。BufferGeometry以连续数组形式存储顶点数据，提升了内存效率和渲染速度，适合处理大规模场景。变形目标技术则通过在不同顶点位置之间插值，实现平滑的动画效果。示例代
2025-05-13 00:14:38
1137
原创 14.three官方示例+编辑器+AI快速学习webgl_buffergeometry_instancing_interleaved
本示例展示了如何使用Three.js结合索引几何体、GPU实例化和交错缓冲区来高效渲染大量相同模型的不同实例。通过这种技术组合，可以在保持较低内存占用的同时渲染数千个独立变换的对象。核心技术包括实例化渲染、交错缓冲区的组织与使用、实例变换矩阵的动态更新以及GPU渲染优化。代码中详细展示了如何创建实例化几何体、设置交错缓冲区、定义顶点和UV数据，并为每个实例生成随机变换矩阵。最终，通过WebGL渲染器实现了高效的大规模对象渲染，并添加了性能统计功能以监控渲染效率。
2025-05-13 00:14:16
970
原创 16.three官方示例+编辑器+AI快速学习webgl_buffergeometry_lines_indexed
本示例展示了如何使用Three.js的**索引几何体(Indexed Geometry)**创建复杂的分形线条图案，特别是科赫雪花(Koch Snowflake)曲线。通过递归算法生成分形图案，并利用索引缓冲区优化顶点数据存储，实现高效的线条渲染。核心技术包括索引几何体的创建与应用、递归算法生成复杂分形图案、顶点颜色的使用以及高效线条渲染技术。代码中详细展示了如何通过递归生成科赫曲线，并利用Three.js的几何体和材质进行渲染，最终生成多种形状的分形图案，如线段、三角形、矩形和星形。
2025-05-13 00:13:48
856
原创 15.three官方示例+编辑器+AI快速学习webgl_buffergeometry_instancing
本示例展示了如何使用Three.js的GPU实例化技术高效渲染大量相同基元的不同实例。通过自定义着色器和实例属性，每个实例可以应用独特的变换和颜色，同时保持高性能渲染。核心技术包括GPU实例化、自定义着色器编程、四元数旋转动画、实例属性动态更新以及渲染性能优化。代码中，顶点着色器处理实例的位置、颜色和旋转，片段着色器则基于时间和位置动态调整颜色。通过实例化几何体和自定义材质，实现了50,000个实例的高效渲染。
2025-05-12 22:15:56
714
原创 13.three官方示例+编辑器+AI快速学习webgl_buffergeometry_instancing_billboards
本实例展示了如何使用Three.js中的**GPU实例化(GPU Instancing)**技术创建高性能的粒子系统。通过实例化渲染，可以在单次绘制调用中高效渲染大量相同基元的不同实例，显著提升性能。核心技术包括GPU实例化渲染、自定义着色器编程、顶点与实例属性管理、基于时间的动态效果以及HSL颜色空间转换。代码中通过顶点着色器和片段着色器实现了粒子的动态缩放和颜色变化，并利用纹理和透明度控制粒子外观。最终生成的粒子系统具备大规模渲染能力，适用于高性能的视觉效果需求。
2025-05-12 22:15:32
1212
原创 12.three官方示例+编辑器+AI快速学习webgl_buffergeometry_indexed
这个Three.js示例展示了如何使用**索引几何体(Indexed Geometry)**创建高效的网格模型。通过复用顶点数据并使用索引缓冲区指定三角形面，可以在不增加内存开销的情况下创建复杂的几何体。核心技术包括索引缓冲区的使用、顶点属性的组织、颜色插值与平滑着色，以及高效的网格几何体创建。示例代码详细演示了如何生成顶点、法线和颜色数据，并通过索引缓冲区定义三角形面，最终创建并渲染一个带有平滑着色和颜色插值的网格模型。索引几何体的优势在于其内存和渲染效率高，且便于修改，适用于需要处理大量顶点的场景。
2025-05-12 22:15:01
681
原创 11.three官方示例+编辑器+AI快速学习webgl_buffergeometry_glbufferattribute
这个Three.js示例展示了如何通过自定义WebGL缓冲区对象（VBO）创建高性能的粒子系统。通过直接操作WebGL API，动态管理粒子位置数据，并结合drawRange技术优化渲染性能。示例中，粒子系统包含30万个粒子，通过两个位置缓冲区实现动态切换，每2秒切换一次。此外，粒子颜色根据位置计算，并基于时间进行旋转动画。通过随机渲染粒子数量和优化渲染范围，进一步提升了性能。该示例展示了如何结合Three.js和底层WebGL API，实现高效的粒子系统渲染。
2025-05-12 22:04:13
700
原创 10.three官方示例+编辑器+AI快速学习webgl_buffergeometry_drawrange
本示例展示了如何使用Three.js的BufferGeometry的drawRange功能创建高性能的粒子连线系统。通过动态计算粒子间的距离并根据条件生成连线，结合setDrawRange方法优化渲染性能，实现了一个可交互的粒子连线效果。核心技术包括动态设置drawRange、粒子间距离计算、连线生成、属性更新与渲染优化，以及通过GUI控制参数。示例代码详细展示了如何初始化场景、粒子系统和连线几何体，并通过GUI控制粒子的显示、连线、连接距离和数量等参数。该示例适用于需要高效渲染大量粒子及其连线的场景。
2025-05-12 21:34:43
745
原创 09.webgl_buffergeometry_custom_attributes_particles，three官方示例+编辑器+AI快速学习
这个Three.js示例展示了如何通过自定义属性和着色器编程创建高性能的粒子系统。通过向几何体添加自定义的size属性，并结合着色器材质，实现了每个粒子具有不同大小和动态变化的效果。核心技术包括自定义BufferGeometry属性、着色器材质的使用、粒子大小的动态控制以及基于时间的动画效果。代码中，粒子系统通过顶点着色器动态调整粒子大小，并在片段着色器中应用纹理和颜色，最终实现了具有波浪效果的动态粒子动画。该示例还展示了如何通过动态更新几何体属性来实现实时动画效果，并提供了性能统计工具以优化渲染性能。
2025-05-12 09:05:01
649
原创 08.webgl_buffergeometry_attributes_none ，three官方示例+编辑器+AI快速学习
这个Three.js示例展示了无属性几何体渲染技术，通过WebGL 2的特性和伪随机数生成算法，在着色器中动态计算顶点位置和颜色，而不需要在CPU端预先定义几何体数据。核心技术包括：无属性几何体渲染技术解析WebGL 2的顶点ID特性WebGL 2引入了内置变量，它表示当前正在处理的顶点索引：在本示例中，我们通过计算每个顶点的位置和颜色，实现了完全在GPU端生成几何体的效果。为了在着色器中生成看似随机的顶点位置和颜色，我们使用了伪随机数生成算法：在本示例中，我们使用顶点ID和随机种子作为输入，生成确定
2025-05-12 08:14:30
904
原创 07.three官方示例+编辑器+AI快速学习webgl_buffergeometry_attributes_integer
这个Three.js示例展示了在WebGL 2环境下使用整数属性渲染技术的实现。通过创建大量随机分布的三角形，并为每个三角形分配不同的整数索引，实现了基于索引动态选择纹理的效果。核心技术包括WebGL 2的整数属性支持、顶点与片段着色器中的整数变量传递、多纹理动态切换，以及几何体与材质的自定义着色器实现。示例中，几何体通过Int16BufferAttribute存储纹理索引，并在着色器中根据索引选择不同的纹理进行渲染。该技术充分利用了WebGL 2对整数属性的支持，适用于需要高效处理大量动态纹理的场景。
2025-05-11 21:48:15
1189
原创 06.three官方示例+编辑器+AI快速学习webgl_animation_skinning_additive_blending
这个Three.js示例展示了如何结合**骨骼动画(Skinning)和变形动画(Morphing)**来实现复杂的角色动画效果。通过加载一个机器人模型，演示了如何控制角色的肢体动作和面部表情。核心技术包括多动画混合与淡入淡出、基础动画状态与一次性动作的切换、面部变形目标(Morph Targets)的控制，以及动画事件监听与状态恢复。代码部分详细展示了如何通过Three.js的GLTFLoader加载模型，并使用AnimationMixer和GUI来控制动画状态和表情变化。该示例为开发者提供了实现复杂角色
2025-05-11 21:47:26
1127
原创 05.three官方示例+编辑器+AI快速学习three.js webgl - animation - skinning - ik
本实例展示了Three.js中**反向运动学（Inverse Kinematics, IK）**在3D角色动画中的应用，通过加载角色模型，演示了如何利用IK技术实现自然的肢体运动控制，如手部抓取物体。核心技术包括CCD反向运动学求解器、实时IK计算、角色头部跟踪、镜面反射效果和交互式控制器。代码中详细展示了如何加载GLTF模型、设置IK求解器、创建镜面反射效果，并通过控制面板进行交互操作。该示例为开发者提供了在Three.js中实现复杂角色动画的参考。
2025-05-11 21:07:19
1195
原创 04.three官方示例+编辑器+AI快速学习webgl_animation_skinning_additive_blending
这个示例展示了Three.js中**骨骼动画的叠加混合(Additive Animation Blending)**技术。通过加载一个机器人模型，演示了如何在基础动画(如站立、行走、跑步)之上叠加额外的动画效果(如潜行姿态、悲伤表情、点头同意等)，实现更丰富的角色表现。核心技术包括：整体总结这个Three.js示例展示了骨骼动画的叠加混合技术，主要内容包括：叠加动画原理：动画控制系统：用户交互：这种叠加动画技术在游戏、虚拟角色动画等场景中非常有用，可以让角色表现更加丰富多样，同时保持动画系统的灵活性和可
2025-05-11 13:32:55
596
原创 03.three官方示例+编辑器+AI快速学习webgl_animation_multiple
本示例展示了Three.js中骨骼动画的高级应用，重点介绍了如何使用SkeletonUtils.clone()方法复制模型，并对比了两种骨骼动画管理方式：独立骨骼模式和共享骨骼模式。独立骨骼模式下，每个模型拥有独立的骨骼结构，可以播放不同的动画；而共享骨骼模式下，多个模型共享同一骨骼结构，同步播放相同动画。通过代码实现和GUI控制面板，用户可以切换这两种模式，了解它们的特点和适用场景。示例还展示了如何加载GLTF模型、设置光照、阴影以及动画混合器的使用，帮助开发者更好地掌握Three.js中的骨骼动画技术。
2025-05-11 13:15:16
869
原创 02.three官方示例+编辑器+AI快速学习webgl_animation_skinning_blending
这个示例展示了Three.js中骨骼动画混合(Skeletal Animation Blending)的实现方法，通过加载一个士兵模型，演示了如何在不同动画状态（如站立、行走、跑步）之间进行平滑过渡。核心技术包括动画混合器(AnimationMixer)的使用、动画权重控制、动画同步淡入淡出，以及通过GUI控制面板实时调整动画参数。整体总结这个Three.js示例展示了骨骼动画混合的实现方法，主要内容包括：核心技术：动画控制方式：用户交互：
2025-05-11 13:09:20
740
原创 01.three官方示例+编辑器+AI快速学习webgl_animation_keyframes
本实例展示了如何在Three.js中使用WebGL技术实现3D模型的加载、动画播放及用户交互。通过创建场景、相机、渲染器等基础对象，加载GLTF模型并应用动画，同时使用轨道控制器实现用户对相机视角的控制。关键点包括：AnimationMixer管理模型动画，AnimationClip表示完整动画，ClipAction控制动画播放状态，以及PMREMGenerator提升环境光照渲染质量。此外，代码中还使用了性能统计工具优化渲染性能，展示了完整的3D动画交互场景构建过程，帮助开发者掌握Three.js在动画和
2025-05-09 17:28:49
1352
原创 Three.js 场景编辑器 (Vue3 + TypeScript 实现)
因此我决定开发一个基于 Vue3 + TypeScript 的 Three.js 场景编辑器，保留核心功能的同时，提供更友好的开发体验。
2025-04-18 00:39:02
2229
8
原创 我的三维引擎独立开发之路：坚持与迷茫
无论是成功的经验，还是失败的教训，我都会坦诚地分享出来。记不清经历了多少个版本，多少次重构，只记得无数个夜晚独自坐在电脑前，与代码为伴。从最初的简单渲染，到如今支持海量点云和多源数据融合，引擎的功能逐渐丰富，代码也经历了无数次的重构和优化。有人说，直接用最新版本不就行了，哎关键之前版本怎么办哪，很多不兼容性，需要一个个修改，太费劲了，不知道熬了多久了！一路走来，充满了挑战和迷茫，但也收获了许多宝贵的经验。今天终于解决了，之前开发的基于three开发的引擎版本过低的问题，也算又前进了一部！
2025-03-08 23:30:09
398
原创 threejs开源代码之-旋转的彩色立方体
代码说明场景和渲染器：立方体几何体：自定义着色器材质：动画循环：光源：窗口大小调整：修改颜色：添加纹理：调整几何体：增加交互：尝试用AI辅助编写代码！
2025-02-09 16:11:32
405
原创 三维全景图探索之，全景图切片03【threejs】
切片全景图将全景图分割成多个小的切片，这样可以根据用户的视野需求，动态加载需要的部分，而不是一次性加载整个图像。视野加载根据用户当前的视野，优先加载可见区域内的切片。当用户移动视角时，只加载新的视野切片，减少不必要的资源消耗。缩小的全景图优先加载在用户首次进入页面时，优先加载一幅缩小的全景图，提供一个快速预览的体验。这可以提高用户的感知速度，用户在等待加载时不会感到失望。
2024-11-01 00:40:28
497
原创 三维可视化点云630G数据测试
测试目标：1.是否可以加载 2.是否可以本地流畅加载 3.是否有损失 4.电脑性能是否要求比较高。处于以上目的，进行了长达一天一夜的数据处理，终于得到了可以加载的八叉树结构。5.和其他加载方式进行对比，如何进行海量数据优化。目的：为了查看三维加载海里点云性能。三维可视化点云700G测试。
2024-10-30 21:40:34
301
原创 出差日记，记录人生百态
从大学毕业，很少写诗了，也很少静下心去回味，一直忙碌，等什么都有的时候，有少许的感伤。本人不才，在等待火车的时候，写一首小诗，一首共勉。但曾有笑语，如春花绽放，在记忆的角落，静静飘香。却也感恩，那曾经的欢畅。在下一个春天，再续前缘。想见的人啊，未入眼帘，心中泛起，淡淡的忧伤。带走了愁云，留下了暖。就让这份情，随风而去，春风轻拂过夜的寂静，吹散了梦，唤醒了情。虽然今朝，未能相见，春风啊，你轻轻拂面，
2024-10-25 23:03:41
319
原创 三维世界的魅力：探索开源的Three.js案例
Three.js是一个基于WebGL的JavaScript库，它提供了一个直观的API来创建和显示动画3D图形在浏览器中。它支持多种3D对象和材质，以及复杂的光照和阴影效果。Three.js是一个强大的工具，它让3D图形的创建和展示变得简单而有趣。无论你是开发者、设计师还是3D爱好者，Three.js都能为你的项目带来无限可能。让我们一起拥抱这个三维世界，创造更多的奇迹吧！
2024-10-04 22:28:41
1181
ArcGIS Template Viewer for Silverlight
2012-04-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人