Aframe 如何在a-frame和cannon.js中创建弹簧
我试着做一个绳状的约束,约束就像弹簧一样反弹回来 我正在尝试使用约束组件:Aframe 如何在a-frame和cannon.js中创建弹簧,aframe,cannon.js,Aframe,Cannon.js,我试着做一个绳状的约束,约束就像弹簧一样反弹回来 我正在尝试使用约束组件: <a-box id="other-box" dynamic-body /> <a-box constraint="target: #other-box;" dynamic-body /> 但它似乎在固定距离下工作。如何制作弹簧?CANNON.js 有它自己的。其构造函数有三个基本选项,如下所示: new CANNON.Spring(bodyA, bodyB, { // bodies a
<a-box id="other-box" dynamic-body />
<a-box constraint="target: #other-box;" dynamic-body />
但它似乎在固定距离下工作。如何制作弹簧?CANNON.js
有它自己的。其构造函数有三个基本选项,如下所示:
new CANNON.Spring(bodyA, bodyB, { // bodies attached to the spring
restLength: 2, // spring length when no force applied
stiffness: 50, // how much can it stretch
damping: 1, // how much will it suppress the force
});
在计算物理量的每一步上,还需要对附着体施加弹簧力:
world.addEventListener("postStep", function(event) {
spring.applyForce();
});
还有一些选择,请务必在中查看它们并进行一点实验
一架 如何与a型架配合使用?您可以在使用a-frame时使用cannon.js 您可以创建一个框架组件,该组件将创建弹簧。确保通过以下方式加载
物理主体:
AFRAME.registerComponent("spring", {
schema: {
target: {
type: 'selector'
}
},
init: function() {
let data = this.data
let el = this.el
if (this.el.body) {
// check whether we can access the physics body
this.createSpring()
} else {
// or wait until it's loaded
this.el.addEventListener("body-loaded", () => {
this.createSpring()
})
}
},
createSpring: function() {
let data = this.data
let cannonWorld = this.el.sceneEl.systems.physics.driver.world
var spring = new CANNON.Spring(this.el.body, data.target.body, {
restLength: data.restLength,
stiffness: 100,
damping: 1,
});
// Compute the force after each step
canonWorld.addEventListener("postStep", function(event) {
spring.applyForce();
});
}
})
HTML
<a-box position="0 2.6 -2" id="other-box" color="blue" static-body></a-box>
<a-box position="0 2 -2" color="green" dynamic-body spring="target: #other-box"></a-box>
github问题