"three js test"
Bootstrap 4.0.0 Snippet by harunpehlivan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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://harunpehlivantebimtebitagem.carrd.co" target="_blank">HARUN PEHLİVAN</a> IDENTIFICATION <a href="https://youtu.be/GTT5cH-mEZA" 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>
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); }
var table = [ "<div class='miniatura'><img src='https://tebm.files.wordpress.com/2017/07/cropped-arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-3.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-2.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-5.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/31-01-2016-122.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/20289945_1791855147727760_308806406_n.png'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/20273515_1791292961117312_1965864001_o.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/valiziyaretb.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx1.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx11.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx123.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx141.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx11234.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/evim.png?w=1000'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6136.jpg?w=663&h=497'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6149.jpg?w=329&h=247'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6216.jpg?w=329&h=246'></div>","<div <img src='https://aboutme.imgix.net/background/users/h/a/r/harun.pehlivan_1511592423_808.jpg?q=40&dpr=2&auto=format&fit=max&w=620&h=413.3333333333333&rect=255,0,2754,1836'></div>","<div class='miniatura'><img src='http://images.ticiz.com/1992285_w640_h640_original23574925460.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/1992300_w640_h640_mcode1.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2079304_w640_h640_150720151.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294889_w640_h640_7_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294890_w640_h640_10.04.2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294891_w640_h640_14_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294893_w640_h640_16_12_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294896_w640_h640_17_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294897_w640_h640_21_12_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294899_w640_h640_24_06_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568568_w640_h640_26.06.2016_111.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568569_w640_h640_180420131739.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568572_w640_h640_7206288415170581290232932o.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568574_w640_h640_111020142352112.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568575_w640_h640_090620131818.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568571_w640_h640_6384667897295418557963421n.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2612545_w640_h640_calisiyoruz.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2754831_w640_h640_kiminno.png'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/J6xV9Wy3tug/hqdefault.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2754832_w640_h640_res.php.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2603272_w640_h640_index.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528084_w640_h640_blrokrkdpuijo1rclkxno51280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528083_w640_h640_blrokrkdpuijo1rclkxno81280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528081_w640_h640_blrokrkdpuijo1rclkxno61280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528080_w640_h640_blrokrkdpuijo1rclkxno41280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528078_w640_h640_blrokrkdpuijo1rclkxno21280.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6113.jpg?w=496&h=661'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6109.jpg?w=496&h=661'></div>","<div class='miniatura'><img src='http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1518990802'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2017/07/cropped-gravatartebm-qr.png'>class='miniatura'></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&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); }

Related: See More


Questions / Comments: