Three 之 three.js (webgl)碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)

Three 之 three.js (webgl)碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)

目录

Three 之 three.js (webgl)碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、效果案例 实现步骤

六、关键代码


一、简单介绍

Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

本节介绍, three.js (webgl) 中 进行碰撞检测,其实,网上有方法介绍,使用射线,或者也可以使用官方的方法 ammo.js,这里由于自己使用的一些情况特殊,所以并没有使用官方的方法和射线方法,而是使用包围盒 + 位置判断的方法,来简单判断是否发生碰撞;该方法使用有局限性,仅思路仅供参考。其中,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

Three js 官方案例:

建议碰撞案例推荐 ammo.js :

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
three.js中,有多种方法可以实现碰撞检测。一种常见的方法是使用射线检测。通过创建一个射线,然后使用射线与场景中的物体进行相交检测,可以判断是否发生了碰撞。这种方法可以使用three.js的Raycaster类来实现。\[1\] 另一种方法是使用包围盒加位置判断的方法。这种方法通过创建物体的包围盒,并判断包围盒之间是否发生了重叠来检测碰撞。这种方法相对简单,但也有一定的局限性。\[1\] 下面是一个使用包围盒加位置判断的代码片段,用于检测一个移动物体是否与其他物体发生了碰撞: ```javascript var originPoint = movingCube.position.clone(); for (var vertexIndex = 0; vertexIndex < movingCube.geometry.vertices.length; vertexIndex++) { var localVertex = movingCube.geometry.vertices\[vertexIndex\].clone(); var globalVertex = localVertex.applyMatrix4(movingCube.matrix); var directionVector = globalVertex.sub(movingCube.position); var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize()); var collisionResults = ray.intersectObjects(collideMeshList); if (collisionResults.length > 0 && collisionResults\[0\].distance < directionVector.length()) { // 发生了碰撞 crash = true; } } ``` 这段代码会遍历移动物体的顶点,并通过判断顶点与其他物体的包围盒是否相交来判断是否发生了碰撞。\[2\] 除了碰撞检测,你还可以使用按键监听来移动物体。通过监听键盘按键事件,可以根据按键的不同来移动物体的位置。下面是一个示例代码片段,用于监听按键移动物体: ```javascript function keyToMoveObject() { document.addEventListener('keydown', (e) => { var ev = e || window.event; switch (ev.keyCode) { case 87: // W键,向前移动 curMoveObject.position.z -= 0.05; break; case 83: // S键,向后移动 curMoveObject.position.z += 0.05; break; case 65: // A键,向左移动 curMoveObject.position.x -= 0.05; break; case 68: // D键,向右移动 curMoveObject.position.x += 0.05; break; default: break; } // 判断是否发生碰撞 if (isJudgeCollision()) { curMoveObject.material.color.set('yellow'); } else { curMoveObject.material.color.set(0x00ff00); } }, false); } ``` 这段代码通过监听键盘按键事件,根据按下的不同按键来移动物体的位置,并在移动过程中判断是否发生了碰撞。\[3\] 希望以上信息对你有帮助!如果你有任何其他问题,请随时提问。 #### 引用[.reference_title] - *1* *3* [Threethree.jswebgl碰撞检测(非官方的简单碰撞检测,使用局限性,思路参考)](https://blog.csdn.net/u014361280/article/details/127491730)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Three.js进阶篇之6 - 碰撞检测](https://blog.csdn.net/linolzhang/article/details/67119049)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值