11 lines of JavaScript thanks to AFrame, threejs and some of my own tinkering :
fetch('colors.json').then( res => res.json() ).then( colors => { colors.map( c => { let boxEl = document.createElement("a-box") boxEl.id = 'color_'+c.name let [r,g,b] = c.rgb.replace('RGB(','').replace(')','').split(',').map( n => Number(n)/100 ) let pos = `${1-r} ${0.5+g} ${-0.5-b}` boxEl.setAttribute("position", pos) boxEl.initialPosition = pos boxEl.setAttribute("scale", ".1 .1 .1") boxEl.setAttribute("color", c.name) boxEl.setAttribute("target", "") boxEl.setAttribute("onpicked", "setFeedbackHUD('color'+selectedElements.at(-1).element.getAttribute('color'))" ) boxEl.setAttribute("onreleased", "let el = selectedElements.at(-1).element; el.setAttribute('position',el.initialPosition)" ) AFRAME.scenes[0].appendChild(boxEl) }) // end of fetch()
11 lines of JavaScript thanks to AFrame, threejs and some of my own tinkering :