如何使用Three.js检测JavaScript中两个对象之间的冲突？ [英] How to detect collision between two objects in JavaScript with Three.js?

问题描述

碰撞检测有很多很好的东西，比如问题上的trix.colliders或代码片段，但实际上大多数东西都是旧的（一些函数如multiplyVector3被更改而其他函数被删除。我有一个Object3D（字符模型）和一个世界（3D模型：汽车，树木，建筑物等）。我可以用箭头键移动角色（在渲染循环中通过translateX / Y移动它。

There a lot of nice things for collision detection like threex.colliders or code snippets here on questions, but acutally the most stuff is old (some functions like multiplyVector3 are changed and other are removed. I have a Object3D (Character Model) and a World (3D Models: cars, trees, buildings etc.). I can move the Character with the arrow keys (moving it via translateX/Y in a render loop.

我想要的是角色模型和其他所有东西之间的碰撞检测（除了地面和其他一些）。所以我需要在Object3D（角色）和WorldObjects []（所有对象）之间进行碰撞检测。

What I want is a collision detection between the character model and everything else (except ground and some else). So I need a collision detection between Object3D (Character) and WorldObjects[] (all Objects).

那么，现在有几种方法可以获得想要的结果，这是最好的（快速和可读）方式来执行此操作？现在问题（可能）如果它有效：当角色与其他任何东西碰撞时，我怎么能阻止他可以向这个方向移动但是他可以向后，向右或向左移动？

So, now there are a few ways to get the wanted result maybe, which is the best (fast & readable) way to perform this? And now the problem (maybe) if it works: When the Character collides with anything else, how can I stop that he can move in this direction but he can go back, right or left?

推荐答案

您可以通过使用对象的边界框来检测碰撞。边界框的类型为 THREE.Box3 并提供有用的方法 isIntersectionBox ， containsBox 或 containsPoint 当您想要检测碰撞时，它将满足您的所有需求。

You can detect collisions by using bounding boxes of objects. Bounding boxes are of type THREE.Box3 and have useful methods as isIntersectionBox, containsBox or containsPoint which will suit all your needs when you want to detect collisions.

使用它们就像这样简单：

Using them is as simple as this:

var firstObject = ...your first object...

var secondObject = ...your second object...

firstBB = new THREE.Box3().setFromObject(firstObject);

secondBB = new THREE.Box3().setFromObject(secondObject);

var collision = firstBB.isIntersectionBox(secondBB);

碰撞如果方框是碰撞/击打彼此。
这给你一个关于如何使用边界框的印象。

collision will be true if the boxes are colliding/hitting each-other. This gives you an impression on how you can use bounding boxes.

你也可以检查这个例子出来了。我认为这对你非常有用。

You can also check this example out. I think it will be very useful for you.

您也应该查看 Physijs 库是一个插件，为three.js。

You should maybe also checkout the Physijs library which is a plugin to three.js.

有人在您可能想要跟踪的问题上有关于Stackoverflow的类似问题。

There is someone with a similar question on Stackoverflow that you might want to keep track of.

这篇关于如何使用Three.js检测JavaScript中两个对象之间的冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！