#StackBounty: #javascript #jquery #three.js #aframe #webvr A-frame <a-ring> empty in middle

Bounty: 50

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>


Get this bounty!!!

#StackBounty: #javascript #jquery #three.js #aframe #webvr A-frame multiple animations with camera

Bounty: 50

I have some code for a camera using A-frame (https://aframe.io) and I’m wondering how I can add multiple sequential animations. I would like it so that when my first animation is finished, another animation will trigger and the camera will move 5 spaces to the left after the first animation is complete. How can this be done? My current code:

<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
  <a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>


Get this bounty!!!