JSFiddle - React, Tailwind, and code Playground

by Piotr Milewski

HTML

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script>
AFRAME.registerComponent('test', {
  schema: {
          jitter: {type:'vec3'},
          },
  update: function() {
        console.log(this.data) 
   }
   })
</script>
<a-scene background="color: #ECECEC">
  <a-entity position="0 0 -4" animation__yoyo="property: rotation; dir: alternate; dur: 3000;
                                 easing: easeInSine; loop: true; to: 0 360 0">
    >
    <a-sphere color="blue" position="4 0 0"></a-sphere>
  </a-entity>
  <a-box position="0 1 -2" color="green"></a-box>
</a-scene>

JavaScript

setTimeout(function() {
  let obj = document.querySelector("a-box")
  obj.setAttribute("test", {"jitter": new THREE.Vector3( 0, 1, 0 )})
  obj.setAttribute("test", {"jitter": "0 2 3"})

}, 2000)