ThreeJS rotating icosahedron with images on vertices

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)

Davide Andreazzini

Read more posts by this author.