javascript - Add several images on each element on a sphere using Threejs -

here spherical structure talking about- clickhere

in sphere grid, wish add several images on each element. like, using code can transform various shapes such grid,plane etc. whatever shape may be, want add different images on each , every element in grid.

i not have clue on this. me out please? code copied , pasted three.js webstite:

var table = [    [ "h", "hydrogen", "1.00794", 1, 1 ],    [ "he", "helium", "4.002602", 18, 1 ],    [ "li", "lithium", "6.941", 1, 2 ],    [ "be", "beryllium", "9.012182", 2, 2 ],    [ "b", "boron", "10.811", 13, 2 ],    [ "c", "carbon", "12.0107", 14, 2 ],    [ "n", "nitrogen", "14.0067", 15, 2 ],    [ "o", "oxygen", "15.9994", 16, 2 ],    [ "f", "fluorine", "18.9984032", 17, 2 ],    [ "ne", "neon", "20.1797", 18, 2 ],    [ "na", "sodium", "22.98976...", 1, 3 ],    [ "mg", "magnesium", "24.305", 2, 3 ],    [ "al", "aluminium", "26.9815386", 13, 3 ],    [ "si", "silicon", "28.0855", 14, 3 ],    [ "p", "phosphorus", "30.973762", 15, 3 ],    [ "s", "sulfur", "32.065", 16, 3 ],    [ "cl", "chlorine", "35.453", 17, 3 ],    [ "ar", "argon", "39.948", 18, 3 ],    [ "k", "potassium", "39.948", 1, 4 ],    [ "ca", "calcium", "40.078", 2, 4 ],    [ "sc", "scandium", "44.955912", 3, 4 ],    [ "ti", "titanium", "47.867", 4, 4 ],    [ "v", "vanadium", "50.9415", 5, 4 ],    [ "cr", "chromium", "51.9961", 6, 4 ],    [ "mn", "manganese", "54.938045", 7, 4 ],    [ "fe", "iron", "55.845", 8, 4 ],    [ "co", "cobalt", "58.933195", 9, 4 ],    [ "ni", "nickel", "58.6934", 10, 4 ],    [ "cu", "copper", "63.546", 11, 4 ],    [ "zn", "zinc", "65.38", 12, 4 ],    [ "ga", "gallium", "69.723", 13, 4 ],    [ "ge", "germanium", "72.63", 14, 4 ],    [ "as", "arsenic", "74.9216", 15, 4 ],    [ "se", "selenium", "78.96", 16, 4 ],    [ "br", "bromine", "79.904", 17, 4 ],    [ "kr", "krypton", "83.798", 18, 4 ],    [ "rb", "rubidium", "85.4678", 1, 5 ],    [ "sr", "strontium", "87.62", 2, 5 ],    [ "y", "yttrium", "88.90585", 3, 5 ],    [ "zr", "zirconium", "91.224", 4, 5 ],    [ "nb", "niobium", "92.90628", 5, 5 ],    [ "mo", "molybdenum", "95.96", 6, 5 ],    [ "tc", "technetium", "(98)", 7, 5 ],    [ "ru", "ruthenium", "101.07", 8, 5 ],    [ "rh", "rhodium", "102.9055", 9, 5 ],    [ "pd", "palladium", "106.42", 10, 5 ],    [ "ag", "silver", "107.8682", 11, 5 ],    [ "cd", "cadmium", "112.411", 12, 5 ],    [ "in", "indium", "114.818", 13, 5 ],    [ "sn", "tin", "118.71", 14, 5 ],    [ "sb", "antimony", "121.76", 15, 5 ],    [ "te", "tellurium", "127.6", 16, 5 ],    [ "i", "iodine", "126.90447", 17, 5 ],    [ "xe", "xenon", "131.293", 18, 5 ],    [ "cs", "caesium", "132.9054", 1, 6 ],    [ "ba", "barium", "132.9054", 2, 6 ],    [ "la", "lanthanum", "138.90547", 4, 9 ],    [ "ce", "cerium", "140.116", 5, 9 ],    [ "pr", "praseodymium", "140.90765", 6, 9 ],    [ "nd", "neodymium", "144.242", 7, 9 ],    [ "pm", "promethium", "(145)", 8, 9 ],    [ "sm", "samarium", "150.36", 9, 9 ],    [ "eu", "europium", "151.964", 10, 9 ],    [ "gd", "gadolinium", "157.25", 11, 9 ],    [ "tb", "terbium", "158.92535", 12, 9 ],    [ "dy", "dysprosium", "162.5", 13, 9 ],    [ "ho", "holmium", "164.93032", 14, 9 ],    [ "er", "erbium", "167.259", 15, 9 ],    [ "tm", "thulium", "168.93421", 16, 9 ],    [ "yb", "ytterbium", "173.054", 17, 9 ],    [ "lu", "lutetium", "174.9668", 18, 9 ],    [ "hf", "hafnium", "178.49", 4, 6 ],    [ "ta", "tantalum", "180.94788", 5, 6 ],    [ "w", "tungsten", "183.84", 6, 6 ],    [ "re", "rhenium", "186.207", 7, 6 ],    [ "os", "osmium", "190.23", 8, 6 ],    [ "ir", "iridium", "192.217", 9, 6 ],    [ "pt", "platinum", "195.084", 10, 6 ],    [ "au", "gold", "196.966569", 11, 6 ],    [ "hg", "mercury", "200.59", 12, 6 ],    [ "tl", "thallium", "204.3833", 13, 6 ],    [ "pb", "lead", "207.2", 14, 6 ],    [ "bi", "bismuth", "208.9804", 15, 6 ],    [ "po", "polonium", "(209)", 16, 6 ],    [ "at", "astatine", "(210)", 17, 6 ],    [ "rn", "radon", "(222)", 18, 6 ],    [ "fr", "francium", "(223)", 1, 7 ],    [ "ra", "radium", "(226)", 2, 7 ],    [ "ac", "actinium", "(227)", 4, 10 ],    [ "th", "thorium", "232.03806", 5, 10 ],    [ "pa", "protactinium", "231.0588", 6, 10 ],    [ "u", "uranium", "238.02891", 7, 10 ],    [ "np", "neptunium", "(237)", 8, 10 ],    [ "pu", "plutonium", "(244)", 9, 10 ],    [ "am", "americium", "(243)", 10, 10 ],    [ "cm", "curium", "(247)", 11, 10 ],    [ "bk", "berkelium", "(247)", 12, 10 ],    [ "cf", "californium", "(251)", 13, 10 ],    [ "es", "einstenium", "(252)", 14, 10 ],    [ "fm", "fermium", "(257)", 15, 10 ],    [ "md", "mendelevium", "(258)", 16, 10 ],    [ "no", "nobelium", "(259)", 17, 10 ],    [ "lr", "lawrencium", "(262)", 18, 10 ],    [ "rf", "rutherfordium", "(267)", 4, 7 ],    [ "db", "dubnium", "(268)", 5, 7 ],    [ "sg", "seaborgium", "(271)", 6, 7 ],    [ "bh", "bohrium", "(272)", 7, 7 ],    [ "hs", "hassium", "(270)", 8, 7 ],    [ "mt", "meitnerium", "(276)", 9, 7 ],    [ "ds", "darmstadium", "(281)", 10, 7 ],    [ "rg", "roentgenium", "(280)", 11, 7 ],    [ "cn", "copernicium", "(285)", 12, 7 ],    [ "uut", "unutrium", "(284)", 13, 7 ],    [ "fl", "flerovium", "(289)", 14, 7 ],    [ "uup", "ununpentium", "(288)", 15, 7 ],    [ "lv", "livermorium", "(293)", 16, 7 ],    [ "uus", "ununseptium", "(294)", 17, 7 ],    [ "uuo", "ununoctium", "(294)", 18, 7 ]  ];    var camera, scene, renderer;  var controls;    var objects = [];  var targets = { table: [], sphere: [], helix: [], grid: [] };    init();  animate();    function init() {      camera = new three.perspectivecamera( 75, window.innerwidth / window.innerheight, 1, 5000 );    camera.position.z = 1800;      scene = new three.scene();      ( var = 0; < table.length; ++ ) {        var item = table[ ];        var element = document.createelement( 'div' );      element.classname = 'element';      element.style.backgroundcolor = 'rgba(0,127,127,' + ( math.random() * 0.5 + 0.25 ) + ')';        var number = document.createelement( 'div' );      number.classname = 'number';      number.textcontent = + 1;      element.appendchild( number );        var symbol = document.createelement( 'div' );      symbol.classname = 'symbol';      symbol.textcontent = item[ 0 ];      element.appendchild( symbol );        var details = document.createelement( 'div' );      details.classname = 'details';      details.innerhtml = item[ 1 ] + '<br>' + item[ 2 ];      element.appendchild( details );        var object = new three.css3dobject( element );      object.position.x = math.random() * 4000 - 2000;      object.position.y = math.random() * 4000 - 2000;      object.position.z = math.random() * 4000 - 2000;      scene.add( object );        objects.push( object );      }      // table      ( var = 0; < objects.length; ++ ) {        var item = table[ ];        var object = new three.object3d();      object.position.x = ( item[ 3 ] * 160 ) - 1540;      object.position.y = - ( item[ 4 ] * 200 ) + 1100;        targets.table.push( object );      }      // sphere      var vector = new three.vector3();      ( var = 0, l = objects.length; < l; ++ ) {        var phi = math.acos( -1 + ( 2 * ) / l );      var theta = math.sqrt( l * math.pi ) * phi;        var object = new three.object3d();        object.position.x = 1000 * math.cos( theta ) * math.sin( phi );      object.position.y = 1000 * math.sin( theta ) * math.sin( phi );      object.position.z = 1000 * math.cos( phi );        vector.copy( object.position ).multiplyscalar( 2 );        object.lookat( vector );        targets.sphere.push( object );      }      // helix      var vector = new three.vector3();      ( var = 0, l = objects.length; < l; ++ ) {        var phi = * 0.175 + math.pi;        var object = new three.object3d();        object.position.x = 1100 * math.sin( phi );      object.position.y = - ( * 8 ) + 450;      object.position.z = 1100 * math.cos( phi );        vector.copy( object.position );      vector.x *= 2;      vector.z *= 2;        object.lookat( vector );        targets.helix.push( object );      }      // grid      ( var = 0; < objects.length; ++ ) {        var object = new three.object3d();        object.position.x = ( ( % 5 ) * 400 ) - 800;      object.position.y = ( - ( math.floor( / 5 ) % 5 ) * 400 ) + 800;      object.position.z = ( math.floor( / 25 ) ) * 1000 - 2000;        targets.grid.push( object );      }      //      renderer = new three.css3drenderer();    renderer.setsize( window.innerwidth, window.innerheight );    renderer.domelement.style.position = 'absolute';    document.getelementbyid( 'container' ).appendchild( renderer.domelement );      //      controls = new three.trackballcontrols( camera, renderer.domelement );    controls.rotatespeed = 0.5;    controls.addeventlistener( 'change', render );      var button = document.getelementbyid( 'table' );    button.addeventlistener( 'click', function ( event ) {        transform( targets.table, 2000 );      }, false );      var button = document.getelementbyid( 'sphere' );    button.addeventlistener( 'click', function ( event ) {        transform( targets.sphere, 2000 );      }, false );      var button = document.getelementbyid( 'helix' );    button.addeventlistener( 'click', function ( event ) {        transform( targets.helix, 2000 );      }, false );      var button = document.getelementbyid( 'grid' );    button.addeventlistener( 'click', function ( event ) {        transform( targets.grid, 2000 );      }, false );      transform( targets.table, 5000 );      //      window.addeventlistener( 'resize', onwindowresize, false );    }    function transform( targets, duration ) {      tween.removeall();      ( var = 0; < objects.length; ++ ) {        var object = objects[ ];      var target = targets[ ];        new tween.tween( object.position )        .to( { x: target.position.x, y: target.position.y, z: target.position.z }, math.random() * duration + duration )        .easing( tween.easing.exponential.inout )        .start();        new tween.tween( object.rotation )        .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, math.random() * duration + duration )        .easing( tween.easing.exponential.inout )        .start();      }      new tween.tween( )      .to( {}, duration * 2 )      .onupdate( render )      .start();    }    function onwindowresize() {      camera.aspect = window.innerwidth / window.innerheight;    camera.updateprojectionmatrix();      renderer.setsize( window.innerwidth, window.innerheight );    }    function animate() {      requestanimationframe( animate );      tween.update();    controls.update();    }    function render() {      renderer.render( scene, camera );    }

html, body {    height: 100%;  }  body {    background-color: #000000;    margin: 0;    font-family: arial;    overflow: hidden;  }    {    color: #ffffff;  }    #info {    position: absolute;    width: 100%;    color: #ffffff;    padding: 5px;    font-family: monospace;    font-size: 13px;    font-weight: bold;    text-align: center;    z-index: 1;  }    #menu {    position: absolute;    bottom: 20px;    width: 100%;    text-align: center;  }    .element {    width: 140px;    height: 180px;    box-shadow: 0px 0px 20px rgba(0,255,255,0.5);    border: 1px solid rgba(127,255,255,0.25);    cursor: default;  }    .element:hover {    box-shadow: 0px 0px 20px rgba(0,255,255,0.75);    border: 1px solid rgba(127,255,255,0.75);  }      .element .number {      position: absolute;      top: 20px;      right: 20px;      font-size: 20px;      color: rgba(127,255,255,0.75);    }      .element .symbol {      position: absolute;      top: 40px;      width: 100%;      font-size: 70px;      text-align: center;      color: rgba(255,255,255,0.75);      font-weight: bold;        -webkit-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));      -moz-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));      -o-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));      -ms-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));      filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));    }      .element .details {      position: absolute;      top: 125px;      width: 100%;      font-size: 18px;      text-align: center;      color: rgba(127,255,255,0.75);    }    button {    color: rgba(127,255,255,0.75);    background: transparent;    outline: 1px solid rgba(127,255,255,0.75);    border: 0px;    padding: 5px 10px;    cursor: pointer;  }  button:hover {    background-color: rgba(0,255,255,0.5);  }  button:active {    color: #000000;    background-color: rgba(0,255,255,0.75);  }

<script src="https://threejs.org/build/three.min.js"></script>  <script src="https://threejs.org/examples/js/libs/tween.min.js"></script>  <script src="https://threejs.org/examples/js/controls/trackballcontrols.js"></script>  <script src="https://threejs.org/examples/js/renderers/css3drenderer.js"></script>    <div id="container"></div>  <div id="info"><a rel="nofollow" rel="noreferrer"href="https://threejs.org" target="_blank">three.js css3d</a> - periodic table. <a rel="nofollow" rel="noreferrer"href="https://plus.google.com/113862800338869870683/posts/qcfk5hrwran" target="_blank">info</a>.</div>  <div id="menu">    <button id="table">table</button>    <button id="sphere">sphere</button>    <button id="helix">helix</button>    <button id="grid">grid</button>  </div>