I am creating a scene using A-Frame and I am having a problem where I am using the A-Frame super hands component to move different objects with the controllers in VR and whenever I add a static-body to an <a-ring> (static-body meaning that the cubes can't pass through the object) everything works fine except for the fact that I cannot throw the cubes through the middle of the ring.
What I want to happen is the boxes should be thrown through the center of the ring but when touching the outer edges of the ring they should interact with physics and bounce backwards.
Currently, when I throw the cubes through the center of the ring, there is some sort of invisible field there that prevents obstacles from passing through the middle of the ring even though there is enough space there or objects can pass through the solid part of the ring.
Current code: (only able to move objects with a VR headset)
<html>
<head>
<title>A-Frame Super Hands Component - 6DOF With Physics</title>
<!-- Replace "../build.js" with the super-hands and
A-Frame distributions to run : -->
<script src="../build.js"></script>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@^4.1.1/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
<script>
//color randomizer
AFRAME.registerComponent('color-randomizer', {
play: function () {
this.el.addEventListener('drag-drop', function (evt) {
evt.detail.dropped.setAttribute('material', 'color',
'#'+(Math.random()*0xFFFFFF<<0).toString(16))
// color randomizer credit: http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript#comment6801353_5365036
})
}
})
</script>
<link rel="stylesheet" type="text/css" href="../assets/examples.css">
</head>
<body>
<a-scene physics environment="preset: tron; shadow: true">
<a-assets>
<img id="colortransform" src="./colortransform.png" />
<a-mixin id="cube" geometry="primitive: box; width: 0.33; height: 0.33; depth: 0.33"
hoverable grabbable stretchable draggable
event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
dynamic-body shadow></a-mixin>
<a-mixin id="controllers-right" vive-controls="hand: right"
oculus-touch-controls="hand: right"
windows-motion-controls="hand: right"
gearvr-controls daydream-controls
oculus-go-controls>
</a-mixin>
<a-mixin id="controllers-left" vive-controls="hand: left"
oculus-touch-controls="hand: left"
windows-motion-controls="hand: left">
</a-mixin>
<a-mixin id="point" raycaster="showLine: true; objects: .cube"
collision-filter="collisionForces: false"
static-body="shape: sphere; sphereRadius: 0.001"
super-hands="colliderEvent: raycaster-intersection;
colliderEventProperty: els;
colliderEndEvent:raycaster-intersection-cleared;
colliderEndEventProperty: clearedEls;"></a-mixin>
</a-assets>
<a-entity>
<a-camera positon="0 1.6 0"></a-camera>
<a-entity id="rhand" mixin="controllers-right point"></a-entity>
<a-entity id="lhand" mixin="controllers-left point"></a-entity>
</a-entity>
<a-entity class="cube" mixin="cube" position="0 0.265 -1" material="color: red"></a-entity>
<a-entity class="cube" mixin="cube" position="0 0.265 -0.5" material="color: red"></a-entity>
<a-entity class="cube" mixin="cube" position="-1 0.265 -1" material="color: blue"></a-entity>
<a-entity class="cube" mixin="cube" position="-1 0.265 -0.5" material="color: blue"></a-entity>
<a-entity class="cube" mixin="cube" position="1 0.265 -1" material="color: green"></a-entity>
<a-entity class="cube" mixin="cube" position="1 0.265 -0.5" material="color: green"></a-entity>
<a-entity class="transformer" mixin="transformer" position = "0 1.6 -1"
material="src:#colortransform" shadow></a-entity>
<!-- ground collider keeps objets from falling -->
<a-box static-body width=100 height=0.001 depth=100 visible="false"></a-box>
<a-ring static-body color="teal" radius-inner="1.7" radius-outer="2" position="0 0.4 -5" rotation="-90 0 0"></a-ring>
</a-scene>
</body>
</html>
