A-Frame with aframe-physics-system - 来自javascript的地址加农炮元素？

Question

我在一个A-Frame场景中，使用它的底层three.js来创建像这样的对象：

var boxMaterial = new THREE.MeshPhongMaterial( { map: boxTexture, side: THREE.BackSide, bumpMap: boxBumpMap } );
var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
var box01 = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box01);

我如何使用javascript解决aframe-physics-system的底层Cannon.js以添加StaticBody属性？

Answer 1

我很确定你不能将DOM属性添加到js非DOM对象，例如THREE对象。

静态body属性实际上是创建一个新对象（CANNON.Body，其type设置为Cannon.Body.STATIC）。 aframe-physics做的是同步 - 与Cannon.Body的THREE.js网格。

源代码：身体创造here，并同步here。

您可以创建一个CANNON.Body并将其位置与您的盒子同步，但我会采用不同的方法：

你可以拥有一个带有physics属性的空a-frame实体：

<a-entity position="0 2 -3" three-setup dynamic-body></a-entity>

但是在a-frame组件中设置了材质和几何体：

AFRAME.registerComponent("three-setup", {
  init: function() {
     var boxMaterial = new THREE.MeshPhongMaterial({
         side: THREE.FrontSide,
     });
     var boxGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
     var box01 = new THREE.Mesh(boxGeometry, boxMaterial);
     this.el.setObject3D('mesh', box01)
  }
})

在我的fiddle中查看

正如Don McCurdy指出的那样，拥有一个定制的a-frame组件具有更多优势： - 你可以听body-loaded初始化时会注意到的CANNON.Body事件 - 只需简单参考即可访问：this.el.body

---

否则，您需要创建一个CANNON.Body，并在每个渲染循环中将其位置和旋转应用到您的框中。