ThreeJS rotating icosahedron with images on vertices

davide

Jul 28, 2017 • 4 min read

Simple clone of the Stripe element @ https://stripe.com/radar

I had some fun replicating the rotating icosahedron of the Stripe page, and in the end, it came out pretty good.

I know that on Stripe they have created their own solid using Cinema 4d.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
   
   <div id="container">
      <canvas id="c"></canvas>
      <div class="vert" id="v1">
         <img src="https://unsplash.it/500"/>
      </div>
      <div class="vert" id="v2">
         <img src="https://unsplash.it/501"/>
      </div>
            <div class="vert" id="v3">
         <img src="https://unsplash.it/502"/>
      </div>
            <div class="vert" id="v4">
         <img src="https://unsplash.it/504"/>
      </div>
                  <div class="vert" id="v5">
         <img src="https://unsplash.it/505"/>
      </div>
   </div>
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>

</body>
</html>

*{
   font-family:Helvetica
}
#container{   
   
   position:absolute;
   background:black;
}

#c{
   background:black;
}

.vert{
   transform: translateX(-50) translateY(-50%);
   transition:opacity 0.2s;
   /* border: 1px solid #555;
   background:white;
   padding:0.5em 1em; */
         
   position: absolute;
}

img{
   min-width:60px;
   max-width:100px;   
   border-radius: 50%;
}

var c = document.getElementById("c")
c.width = 400;
c.height=400
var renderer = new THREE.WebGLRenderer({
   canvas: c
});
renderer.setSize(c.width, c.height);
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(45, c.width / c.height, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

var scene = new THREE.Scene();
var light = new THREE.AmbientLight( 0x666666 ); // soft white light
scene.add( light );
var dirLight = new THREE.DirectionalLight(0xffffff, 1);
var dirLight2 = new THREE.DirectionalLight(0xffffff, 2);
dirLight.position.set(10, 10, 10);
dirLight2.position.set(-10, -10, 50);
scene.add(dirLight);
scene.add(dirLight2);

var material = new THREE.MeshLambertMaterial({color: 0xff4444})
var geometry = new THREE.IcosahedronGeometry(30);
var I = new THREE.Mesh(geometry, material);
var speedx = speedy = 0
renderer.setClearColor( 0xffffff );
var offsetX=170;
var offsetY=150;
scene.add(I)

// var v2 = document.getElementById("v2");

function createVert(id, vnum){
   var v1 = document.getElementById(id);  
   var vector = I.geometry.vertices[vnum].clone();
   vector.applyMatrix4( I.matrixWorld );
   v1.style.top= ((-vector.y*5.5)+ offsetY) +"px";
   v1.style.left=((vector.x*5) + offsetX) +"px";
   v1.style.opacity= (vector.z<5) ? "0" : "1"
}

setInterval(()=>{
   I.rotation.y = speedx+=0.05
   I.rotation.x = speedy+=0.005
   renderer.render(scene, camera);
   
   createVert("v1", 2)
   createVert("v2", 4)
   createVert("v3", 5)
   createVert("v4", 6)
   createVert("v5", 7)
  
},30)