<section class="main-container">
	<div class="order-container">
		<h1 class="title1">ThreeJS makis</h1>
		<ul class="order-menu">
			<li class="item-salmon"><a href="#" data-item="salmon" class="order-itembutton active">Salmon</a></li>
			<li class="item-avocado"><a href="#" data-item="avocado" class="order-itembutton">Avocado</a></li>
			<li class="item-tuna"><a href="#" data-item="tuna" class="order-itembutton">Tuna</a></li>
		</ul>
	</div>
</section>


<aside class="Signature">
			<p>Codevember #4 - Twindev</p>
			<p>Diana Marchal & Nathalie Marchal</p>
		</aside>
html,body { margin: 0;  padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: white;}

body {
	font-family: 'Open Sans', sans-serif;
}

ul {
	padding: 0;
	margin: 0;
}

.order-container {
	position: fixed;
    bottom: 0px;
    width: 100%;
}

.order-menu {
	list-style: none;
	margin: 0 auto;
	text-align: center;
}

.order-menu li {
	display: inline-block;
    width: 200px;
}

.order-menu li a {
	text-decoration: none;
	background-color: beige;
	padding: 12px 0px;
	display: block;
	text-align: center;
	color: grey;
	border-top: 2px solid rgba(0,0,0,0.1);
}

.order-menu li a.active {
	border-top: 2px solid grey !important;
}

.title1 {
	font-weight: normal;
	font-size: 1.5em;
	color: grey;
	text-transform: uppercase;
	text-align: center;
}


.Signature {
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 20px;
  color: black;
  line-height: .2;
  font-size: .7em;
  font-family: Open Sans, sans-serif;
}

var width = window.innerWidth;
var height = window.innerHeight;
var groupobject;
var makisgroup;
var nbofmakis = 4;
THREE.ImageUtils.crossOrigin = 'anonymous';

var textureavocado = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/avocado-texture.jpg' );

var texturesalmon = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/salmontexture.jpg' );

var texturealg = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/alga.jpg' );
var texturerice = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/cookedrice.jpg' );
var texturetuna = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/tuna.jpg' );

window.requestAnimFrame = (function () {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
              window.setTimeout(callback, 1000 / 60);
          };
      })();   

var scene = new THREE.Scene();


var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 200;
camera.position.x = 0;
scene.add( camera );

var renderer = new THREE.WebGLRenderer({ alpha: true });

renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );


function createMaki() {

  //***** ALG. *********//
  var material = new THREE.MeshBasicMaterial( { map: texturealg } );
  var geometry = new THREE.CylinderGeometry( 30, 30, 40, 100 );
  var cylinder = new THREE.Mesh( geometry, material );

  // ********* RICE ********* //
  var geometrycontent = new THREE.CylinderGeometry( 25, 25, 40, 32 );
  var materialrice = new THREE.MeshBasicMaterial( { map: texturerice } );
  var cylindercontent = new THREE.Mesh( geometrycontent, materialrice );
  cylindercontent.position.y = 1;

  // *********** AVOCADO *********//
  var geometryinside = new THREE.CylinderGeometry( 12, 12, 40, 32 );
  var materialavocado = new THREE.MeshBasicMaterial( { map: texturesalmon } );
  var cylinderinside = new THREE.Mesh( geometryinside, materialavocado );
  cylinderinside.position.y = 5;

  //*** maki components object ****//
  groupobject = new THREE.Object3D();
  groupobject.add( cylinder );
  groupobject.add( cylindercontent );
  groupobject.add( cylinderinside );

  makisgrouppair = new THREE.Object3D();
  makisgroupunpair = new THREE.Object3D();

  //create x nb of makis
  for ( var i = 0; i < nbofmakis; i ++ ) {
      var maki = groupobject.clone();
      maki.scale.set(1,1,1);
      maki.position.x += 50*i - nbofmakis*10;
      maki.position.y = 10;
      maki.rotation.x = -150;

      if (i%2 == 0) {
        maki.position.y += 50;
        makisgrouppair.add(maki); //pair
      } else {
        makisgroupunpair.add(maki); //unpair
      }
    }
      scene.add( makisgrouppair );
      scene.add( makisgroupunpair );
  
  // renderer.render( scene, camera );

}
createMaki();


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

function animationTween() {
  TweenMax.to(makisgrouppair.position, 0.5, { y: makisgrouppair.position.y +30, ease:Power3.easeOut});
  TweenMax.to(makisgroupunpair.position, 1.0, { y: makisgroupunpair.position.y +30, ease:Power3.easeOut, onComplete:finishedAnim});
}
animationTween();

function finishedAnim() {
  TweenMax.to(makisgrouppair.position, 0.5, { y: makisgrouppair.position.y -30, ease:Power3.easeOut});
  TweenMax.to(makisgroupunpair.position, 1.0, { y: makisgroupunpair.position.y -30, ease:Power3.easeOut, onComplete:animationTween});
}

function orderMaki() {
  $( ".order-itembutton" ).click(function(e) {
    e.preventDefault();
    var orderedItem = $(this).data("item");

    $( ".order-itembutton" ).removeClass("active");
    $(this).addClass("active");

    //maki rotation on ingredient change
    TweenMax.to(makisgrouppair.rotation, 0.5, { x: makisgrouppair.rotation.x +2* Math.PI, ease:Power3.easeOut});
    TweenMax.to(makisgroupunpair.rotation, 0.5, { x: makisgroupunpair.rotation.x +2* Math.PI, ease:Power3.easeOut});

    //update textures 
    switch (orderedItem) {
      case "salmon":
        for(var i in makisgrouppair.children) { 
          makisgrouppair.children[i].children[2].material.map = texturesalmon;
          makisgrouppair.children[i].children[2].material.needsUpdate = true; 
        }

        break;

      case "avocado":
        for(var i in makisgrouppair.children) { 
          makisgrouppair.children[i].children[2].material.map = textureavocado;
          makisgrouppair.children[i].children[2].material.needsUpdate = true;
        }
        break;

      case "tuna":
      for(var i in makisgrouppair.children) { 
          makisgrouppair.children[i].children[2].material.map = texturetuna;
          makisgrouppair.children[i].children[2].material.needsUpdate = true;
        }

        break;


    }


  });
}
orderMaki();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js