JSFiddle - React, Tailwind, and code Playground

by Matt Swensen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.1.1/dist/aframe-physics-system.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
<!-- <a-scene physics>
  <a-entity environment="skyType: gradient; skyColor: #08121F; horizonColor: #072034; groundYScale: 6; groundTexture: none; groundColor: #466478; grid: 1x1; gridColor: #0991dd;"></a-entity>
  <a-plane static-body src="#ground" height="100" width="100" position="0 -0.1 -50" rotation="-90 0 0"></a-plane>
  <a-sphere dynamic-body position="0 2 -4" radius="0.5" color="#3fff80"></a-sphere>
  <a-sphere dynamic-body position="-0.1 4 -4" radius="1" color="#ee2f45"></a-sphere>
</a-scene> -->

<script>
  function calculateBoardPosition(a1, a2) {
    const a3 = [];
    a3.x = calculateVisibility(a1.x, a2.x);
    a3.y = a2.y + 0.2;
    a3.z = calculateVisibility(a1.z, a2.z);
    return a3;
  }

  function calculateVisibility(p1, p2) {
    if (p2 < p1) {
      return p2 + 0.5
    } else {
      return p2 - 0.5
    }
  }

  function topPosition(p, radius) {
    return {
      x: p.x,
      y: p.y + radius + 0.75,
      z: p.z,
    }
  }

  AFRAME.registerComponent('mention', {
    schema: {
      sentimentCategory: {
        type: 'string',
        default: 'neutral'
      },
      influencerScore: {
        type: 'number',
        default: 0.5
      },
      mentionText: {
        type: 'string',
        default: 'WARN'
      }
    },

    init: function() {
      const {
        sentimentCategory,
        influencerScore,
        mentionText
      } = this.data;
      this.geometry = new THREE.SphereBufferGeometry(influencerScore, 32, 32);
      this.material = new THREE.MeshStandardMaterial({
        color:...

JavaScript

/* AFRAME.registerComponent('mention-bubble', {
  init: () => {
    console.log('init mention', this.data);
  },
  schema: {
    sentimentCategory: {type: 'string', default: 'neutral'},
  }
}); */

/* const { extendDeep } = AFRAME.utils;
const meshMixin = AFRAME.primitives.getMeshMixin();

AFRAME.registerPrimitive('a-mention', extendDeep({}, meshMixin, {

  defaultComponents: {
     geometry: { primitive: 'sphere' },
    material: { color: '#0F0' },
  },

  mappings: {
    rad: 'geometry.radius',
  },

})); */