I have asked this question before but I didn't ask it in the best way. I am trying to create a plinko-style aframe world with a ball that will have it's position reset to the starting position when clicked. I would like to have a button do this but clicking the ball will work. Here is the html I am working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@4.x.x/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5.x.x/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<script src="https://unpkg.com/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<title>Project ssdd</title>
</head>
<body>
<script src="/pball.js"></script>
<a-scene
class="fullscreen"
canvas=""
debug="true"
physics="debug: true"
background="color: #0d0d0d"
cursor="rayOrigin: mouse"
>
<a-entity id="camera" position="0 1.6 0">
<a-entity
id="camera"
look-controls=""
wasd-controls
kinematic-body
foo
velocity="0 0 0"
>
</a-entity>
</a-entity>
<a-entity
geometry="primitive: plane; height: 20; width: 20"
material="color: #009e2f"
static-body=""
rotation="-90 0 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="-10 3 0"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 90 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="0 3 -10"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="0 3 10"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 180 0"
></a-entity>
<a-entity
geometry="primitive: plane; height: 7; width: 20"
position="10 3 0"
material="color: #828282"
velocity=""
static-body="sphereRadius: NaN"
rotation="0 -90 0"
></a-entity>
<a-entity></a-entity>
<a-entity
light="color: #ffffff; type: point; angle: 180; intensity: 0.5"
data-aframe-default-light=""
aframe-injected=""
position="0 5 0"
></a-entity>
<a-entity
geometry="primitive: box;"
velocity=""
dynamic-body="sphereRadius: NaN"
position="1 8 1"
rotation="0 0 0"
id="test"
material="color: #ff0000"
foo
></a-entity>
</a-scene>
</body>
</html>
and here is the Javascript that I am working with:
AFRAME.registerComponent('foo', {
events: {
click: function(evt) {
// grab the current position
let pos = this.el.getAttribute("position");
// move upwards
this.el.setAttribute('position', { x: pos.x, y: pos.y + 0.25, z: pos.z });
}
}
});
You need to synchronize the physics engine with the updated position. The dynamic-body component has a syncToPhysics() function:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.el.addEventListener("click", e => {
// reset position
this.el.setAttribute("position", "0 2 -4")
// sync
this.el.components["dynamic-body"].syncToPhysics();
})
}
})
</script>
<a-scene physics cursor="rayOrigin: mouse">
<a-sphere position="0 1.25 -5" radius="0.25" color="#EF2D5E" dynamic-body foo></a-sphere>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" static-body></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>