带有 aframe-physics-system 的 A-Frame - 从 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

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

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

源代码：主体创建here, and syncing here.

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

您可以拥有一个具有物理属性的空 a-frame 实体：

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

但 material 和几何设置在 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，并在每个渲染循环中将其位置和旋转应用于您的框。

带有 aframe-physics-system 的 A-Frame - 从 javascript 解决大炮元素？

A-Frame with aframe-physics-system - address cannon elements from javsascript?

physics

three.js

aframe