A-Frame 物理系统：自定义物理材料答案

【问题标题】：A-Frame Physics System : custom physics materialsA-Frame 物理系统：自定义物理材料
【发布时间】：2017-06-16 13:16:44
【问题描述】：

我使用“A-Frame 物理系统”(https://github.com/donmccurdy/aframe-physics-system) 在 A-Frame 中创建了一个场景：

<!DOCTYPE>
<html>
<head>

<script src="aframe.min.js"></script>
<script src="aframe-extras.min.js"></script>
<script src="aframe-physics-system-master/dist/aframe-physics-system.min.js"></script>
</head>

  <a-scene id="myscene" physics>
    <!--CAMERA-->
    <a-entity camera="userHeight: 1.6" look-controls></a-entity>

    <!--BALL1-->
    <a-sphere color="red" radius="0.3" position="5 5 5" dynamic-body></a-sphere>

    <!--BALL2-->
    <a-sphere color="green" radius="0.3" position="6 5 5" dynamic-body></a-sphere>

    <!--GROUND-->
    <a-plane id="ground" height="200" width="200" rotation="-90 0 0" position="0 0 0" metalness="0" roughness="1" static-body></a-plane>

  </a-scene>
</body>
</html>

场景由两个球体和一个平面组成。我希望一个球在击中飞机时比其他球弹得更多。我从文档中了解到，我们可以使用以下方法更改整个场景的摩擦和恢复等属性：

<a-scene physics="friction: 0.1; restitution: 0.5">
    <!-- ... -->
</a-scene>

但我想要不同领域的不同摩擦和恢复值。请让我知道是否可以在 A-Frame 中使用。提前致谢！

【问题讨论】：

标签： virtual-reality aframe cannon.js

【解决方案1】：

根据physics component documentation：可以通过CANNON.js JavaScript API 为不同的对象指定不同的碰撞行为。

对于自定义行为，您需要深入了解Cannon.js documentation 并找到您想要的方法和类。尽管如此，实施自定义材料的过程如下：

大炮物理是在他们自己的 Cannon.world 中计算/制作的
大炮对象有自己的材料
Cannon.ContactMaterial 定义物理，当这些对象相互碰撞/交互时。它需要添加到 Cannon.world，因为它负责物理。

有了这些，你可以开始做以下事情：

获取 CANNON.world 参考：var world = $('a-scene')[0].systems.physics.world;
像这样创建两个自定义材质：var firstMaterial = new CANNON.Material("firstMaterial"); var secondMaterial = new CANNON.Material("secondMaterial");
将材质应用于 a-frame 对象：$('#cannon')[0].body.material=firstMaterial; $('floor')[0].body.material=secondMaterial;
创建联系人资料并将其添加到世界var secondCM = new CANNON.ContactMaterial(firstMaterial,secondMaterial, [restitution = 2]); world.addContactMaterial(secondCM);

Here你可以找到一个工作小提琴。

【讨论】：

感谢亚当的回复。我已经创建了自定义材料和联系材料。但是当我将它应用到球体和地面时，它会给出以下警告：*Unknown property 10 for component/system material. 我将材料应用如下：
@KK1993 嗨，我已经编辑了我的答案，因此您可以轻松按照我的步骤来实现您最初想要的目标
@KK1993 很高兴我能帮上忙 :)