墨衍会员
·
AI 创作全网分发
墨衍智能分发
本文由作者通过墨衍一键同步至各平台
1分发平台
600+累计阅读
616平均单平台
已同步平台
优快云
微信公众号
微博
知乎
掘金
百家号
博客园
抖音
小红书
你的文章也可以这样分发
墨衍会员 ¥399起/年，写一次发全网
我也要
前几天在做一个Three.js 项目的时候，由于对象数量众多，需要用到 InstancedMesh 进行实例化
但是在修改实例的矩阵后，出现以下问题
1、模型有一部分消失，在特定视角模型又恢复原样
2、无法点击，但是在特定视角又可以点击，但是只能点击部分区域
3、距离拉远或者视角移动后，整个模型直接消失，特定视角又出现
解决办法
设置完实例矩阵后，计算边界，两句都要！
InstancedMesh.setMatrixAt(index, matrix); //修改矩阵
InstancedMesh.computeBoundingBox(); //计算矩形边界
InstancedMesh.computeBoundingSphere(); //计算球形边界
InstancedMesh.instanceMatrix.needsUpdate = true //通知渲染器需要更新
Three.js镜像结构实现：从InstancedMesh到交互优化的完整指南
在3D图形开发中，场景图管理和实例化渲染是优化性能的核心技术。场景图通过树形结构组织物体，而实例化渲染则允许共享几何体与材质，通过变换矩阵批量绘制多个实例，从而大幅减少Draw Call，提升渲染效率。这一技术对于建筑可视化、智能家居等需要大量重复对称结构的应用场景具有重要价值。本文聚焦于使用Three.js的InstancedMesh高效实现门窗阳台等镜像结构，并深入探讨了交互事件处理、资源管理与光照校正等工程实践，帮助开发者规避常见陷阱，实现高性能的3D场景构建。
ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
最近使用three.js在场景中显示gltf模型时候，当我使用操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近距离观察马的时候，这个时候我只能看到马的头，马的身子和脚的部分突然就消失了。我马上意识到是摄像机的视椎体出现了问题，但是我的视椎体设置的很大，如下肯定可以把这个模型完整的包含在视椎体里面，不可能会出现上述的奇怪问题。
Three.js建筑白模实战：从模型优化到着色器渲染全流程解析
WebGL作为现代浏览器中实现硬件加速3D图形的核心技术，为Web端三维可视化提供了底层支持。其原理是通过JavaScript API调用GPU进行并行渲染，从而高效处理复杂的几何与像素计算。这一技术价值在于能够实现无需插件的跨平台高性能3D应用，极大拓展了Web应用的可能性。在工程实践中，Three.js作为最流行的WebGL框架，封装了底层复杂性，使开发者能更专注于场景构建与效果实现。其典型应用场景包括数据可视化、数字孪生、在线展厅及游戏开发等。本文聚焦于**建筑白模**这一细分领域，深入探讨如何通过*
Three.js使用InstancedMesh实现性能优化
有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？在three.js中，由于绘制一个几何体需要调用一次draw call，绘制很多几何体就很消耗性能，所以合并多个几何体为一个几何体能减少draw call，从而实现绘制性能优化。在图形渲染中，绘制调用的数量对性能有很大影响，较少的绘制调用通常意味着更高的性能，因为GPU在处理绘制调用时需要切换上下文和状态，这会导致一定的开销。
Three.js打造钢铁厂数字孪生：从模型轻量化到实时渲染性能优化
数字孪生技术正在重构工业可视化场景，通过三维仿真将物理世界的设备状态实时映射到浏览器端，从而实现生产监控与智能决策。WebGL生态下，Three.js凭借轻量级、纯前端、易集成的特性，成为构建数字孪生可视化的主流选择。它的核心技术原理在于通过GLB模型加载、场景图组织、自定义动画与渲染管线，将复杂设备用高效性能呈现。在实际工程中，模型减面、纹理压缩、几何体合并、InstancedMesh实例化以及合理的LOD策略，是保证大场景流畅运行的关键。该方案广泛应用于钢铁厂、水厂、园区仓储等工业场景，支撑设备状态监测
Three.js弹幕射击性能优化：实例化渲染、对象池与空间网格
在WebGL游戏开发中，大量动态物体的渲染与碰撞检测常常成为性能瓶颈。Draw Call过高、内存频繁分配、碰撞检测复杂度过大，都会导致帧率骤降。实例化渲染（InstancedMesh）通过一次性提交同类几何体，将Draw Call数量从上千降至个位；对象池复用销毁对象，有效避免垃圾回收抖动；空间网格划分场景，让碰撞检测从O(n²)降为接近O(n)。这些技术在弹幕射击、粒子特效等高实体密度场景中效果显著。本文以Three.js为实践环境，结合竖版弹幕射击游戏的实际踩坑记录，详解这三项优化方案的具体实现、关键
agent-core-java 工作流状态提交链路解析：WorkflowCommitState 的分区缓冲、增量提交与快照恢复
在 agent-core-java（openJiuwen Core Java 版）的工作流执行子系统中，`WorkflowCommitState` 解决一个问题：一次工作流运行如何被并发节点、人机交互与检查点恢复三方共享而不互相踩踏。你将理解：io / global / comp / workflow 四个分区如何做到"共享存储、独立提交"；从缓冲写入、`commitCmp` 到快照恢复的完整链路
从原理到实践：Three.js灯光阴影优化全指南（解决锯齿/失真问题）
本文深入解析Three.js灯光阴影系统的核心原理与优化实践，涵盖从消除锯齿、解决失真的视觉质量提升，到性能平衡的全方位解决方案。通过对比不同阴影贴图类型、优化阴影贴图分辨率与区域设置，以及移动端专项优化策略，帮助开发者实现逼真渲染效果。特别针对PC端和移动端提供详细配置建议，并介绍多光源阴影策略与动态物体阴影烘焙等高级技巧。
Three.js 性能优化：从渲染管线到内存管理，3D Web 应用的流畅体验保障
Three.js 性能优化需要同时关注 CPU 端（减少 Draw Call）和 GPU 端（降低填充率消耗）。InstancedMesh 将数千个相同几何体合并为一个 Draw Call，LOD 根据距离切换细节层级，自适应质量系统根据帧率动态调整渲染参数。落地建议：相同几何体的对象使用 InstancedMesh 批量渲染；静态场景使用几何体合并减少 Draw Call；实现自适应质量系统，在低性能设备上自动降级；严格管理 GPU 资源的生命周期，场景切换时释放不再使用的几何体、材质和纹理。
高德地图3D多楼层建模实战：基于Custom3DLayer与Three.js的楼层交互方案
三维可视化技术正深度融入数字孪生与园区管理领域，其核心是通过WebGL渲染引擎在地图场景中呈现可交互的立体建筑。Three.js作为主流的JavaScript 3D库，负责构建楼层级模型与交互逻辑；而高德地图的Custom3DLayer图层则解决了经纬度坐标与三维场景的同步难题。这种组合既能保持地图的全局视角，又能实现每层独立拾取、透明度切换和业务数据绑定，适用于楼宇招商、安防管控等场景。以高德地图API与Three.js的集成为例，详解从坐标转换到楼层建模、从射线点选到性能优化的完整链路，为园区可视化与数
ThreeJS入门（117）：THREE.InstancedMesh 知识详解，示例代码
`THREE.InstancedMesh` 是 Three.js 中用于实例化大量相似几何体的一种高效方法。它通过使用硬件加速的实例化技术来渲染多个共享同一几何体和材质的对象，从而减少了内存消耗和提高了渲染性能。
Three.js入门指南：从WebGL基础到3D场景实战
在现代前端开发中，WebGL为浏览器带来了硬件加速的3D渲染能力，但原生API的复杂性让众多开发者望而却步。Three.js作为最流行的WebGL封装库，像一套灵活的乐高工具箱，将底层渲染细节封装为友好的对象体系，使创建交互式3D场景变得简单高效。理解Scene、Camera、Renderer三大核心组件是掌握Three.js的关键，它们分别扮演舞台、摄影机与放映机的角色。通过旋转立方体示例，可以快速掌握基本几何体、材质、光照与动画循环，而requestAnimationFrame与Clock的正确使用能确
WebGL+Three.js三维仓储可视化系统搭建与性能优化
三维可视化是数据感知的重要形式，在仓储物流领域，它能够直观呈现货架层数、托盘占用与库存分布，弥补传统二维平面图无法表达空间关系的局限。WebGL 作为浏览器原生的图形接口，无需安装任何插件即可调用 GPU 完成大规模场景渲染，是实现三维可视化的技术基础。Three.js 进一步封装了底层着色器、矩阵运算等复杂逻辑，通过场景图、相机、材质等对象化抽象，让开发者能够专注于业务模型。借助 InstancedMesh 可显著降低重复模型的 Draw Call 压力，而 Raycaster 则为点击拾取与库存联动提供
Three.js动画机制与花开特效实战：从小程序性能优化到GPU着色器
渲染循环是3D Web应用的基石，无论旋转立方体还是复杂特效，都依赖帧循环驱动场景更新。Three.js动画机制可分为CPU逐帧更新、Tween补间和顶点着色器GPU计算三个层次，理解这些原理才能高效实现花开、生长、渐变等动态效果。移动端场景，尤其小程序环境，WebGL渲染性能往往成为瓶颈。通过粒子系统替代复杂模型、限制像素比、模型压缩等优化手段，低端设备也能稳定运行数万粒子特效。围绕Three.js动画机制与Shader实战，结合真实云端展厅案例，可系统掌握从小程序性能优化到GPU特效落地的完整路径。
instanced-mesh
实例网格 一组支持在A-Frame中使用three.js InstancedMesh对象的组件，可以在使用多个相同对象的情况下显着提高渲染性能。 概述 three.js 对象提供了一种非常有效的方式来渲染具有相同几何形状但可能处于不同位置，方向或比例的多个对象。特别是，它极大地减少了所需的绘制调用次数-这非常频繁渲染性能方面的瓶颈。 A框架本身不提供对InstancedMesh的访问，并且A框架DOM并不是很自然地映射到Instanced Meshs。 该组件旨在为A框架应用程序提供一种使用实例化网格的方式，同时在如何在A框架DOM中组织实体方面保持最大的灵活性。 安装 您将需要此存储库中的实例化网格javascript模块。 您可以下载并包含以下内容： [removed][removed] 或通过JSDelivr CDN（检查回购中的
（南京观海微电子）——TCON介绍
TCON又称：逻辑板，控制板，在液晶电视里的作用和CRT中的视放板相当，但有本质的区别，逻辑板不是一个纯粹的信号放大器，它输入是LVDS格式信号，而不是RGB。逻辑板的作用是把数字板送来的LVDS或TTL图像数据信号，时钟信号进行处理移位寄存器存储将图像数据信号，时钟信号转换成屏能够识别的控制信号行列信号RSDS控制屏内的MOSFET管工作而控制液晶分子的扭曲度。目前国内主要的TCON板生产商有视显光电。传统TCON的布局主要分为以下两种：X+C分离式和X+C一体式。
高德地图JS API与three.js实现3D建筑多楼层模型实战
坐标转换是WebGIS开发中的基础难题，尤其在高德地图这类采用GCJ-02火星坐标系的平台上，处理不当会导致模型偏移数百米。WebGL技术的普及让前端实时渲染复杂三维场景成为可能，three.js作为成熟的3D引擎，能够高效构建可交互的楼层体块。将地图的宏观定位能力与WebGL的精细控制相结合，是解决室内导航、园区管理、消防演练等场景中多楼层可视化问题的关键技术路径。高德地图JS API通过GLCustomLayer开放了自定义渲染通道，开发者可借此将three.js场景无缝叠加到3D底图上，实现楼层轮廓挤
金智维KRPA实战：Excel自动化数据处理全流程解析
本文详细解析了金智维KRPA在Excel自动化数据处理中的全流程应用，涵盖COM接口和文件读写两种核心技术方案，以及销售报表生成、数据清洗和可视化仪表盘等实战案例。通过企业级应用的异常处理、性能优化和安全合规实践，显著提升数据处理效率和准确性，助力企业降本增效。
three.js+WebGL踩坑经验合集总目录
目录更新中。
SAP License USMM SLAW2 SAP审计
引言 企业每年都会收到SAP License审计邮件，邮件内容大致就是根据贵公司与SAP签定的合同XXX条款规定，贵公司所安装的SAP系统需要进行测定。 关键字： SAP License、 SAP USMM、 SLAW2、 SAP 账号、SAP 账号审计、 SAP License 审计、 SAP 审计报告、SAP 账号优化 SAP License审计邮件 企业每年都会收到SAP License审计邮件，邮件内容大致就是根据贵公司与SAP签定的合同XXX条款规定，贵公司所安...
从零开始：用摩尔线程S4000运行开源AI项目的完整流程
本文详细介绍了如何使用摩尔线程S4000 GPU从零开始运行开源AI项目的完整流程，包括硬件选择、驱动安装、容器化环境配置以及典型AI项目的实战部署。通过性能优化技巧，显著提升推理速度，适合开发者快速上手国产GPU的AI应用开发。
Three.js 地面场景搭建与鼠标拖拽交互完整实现指南
在三维可视化与数字孪生应用中，鼠标拾取与拖拽是构建沉浸式交互体验的基础能力。其核心链路涉及屏幕坐标到世界坐标的换算、射线检测（Raycaster）的数学原理，以及阴影、材质状态管理等工程细节。本文从三维场景中坐标系与地面平面网格的搭建入手，逐步解析如何通过归一化设备坐标与相机逆变换实现精准的鼠标拾取，并进一步实现悬停高亮、点击选中与水平面拖拽移动的完整交互闭环。同时，针对多物体共享材质、OrbitControls 事件冲突、拖拽时物体下陷等高频踩坑点给出解决方案，并介绍 InstancedMesh 下的拾取
别再折腾虚拟机了！手把手教你用WSL2在Windows 11上安装Kali Linux（含汉化与图形界面）
本文详细介绍了如何在Windows 11上通过WSL2安装和配置Kali Linux，包括汉化与图形界面设置。通过WSL2，用户可以享受接近原生性能的Linux体验，同时保持与Windows系统的无缝集成，特别适合网络安全爱好者和开发者。文章还提供了常见问题解决和性能优化建议，帮助用户高效使用Kali工具集。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
326
扫一扫
