THREE.JS InstancedMesh 消失,无法点击

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量258 收藏
点赞数
分类专栏： THREEJS 文章标签： js javascript three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinalogs/article/details/132868071
版权

前几天在做一个Three.js 项目的时候，由于对象数量众多，需要用到 InstancedMesh 进行实例化

但是在修改实例的矩阵后，出现以下问题

1、模型有一部分消失，在特定视角模型又恢复原样

2、无法点击，但是在特定视角又可以点击，但是只能点击部分区域

3、距离拉远或者视角移动后，整个模型直接消失，特定视角又出现

解决办法

设置完实例矩阵后，计算边界，两句都要！

InstancedMesh.setMatrixAt(index, matrix);        //修改矩阵
InstancedMesh.computeBoundingBox();                //计算矩形边界
InstancedMesh.computeBoundingSphere();            //计算球形边界
InstancedMesh.instanceMatrix.needsUpdate = true    //通知渲染器需要更新

HiFeiz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
instanced-mesh
04-29
实例网格 一组支持在A-Frame中使用three.js InstancedMesh对象的组件，可以在使用多个相同对象的情况下显着提高渲染性能。 概述 three.js 对象提供了一种非常有效的方式来渲染具有相同几何形状但可能处于不同位置，方向或比例的多个对象。特别是，它极大地减少了所需的绘制调用次数-这非常频繁渲染性能方面的瓶颈。 A框架本身不提供对InstancedMesh的访问，并且A框架DOM并不是很自然地映射到Instanced Meshs。 该组件旨在为A框架应用程序提供一种使用实例化网格的方式，同时在如何在A框架DOM中组织实体方面保持最大的灵活性。 安装 您将需要此存储库中的实例化网格javascript模块。 您可以下载并包含以下内容： [removed][removed] 或通过JSDelivr CDN（检查回购中的
three.js 3D地球实例，支持国家点击和飞线
02-11
three.js 3D地球实例，支持国家点击和飞线
Three.js的渲染过程
from_the_star的博客
11-02 3869
主要基于WebGLRendere类的render方法开展，需要读者有基本的计算机图形知识，比如计算机图形管线（实时渲染管线）之类的。 在Three.js的渲染中，大概可以分为以下几步： 清空当前帧缓冲区，更新MVP矩阵； 将物体分为透明和不透明两类，按照离摄像机从近到远排序（也可在Object3D单独设置renderOrder）； 根据灯光信息，阴影计算，如果有开启平面裁剪就对进行剪裁； 开始逐个渲染物体，按以下顺序，背景、不透明物体、透明物体； 渲染前后还有两个类似于生命周期的回调函数，scene.on
【Three.js】渲染模型卡顿的优化办法
jiangxinyu50的博客
03-15 8260
优化方法是根据chatGPT的回答下，我这里记录一下，有的方法进行了尝试，有的还没有。
ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题
HW140701的博客
09-24 2892
最近使用three.js在场景中显示gltf模型时候，当我使用操作摄像机想近距离观察gltf模型的时候发现一部分模型消失了，比如说假如这个模型是一匹马，当我远距离观察时可以完整的看到整匹马，但是当我想拉近摄像头近距离观察马的时候，这个时候我只能看到马的头，马的身子和脚的部分突然就消失了。我马上意识到是摄像机的视椎体出现了问题，但是我的视椎体设置的很大，如下肯定可以把这个模型完整的包含在视椎体里面，不可能会出现上述的奇怪问题。
Threejs入门之二十：使用InstancedMesh(实例化网格)批量创建物体
九仞山的专栏
04-08 1823
详细介绍了InstancedMesh实例化网格的构造函数，属性和方法，并通过实现一个由小球组成的10*10*10的立方体的案例来深入了解InstancedMesh的用法
Three.js使用InstancedMesh实现性能优化
2301_78834737的博客
07-30 876
有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？在three.js中，由于绘制一个几何体需要调用一次draw call，绘制很多几何体就很消耗性能，所以合并多个几何体为一个几何体能减少draw call，从而实现绘制性能优化。在图形渲染中，绘制调用的数量对性能有很大影响，较少的绘制调用通常意味着更高的性能，因为GPU在处理绘制调用时需要切换上下文和状态，这会导致一定的开销。
threejs 实例化网格（InstancedMesh）
weixin_43974540的博客
07-26 2673
实例化网格（InstancedMesh） 一种具有实例化渲染支持的特殊版本的Mesh。你可以使用 InstancedMesh 来渲染大量具有相同几何体与材质、但具有不同世界变换的物体。 使用 InstancedMesh 将帮助你减少 draw call 的数量，从而提升你应用程序的整体渲染性能。 当前的实现需要InstancedMesh和其它3D物体间不共享材质。 其构造函数，如图 实现方式： function testInstanceMesh(count){ //100万 卡顿 if(!coun
Three.js的物体点击选中拾取DEMO
05-23
Three.js的物体点击选中拾取DEMO
three.js和高德地图结合引入obj格式模型.zip
06-27
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
three-instanced-mesh:围绕THREE.InstancedBufferGeometry的包装器
05-08
三步网格 THREE.InstancedBufferGeometry的更高级别抽象。 有关webgl级别的概述，请查看 。 要更深入地了解其工作原理，。 笔记 THREE.InstancedBufferAttribute的签名THREE.InstancedBufferAttribute随版本R96更改。 此软件包的0.96.0应该与> = R96一起使用，而先前的则与旧版本一起使用。 0.96.1应该适用于所有三个版本。 原料药 方法： .setPositionAt（index：Int，position：THREE.Vector3） 更新给定索引处的position属性。 .setQuaternionAt（index：Int，四元数：THREE.Quaternion） 在给定索引处更新四元数属性。 .setScaleAt（index：Int，scale：THREE.Vector3
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
Three.js实战常用技巧
04-27
分享课程——Three.js实战常用技巧视频教程，课程一共12章，140多节，结合了很多实战案例，课程主要针对three.js实际开发中常用的一些技巧进行讲解，提供有配套的源码和文档资料下载！希望对那些想提升Three.js技能...
实例化网格模型InstancedMesh 点击相交部分实例闪烁
sinat_35823840的博客
01-21 1220
当我一个实例化网格模型里面的小实例们相交时，他们本身都是同一种材质，在都是同一种颜色时没有问题，而在我点击更改了其中一个的颜色后，就会出现闪烁问题，这种现象的本质还是Z-Fighting。 在之前关于Z-Fighting的文章中（three.js 模型重合相交部分闪烁 Z-Fighting）我已经说了几种解决闪烁的方法，但是面对实例化网格模型用的是一个材质时，我们的多边形偏移就没法奏效了。 于是我想到一个曲线救国的方式： 1. 在点击之后，把这个小实例隐藏； 那么怎么隐藏实例呢，我们可以使用setMatr
【three.js / React-three-fiber】加载3D模型性能优化
weixin_44545357的博客
05-15 1588
本文针对运用*原生three.js*和*react-three/fiber*加载三维模型提供了多种优化性能的方案
three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格
webMinStudent的博客
05-21 861
在three.js中有时候我们需要渲染大量的相同几何体，材质的网格，但是如果用一般的方法来实现的花，通常性能不佳，卡顿。但是如果我们使用InstancedMesh来渲染的话，会大大的解决卡顿，性能更佳。例如我们创建1000个立方体，添加到场景中。这样的方法渲染器会调用很多次。
UE4 Instanced Mesh 半透明渲染顺序不对解决
qq_41524721的博客
08-27 3953
以绿色方块为Instanced Mesh为例。 正确的半透应该是这样的： 这是一般蓝图Actor方块，其半透是正常的。 然而Instanced Mesh因为过多，UE4不给你缓存正确的渲染顺序。所以，在不改代码的情况下，想解决Instanced Mesh半透问题，是不可能的。不正确的半透如下： 注意到错误发生在Instanced Mesh的方块与方块之间。 但我就是要解决，...
three.js场景中看不到模型/看不到阴影
weixin_39559449的博客
04-02 4630
参考：火辣辣前端博客 一、three.js渲染的场景中看不到模型的几种可能： 1、未渲染 你可能并未加载渲染函数，或者未将场景渲染出来，虽然这个可能性很小很小，但初期我真的犯过…… function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } 2、场景中未加灯光 未加...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 221
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
three.js多边体绑定点击事件
06-09
为three.js中的多边体绑定点击事件也可以使用鼠标交互和射线。以下是一个基本的示例代码： ```javascript // 创建一个可交互的多边体 var geometry = new THREE.TetrahedronGeometry(50); var material = new THREE.MeshBasicMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, -100); scene.add(mesh); // 创建一个射线 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 监听鼠标移动事件 function onMouseMove(event) { // 计算鼠标在屏幕上的位置 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } // 监听鼠标点击事件 function onClick(event) { // 将鼠标位置转换为three.js的向量 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 在场景中发射射线 raycaster.setFromCamera(mouse, camera); // 计算射线和物体的交点 var intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { // 如果射线和物体有交点，取第一个交点的对象 var obj = intersects[0].object; // 判断对象是否为多边体 if (obj.geometry instanceof THREE.Geometry) { // 执行点击事件 obj.onClick(obj); } } } // 将事件添加到document上 document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('click', onClick, false); ``` 在上面的代码中，首先创建了一个可交互的多边体和一个射线。然后监听鼠标移动和点击事件，并将鼠标位置转换为three.js的向量。在点击事件中，我们使用射线和场景中的所有对象进行交叉检测，如果有交点，就执行相应的点击事件。在这里，我们假设多边体是由THREE.Geometry对象创建的，如果被点击的对象是多边体，则执行该多边体的点击事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值