Skip to content

Instantly share code, notes, and snippets.

@richardmax

richardmax/index.html

Created September 27, 2018 14:30
Show Gist options
  • Save richardmax/fb9b735c96f9a8be431e3f6896b1d298 to your computer and use it in GitHub Desktop.
Save richardmax/fb9b735c96f9a8be431e3f6896b1d298 to your computer and use it in GitHub Desktop.
Download ZIP
three js test
Raw
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>
Raw
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);
}
Raw
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>
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment