👾 3D Pixels 👾

3d-pixels.markdown

👾 3D Pixels 👾

You may be tempted to call these "voxels", but don't. That's just silly.

A Pen by Shaw on CodePen.

License.

index.html

<script>console.clear();</script>

<header>
  

  <span>Drag & drop an image or:</span>  
  
  <label>
    <span class="button">Upload Image</span>
    <input type="file" id="uploader" accept=".jpg,.jpeg,.png,.gif,.svg" />
  </label>
  
<div class="images">
  
  <img src="data:image/gif;base64,R0lGODlhIwAJAPIEAC8bQYcjQb4xRPBZQf//AAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCAAEACwAAAAAIwAJAAADTki6BA7qNThjYxgHsvvmYMcFX5YJBKouApq6Cmwyw1IPOHHrPF7PwKBwIYEYKcijMpkskURQpwIaGqVY11Ys5upmX12Br0e+/Xjosq6WAAA7" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAElBMVEUmRcm7BwfnvRnnGRkXlkIIYCUcRSgwAAAAAXRSTlMAQObYZgAAAGZJREFUeNpd0FEOwCAIA1AL5f5XHkXEbf3Q+hKice1ERW2ANJIXg5P4io3toYjosknltittFjUnGSvin4x0L3B3mihFkcheBAyl6YhE7RJRdvRi54VncC4XMCM8AtDK0Aagv7DqegA8tAM+8Gw2xgAAAABJRU5ErkJggg==" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAKUlEQVQI12NggIID1ur/kTFWQRQFBCU/X5iOgYmXRDYORRJdN0EXg8QBF99+3CN7WjYAAAAASUVORK5CYII=" />
  
  <!-- Partially generated from https://github.com/KawaiiHannah/pixel-character -->
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAALVBMVEUmRcm0VBpMMyD/89ffs5QAAADQvYIWRHHsxksUJDb369DrXI1jlhV9fX3///994t32AAAAAXRSTlMAQObYZgAAALtJREFUeNqt0O0KwjAQRNGtm+mHtb7/4zqz3RISjfjDSwJLDiG0ZjYx67sxY1LVqwrNelUnu4+Y7qrn0rI3DKAUAAMWav9we6pvzyzfZs2XSSOxPH9M1Yxs8XIwpAj2ZEMUClABsrMPvKzJ0Ruvy1dekudQMiwU0mSQZ+qYDe4wcdawudjzMuPgHLeN413MxNg5PLgre+WCaEcxtsWiGq4LVw0fYMeYI+dYMVmd3Jw1Y+iYNf2Zn1pdefYCq7kJX4AymZ4AAAAASUVORK5CYII=" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAMAAAD6fQULAAAADFBMVEUAAAD4OACsfAD/pEAePM4XAAAAAXRSTlMAQObYZgAAAEhJREFUeNo9zkEOACAIA0HY/v/PlmLYEMnoxXKdautrBEieCoQiOzpa2Uw16RdA52Fh3QUjRyjRag+SLHVSZBz/P/dwuFuc3AONSwFH+AUHWgAAAABJRU5ErkJggg==" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAMAAAAsVwj+AAAADFBMVEUAAAD4OAD/pECsfADncEaFAAAAAXRSTlMAQObYZgAAAHJJREFUeNptkVEOwCAIQ4Xe/84ba6Fm+j4mfWlIdItEwXFi5D9vwlAAyEROhamk1CQZtIBFgQ+ttNFWbxDByhoQVQ9MbgFlCyhbQAUKVjj6SyEssmJS5EuImk+xNsHbdPZDx4azT/+0u+jb+TwFYFEc4gEFPwL1uk6xqwAAAABJRU5ErkJggg==" />
  
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAAWklEQVR4AY2SAQZAIRBE/03+9btAN+k4sQnLep7VMGx2nkb6oHC7Yv1qAT3sIKvsOa5z1moZqlCFsXfAIFSyJQ0BAgzhJXD28DvkAA1Z55xboLuJ6r+DAmYCBzlF9V14mgRnAAAAAElFTkSuQmCC" />

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAbCAYAAABMU775AAAAeklEQVR4AaXUAQaAQBQG4W7S9btAN+k4UUDsNBrZx0/w7f9SdvmYC/EhONYhiQkaeouHyEHgFzr3bYgihuCBGJ7qkI2Ehn1taeAzY63Zru9aByiShmzid2QaEbMxYK87DwP3v0qIeKsEbQEjARPNw8Z9WSEOGjb+u+YNCNPwV+lkdokAAAAASUVORK5CYII=" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAxUlEQVR4AZWTsQ3CQBAE3QmEhHSASyAkpANcgjtwCVACJdABhM5og+zRPFpxvG5BnDRakHd0tvzu3Gy7rrTYchRKP7yZa3o5CufVvnI/bV7io6QiEsUoUTI0Ui4YJJbb5eNCGQ5JaoI07RY1VdJvpTogkWIUVbTQRUy3xO0t2srEkiRPM3oGZGEk8y6RI8v1JMFLOgT9eKyM8xW8jBi2IHHMAJHMZcoqAv//FrXx9+16kTKZS1EOUFTC14ki3yGCErzoaMUn2MSiXzxYN68AAAAASUVORK5CYII=" />
  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAcCAYAAAC+lOV/AAAA9UlEQVR42qWTsQ3CMBBFvQmUlGxARqCkZAM8QjbICDACI7ABlOlYg87oJ3rIyTk+EJae4pP9/h2JCLW1DyEBcOZKqYkjfWRfD8il6+aYnpfdKL+SauSiiCR0qUJRRPJBNN3+klM86XeKfG/HHg4ft1wUXOaMOkzE7rAysuqSrL3u57IEZATBFNRTmQBApBvBGVOZbrMQj0oA3V2RZcd0R2aZb669kABf/SkIkaBPBKqXOkoEI9oAO+7v8nrbpVlAdWwji8oLI6gsN+2ZgA9tfwfOF2VAcGQ/QIIRPRmMXA1YIniLt5ohiacbYOTUx0HkWZU9uPgGlEV5wTZ42bcAAAAASUVORK5CYII=" />
</div>
  

</header>

script.js

var renderCalls = [];
function render () {
  requestAnimationFrame( render );
  renderCalls.forEach((callback)=>{ callback(); });
}
render();

/*////////////////////////////////////////*/

function loadFiles(e){
  var files = (e.target.files || e.dataTransfer.files || uploader.files),
      file = files[0],
      reader = new FileReader();
  reader.onload = function(e){
    convertImage(e);
  }
  reader.readAsDataURL(file);
}

// File Uploader
var uploader = document.getElementById('uploader');
uploader.onchange = loadFiles;

// On image click
var imgs = [].slice.call(document.querySelectorAll('img'));
imgs.forEach((img,i)=>{
  img.addEventListener('click',()=>{
    buildBoxes.call(img);
  });

  if ( i === 0 ) { convertImage(img.src); } //setTimeout(()=>{ convertImage(img.src); },9000); }
  else if ( i === 1 ) { setTimeout(()=>{ convertImage(img.src); },4500); }
});

// Drag & Drop
var fileDrag = document.createElement('div');
fileDrag.setAttribute('id','drag-and-drop');
fileDrag.innerText = 'Drag & drop an image';

function FileDragReset(e){
  e.preventDefault();
  fileDrag.className = '';
}

function FileDragDrop(e){
  e = e || window.event;
  console.log('reset');
  FileDragReset(e);    
  loadFiles(e);
}

fileDrag.addEventListener("dragleave", FileDragReset);
document.addEventListener("dragenter", function(){ 
  console.log('drag enter');
  fileDrag.className = 'dragenter';
});
document.addEventListener('dragover',function(e){ e.preventDefault(); /* Essential! */ });
document.addEventListener("drop", FileDragDrop);


/*////////////////////////////////////////*/

function convertImage(src,callback){
  var img = new Image();
  img.onload = buildBoxes;
  img.src = ( src.target ? src.target.result : src );
}

// Convert image to canvas ImageData
function imageToData(img) {

  var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d"),
      width = img.width,
      height = img.height;

  if ( width + height > 90 ) {
    let scaleDown = 90 / ( width + height );
    console.log(width, height);
    width = img.width *= scaleDown;
    height = img.height *= scaleDown;
    console.log(width, height);
  }

  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);

  return ctx.getImageData(0,0,width,height);
}

function getColors(img) {
  var colors = {},
      data = img.data,
      len = data.length,
      w = img.width,
      h = img.height,
      x = 0,
      y = 0,
      i = 0,
      color;

  for (; i < len; i+= 4) {
    if ( data[i+3] > 0 ) {
      color = 'rgb('+data[i]+','+data[i+1]+','+data[i+2]+')' //,'+data[i+3]/255+')';
      if ( !colors[color] ) {
        colors[color] = [];
        colors[color].r = data[i];
        colors[color].g = data[i+1];
        colors[color].b = data[i+2];
        colors[color].a = data[i+3] / 255;
        colors[color].y = 0.299*data[i] + 0.587*data[i+1] + 0.114*data[i+2];
      }
      x = (i / 4) % w;
      y = Math.floor((i / 4) / w);
      colors[color].push([x,y]);
    }                      
  }

  return colors;
}

/*////////////////////////////////////////*/

var camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 800 );
camera.position.z = 30;
camera.position.y = -2;


/*////////////////////////////////////////*/


var pointer = { 
  x: 0, 
  y: 0,
};

document.addEventListener('mousemove', pointerMove);
document.addEventListener('touchmove', pointerMove);

document.body.addEventListener('mouseleave', pointerReset);
document.body.addEventListener('touchcancel', pointerReset);

function pointerReset(e){
  pointer.x = 0.5;
  pointer.y = 0.5;
}

function pointerMove(e){
  let pos = e.touches ? e.touches[0] : e;
  pointer.x = pos.clientX / window.innerWidth;
  pointer.y = pos.clientY / window.innerWidth;
};

let mousePos = { x: 0.5, y: 0.5, _x: 0.5, _y: 0.5 };
function trackMouse(e){
  let pointer = e.touches ? e.touches[0] : e;
  mousePos.x = ( pointer.clientX / window.innerWidth );
  mousePos.y = ( pointer.clientY / window.innerHeight );
};

function ease(current,target,ease){ return current + (target - current) * ( ease || 0.2 ); }
function updateCamera(){
  mousePos._x = ease(mousePos._x || 0.5, mousePos.x, 0.06);
  mousePos._y = ease(mousePos._y || 0.5, mousePos.y, 0.06);
  camera.position.x = (-25 * (mousePos._x - 0.5) * 2);
  camera.position.y = (25 * (mousePos._y - 0.5) * 2);
  camera.lookAt(new THREE.Vector3(0,0,0));
}
updateCamera();

window.addEventListener('mousemove', trackMouse);
renderCalls.push(updateCamera);


/*////////////////////////////////////////*/

var scene = new THREE.Scene();
//scene.fog = new THREE.FogExp2( 0xFFFFFF, 0.01);
scene.fog = new THREE.Fog(0xEEEEEE, 30, 300);

var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xFFFFFF );//0x );
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = Math.pow( 0.94, 5.0 );

// if ( window.innerWidth > 500 ) {
//   renderer.shadowMap.enabled = true;
//   renderer.shadowMap.type = THREE.PCFShadowMap;
// }

window.addEventListener( 'resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}, false );

document.body.appendChild( renderer.domElement);

renderCalls.push(function(){ renderer.render( scene, camera ); });

/*////////////////////////////////////////*/ 

let orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableRotate = false;
orbit.enablePan = false;
orbit.enableKeys = false;
orbit.zoomSpeed = 0.6;
orbit.minDistance = 10;

/*////////////////////////////////////////*/

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var hemiLight = new THREE.HemisphereLight( 0xFFF7EB, 0xEBF7FD, 0.3 );
scene.add( hemiLight );

var light = new THREE.SpotLight( 0xffffff );
light.position.y = 40;
light.position.x = 0;
light.position.z = 200;
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 1;
light.shadow.camera.far = 800;
light.shadow.camera.fov = 40;
light.power = 2.5;
scene.add(light);

renderCalls.push(()=>{
  light.position.copy(camera.position);
});

var light2 = new THREE.PointLight( 0xffffff );
light2.position.y = 40;
light2.position.x = 0;
light2.position.z = 200;
light2.castShadow = true;
light2.power = 1.5;
scene.add(light);


//var axisHelper = new THREE.AxisHelper( 30 );
// scene.add( axisHelper );
// The X axis is red. The Y axis is green. The Z axis is blue.

/*////////////////////////////////////////*/


var geometry = new THREE.BoxGeometry( 1, 1, 1 );
function makeBox(color, a){
  
  var material = new THREE.MeshPhongMaterial({
    color: color,
    transparent: ( a && a !== 1 ),
    opacity: a,
    shininess: 15
  });
  var cube = new THREE.Mesh( geometry, material );
  cube.castShadow = true;
  cube.receiveShadow = true;
  return cube;
}

var group; 
var animating = false;
var animatingOut = false;

function transitionOut(oldGroup){
  if ( oldGroup ) {

    let tl = new TimelineLite({
      onStart: ()=> { animatingOut = true },
      onComplete: ()=>{ 
        animatingOut = false; 
        scene.remove(oldGroup); 
      }
    });

    oldGroup.traverseVisible((object)=>{
      if ( object.parent === oldGroup ) {
        let speed = 0.75 + Math.random() * 1.25;

        object.material = object.material.clone();

        tl.to(object.material, speed * 0.5, {
          transparent: true,
          opacity: 0,
          ease: 'Power3.easeIn'
        },speed * 0.5);

        tl.to(object.position, speed, {
          z: -200,
          delay: Math.random(),
          ease: 'Power3.easeIn' //Bounce.easeOut
        },0);

      }
    });
  }
}

CustomBounce.create("myBounce", {strength: 0.2, squash:0 });

function transitionIn(newGroup){

  if ( newGroup ) { 

    let tl = new TimelineLite({
      onStart: ()=>{ 
        animating = true;
        scene.add(newGroup);
      },
      onComplete: ()=>{ 
        animating = false; 
        group = newGroup;
      }
    });
    
    tl.addLabel('start',0.5);

    newGroup.traverseVisible((object)=>{
      if ( object.parent === newGroup ) {
        let speed = 0.75 + Math.random() * 1.25;

        tl.from(object.position, speed, {
          z: 40,
          delay: Math.random(),
          ease: 'myBounce'
        },'start');

      }
    });
    
  }
}

function buildBoxes(){
  
  if ( animating ) { return; }

  let img = this;
  let data = imageToData(img);
  let colors = getColors(data);

  // Remove the old group
  transitionOut(group);

  // Create a new group
  let newGroup = new THREE.Group();

  for (var color in colors) {
    let arr = colors[color];
    let i = 0;
    let len = arr.length;
    let cube = makeBox(color, arr.a);

    cube.scale.z = 1 + 1 * (arr.y / 255);

    for ( ; i < len; i++ ){
      let pixel = arr[i];
      let pixelCube = cube.clone();
      pixelCube.position.set(pixel[0] - (img.width/2), -pixel[1] + (img.height/2), 0);
      newGroup.add(pixelCube);

    }
  }

  transitionIn(newGroup);
}

/*////////////////////////////////////////*/


let controls = {
  radius: 4,
  amount: 4.5,
  type: 'attract',

  methods: {
    attract: function(object, pos){
      let dist = distance(object.position, pos);
      object.__position = object.__position || object.position.clone();
      object.position.z = ( dist < controls.radius ? controls.amount * (controls.radius-dist)/controls.radius / object.scale.z : 0 );
    },

    // loosely based on http://jsfiddle.net/225cb9d7/3/
    repel: function(object, pos){
      let x0 = object.position.x;
      let y0 = object.position.y;
      let diffX = pos.x - x0;
      let diffY = pos.y - y0;
      let dist = Math.sqrt( diffX * diffX + diffY * diffY);// + diffZ * diffZ);

      // Save copy of original position
      object.__position = object.__position || object.position.clone();


        let powerx = x0 - ( diffX / dist) * (controls.amount/2) / dist;
        let powery = y0 - ( diffY / dist) * (controls.amount/2) / dist;

        let forcex = ( object.__position.x - x0); //(forcex + ( object.__position.x - x0) / 2) / 2.1;
        let forcey = ( object.__position.y - y0); //(forcey + ( object.__position.y - y0) / 2) / 2.1;

        object.position.x = powerx + forcex;
        object.position.y = powery + forcey;
        object.position.z = ( dist < controls.radius ? -controls.amount * 2 * (controls.radius-dist)/controls.radius / object.scale.z : 0 );

    }
  }
};


var gui = new dat.GUI();
gui.add(controls, 'type', Object.keys(controls.methods));
gui.add(controls, 'radius', 1, 10).step(0.5);
gui.add(controls, 'amount', 0.25, 10).step(0.25);
gui.domElement.style.zIndex = 20;

/*////////////////////////////////////////*/

function distance(pos1, pos2){
  let diffX = pos2.x - pos1.x,
      diffY = pos2.y - pos1.y;//,
  //diffZ = pos2.z - pos1.z;
  return Math.sqrt( diffX * diffX + diffY * diffY);// + diffZ * diffZ);
}

let mouse = new THREE.Vector3();
let raycaster = new THREE.Raycaster();

const TWOPI = Math.PI * 2;

document.addEventListener('mousemove',click);
document.addEventListener('touchmove',click);

function click(e){

  if ( animating || animatingOut || !group ) { return; }

  let pointer = e.touches ? e.touches : [e];

  for (let i = 0, len = pointer.length; i < len; i++){

    let event = pointer[i];
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    mouse.unproject( camera );
    let dir = mouse.sub( camera.position ).normalize();
    let dist = -camera.position.z / dir.z;
    let pos = camera.position.clone().add( dir.multiplyScalar( dist ) );

    group.traverseVisible((object)=>{
      if ( object !== group ) {
        controls.methods[controls.type](object, pos);
      }
    });
  }
}

/*////////////////////////////////////////*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://codepen.io/shshaw/pen/epmrgO"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>

style.less

//body { display: none; }

canvas { display: block; position: absolute; top: 0;}

header { 
  position: absolute; bottom: 0; right: 0; left: 0;
  z-index: 10;
  text-align: center;
  font-size: 12px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  > * { 
    //display: block; 
    margin: 0 auto; 
    padding: 4px 8px;
    background: rgba(255,255,255,0.8);
  }

  label { 
    input { display: none; }
  }

  .button { 
    display: inline-block;
    border: solid 1px #AAA;
    background: #EEE;
    padding: 4px 8px;
    border-radius: 5px;
  }

}

.dg.ac { z-index: 20 !important; }

.images {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  //text-align: right; z-index: 10;
  img, span { display: inline-block;  padding: 6px 6px; }
  img { cursor: pointer; max-height: 32px; width: auto; transition: background 0.3s linear; border-radius: 4px; }

  img:hover { background: rgba(200,200,200,0.5); }
}

#drag-and-drop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: red;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  &.dragenter { opacity: 1; }
}

/*////////////////////////////////////////*/



body {

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: 100%;
    min-height: 100vh;
    animation: preview 600ms linear;
    animation-fill-mode: forwards;
    background-size: 40% auto;
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
  }
}

@keyframes preview {
  0%, 90% { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAElBMVEUmRcm7BwfnvRnnGRkXlkIIYCUcRSgwAAAAAXRSTlMAQObYZgAAAGZJREFUeNpd0FEOwCAIA1AL5f5XHkXEbf3Q+hKice1ERW2ANJIXg5P4io3toYjosknltittFjUnGSvin4x0L3B3mihFkcheBAyl6YhE7RJRdvRi54VncC4XMCM8AtDK0Aagv7DqegA8tAM+8Gw2xgAAAABJRU5ErkJggg==); }
  100% { background-image: none; }
}