我在一个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属性?
我很确定你不能将DOM属性添加到js非DOM对象,例如THREE
对象。
静态body属性实际上是创建一个新对象(CANNON.Body
,其type
设置为Cannon.Body.STATIC
)。 aframe-physics
做的是同步 - 与Cannon.Body的THREE.js网格。
您可以创建一个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
,并在每个渲染循环中将其位置和旋转应用到您的框中。