A-Frame 物理系统:自定义物理材料
A-Frame Physics System : custom physics materials
我使用 'A-Frame Physics System' (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 中是否可行。提前致谢!
根据physics component documentation:通过CANNON.js JavaScript API.
可以为不同的对象指定不同的碰撞行为
对于自定义行为,您需要深入研究 Cannon.js documentation 并找到您想要的方法和 类。尽管如此,实现自定义 materials 是这样的:
- 大炮物理学 computed/made 有自己的 Cannon.world
- 大炮对象有它们自己的 materials
- Cannon.ContactMaterial 定义物理,当这些对象 collide/interact 彼此。它需要添加到 Cannon.world 因为它负责物理。
有了这些,您可以开始执行以下操作:
- 获取CANNON.world参考:
var world = $('a-scene')[0].systems.physics.world;
- 像这样创建两个自定义 material:
var firstMaterial = new CANNON.Material("firstMaterial");
var secondMaterial = new CANNON.Material("secondMaterial");
将material应用于a-frame对象:
$('#cannon')[0].body.material=firstMaterial;
$('floor')[0].body.material=secondMaterial;
创建联系人material并将其添加到世界
var secondCM = new CANNON.ContactMaterial(firstMaterial,secondMaterial,
[restitution = 2]);
world.addContactMaterial(secondCM);
Here 你可以找到一个有效的 fiddle。
我使用 'A-Frame Physics System' (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 中是否可行。提前致谢!
根据physics component documentation:通过CANNON.js JavaScript API.
可以为不同的对象指定不同的碰撞行为对于自定义行为,您需要深入研究 Cannon.js documentation 并找到您想要的方法和 类。尽管如此,实现自定义 materials 是这样的:
- 大炮物理学 computed/made 有自己的 Cannon.world
- 大炮对象有它们自己的 materials
- Cannon.ContactMaterial 定义物理,当这些对象 collide/interact 彼此。它需要添加到 Cannon.world 因为它负责物理。
有了这些,您可以开始执行以下操作:
- 获取CANNON.world参考:
var world = $('a-scene')[0].systems.physics.world;
- 像这样创建两个自定义 material:
var firstMaterial = new CANNON.Material("firstMaterial"); var secondMaterial = new CANNON.Material("secondMaterial");
将material应用于a-frame对象:
$('#cannon')[0].body.material=firstMaterial; $('floor')[0].body.material=secondMaterial;
创建联系人material并将其添加到世界
var secondCM = new CANNON.ContactMaterial(firstMaterial,secondMaterial, [restitution = 2]); world.addContactMaterial(secondCM);
Here 你可以找到一个有效的 fiddle。