three js test

index.html

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<div id="container"></div>
		<div id="info"><a href="https://threejs.org" target="_blank">three.js css3d</a> - periodic table. <a  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>

script.js

var table = [

            
      "<div class='miniatura'><img src='https://i.ytimg.com/vi/R9yiJL-oaVk/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/REoJJLj-sb0/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/HNYxHizWeBo/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/JhEfJCN59e4/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/zofgJSog43I/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/MBNvmdEv5pY/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/tM5RzrpW5Nk/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/fUTu7hH65wU/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/ml-4-Sg39ho/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/9o6XJhmdv78/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/vewrpLaQt5g/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/ScU4nI_O5F4/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/V9Wx0GqAVbU/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/G-d2lXAvldw/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/Cdiz_47IoG8/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/FxvWkUsIZbE/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/csUwqkC7aJc/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/_BV5bqIyQqo/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/EUcimfhJmmw/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/wgkt_fEOsvQ/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/Y0WqUs7Yppk/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/QZYLtzs-p0I/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/tRXX_AN316g/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/jrp1-MF9RJk/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/Mh0gPzekJL0/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/iUjLKdqv9Os/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/0U2NtZrJfIA/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/xST4hiuI8vg/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/s2MV8n0dPrY/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/PpwRxYz1kGQ/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/VNegUhT62bo/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/2lGMVLgCaLg/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/NsI4okGb00Q/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/ey879WjZsSg/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/EsW1z9lUTA4/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/jV83P7GeEfQ/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/t9LszY6aH-A/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/rkB-9s8eYjo/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/J6xV9Wy3tug/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/r9eI4Ivn1kc/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/xuB-en_gUr4/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/ifvZlkwe5pQ/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/Iq0OqT7rhUY/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/l-Ti8Dqb7tQ/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/BYcaycrQXA0/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/RYb_DaanvdI/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/xbTQOd0K9is/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/LWZH52gbeTw/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/6Rk7_vPwNPs/hqdefault.jpg'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/MdlTT3zSUQU/hqdefault.jpg'></div>",    ];

table=table.concat(table);

table=table.concat(table);

table=table.concat(table);

table=table.concat(table);


var camera, scene, renderer;
var controls;
var objects = [];
var targets = {
  table: [],
  sphere: [],
  helix: [],
  grid: []
};
init();
animate();

function init() {
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 3000;

				scene = new THREE.Scene();
  
  
  // table
  for (var i = 0; i < table.length; i += 5) {
    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 = (i / 5) + 1;
    element.appendChild(number);
    var symbol = document.createElement('div');
    symbol.className = 'symbol';
    symbol.textContent = " ";
    element.appendChild(symbol);
    var details = document.createElement('div');
    details.className = 'details';
    details.innerHTML = table[i];
    
    //details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
    //details.innerHTML = '<img id="mini-personal-avatar" src="//gravatar.com/avatar/40fef7485ed67ab05fbc756242a64e09?s=80&amp;d=https://codepen.io/assets/avatars/user-avatar-80x80-94696e1c3870f64217a8040eedd4a1ed.png" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">';
    
    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);
    //
    var object = new THREE.Object3D();
   // object.position.x = ((i%5) * 14) - 1330;
   // object.position.y = -((i%5) * 1) + 990;
//    object.position.x = (table[i + 3] * 140) - 1330;
//    object.position.y = -(table[i + 4] * 180) + 990;

    targets.table.push(object);
  }
  // sphere
  var vector = new THREE.Vector3();
  for (var i = 0, l = objects.length; i < l; i++) {
    var phi = Math.acos(-1 + (2 * i) / l);
    var theta = Math.sqrt(l * Math.PI) * phi;
    var object = new THREE.Object3D();
    object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
    object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
    object.position.z = 800 * Math.cos(phi);
    vector.copy(object.position).multiplyScalar(2);
    object.lookAt(vector);
    targets.sphere.push(object);
  }
  // helix
  var vector = new THREE.Vector3();
  for (var i = 0, l = objects.length; i < l; i++) {
    var phi = i * 0.175 + Math.PI;
    var object = new THREE.Object3D();
    object.position.x = 900 * Math.sin(phi);
    object.position.y = -(i * 8) + 450;
    object.position.z = 900 * Math.cos(phi);
    vector.x = object.position.x * 2;
    vector.y = object.position.y;
    vector.z = object.position.z * 2;
    object.lookAt(vector);
    targets.helix.push(object);
  }
  // grid
  for (var i = 0; i < objects.length; i++) {
    var object = new THREE.Object3D();
    object.position.x = ((i % 5) * 400) - 800;
    object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
    object.position.z = (Math.floor(i / 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.minDistance = 500;
  controls.maxDistance = 6000;
  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.sphere, 2000);
  //
  window.addEventListener('resize', onWindowResize, false);
}

function transform(targets, duration) {
  TWEEN.removeAll();
  for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    var target = targets[i];
    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(this)
    .to({}, duration * 2)
    .onUpdate(render)
    .start();
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  render();
}

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  controls.update();
}

function render() {
  renderer.render(scene, camera);
}

scripts

<script src="https://threejs.org/build/three.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>

style.css

			html,
			body {
			  height: 100%;
			}
			
			body {
			  background: #93cede;
background: #93cede;
background: -moz-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #93cede), color-stop(20%, #014659), color-stop(80%, #014659), color-stop(100%, #014659));
background: -webkit-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -o-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -ms-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: linear-gradient(to bottom, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#014659', GradientType=0 );
			  margin: 0;
			  font-family: Helvetica, sans-serif;
			  ;
			  overflow: hidden;
			}
			
			a {
			  color: #ffffff;
			}
      .details img {
        max-width:100px;
      }

      .details img:hover {
        max-width:110px;
      }


			#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: 120px;
			  height: 160px;
			  box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
			  border: 1px solid rgba(127, 255, 255, 0.25);
			  text-align: center;
			  cursor: default;
			}
			
			.element:hover {
			  box-shadow: 0px 0px 12px 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: 12px;
			  color: rgba(127, 255, 255, 0.75);
			}
			
			.element .symbol {
			  position: absolute;
			  top: 40px;
			  left: 0px;
			  right: 0px;
			  font-size: 60px;
			  font-weight: bold;
			  color: rgba(255, 255, 255, 0.75);
			  text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
			}
			
			.element .details {
			  position: absolute;
			  bottom: 15px;
			  left: 0px;
			  right: 0px;
			  font-size: 12px;
			  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);
			}

three-js-test.markdown

three js test

A Pen by Pablo on CodePen.

License.