block by micahstubbs afe2b4dd68e6938d34073ab4c397e621

d3unconf badge GIF

Full Screen

this block but in 31 megabyte gif form.


this iteration makes the dimensions 1050 x 1500 to work nicely with http://badgetron.com/


the camera position is currently a bit off in the Vive. checkout this commit commit hash 48e99fbb1bc66bd4b890d8bb170287d61092109e for a version where the camera position tracks the Vive HMD position when in VR. follow the stackoverflow question how to reset camera position on enter VR? for a possible method to show a custom camera position in 2D mode and a glued-to-the-hmd camera position when in VR

–<>–

a roomscale VR scene targeting the HTC Vive

use the front-trigger on either Vive controller to pick up and inspect a block

block a-boxes positions are closer to the origin than in previous examples so that they are within reach from in roomscale VR. ROADMAP: teleport locomotion ;-)

many thanks to @bryik_ws, @utopiah, @donrmccurdy over at the A-Frame slack for help getting the interaction working.

do get a slack invite of your own and check out the other places the A-Frame community gathers


all the blocks with thumbnail images created during the 2016 #d3unconf

here we use aframe’s a-boxes, which are kind of like SVG rects

a fork of aframe + d3 + bl.ocks from @donrmccurdy

falling blocks brought to you by the aframe-physics-system, also from @donrmccurdy

inspired by the conversations at the 3d and VR 11am session in the Alcatraz Room at the 2016 d3 unconference

forked from micahstubbs‘s block: aframe-blocks roomscale 03

forked from anonymous‘s block: aframe-blocks roomscale 03 -

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame / Bl.ocks / D3 GIF</title>
  </head>
  <style>
    body{
      margin:0;
    }
    .scene-container {
      width: 1050px;
      height: 1200px;
      margin-top: 200px;
    }
  </style>
  <body>
    <div class="padding">
    </div>
    <div class="scene-container">
      <img src="vr-blocks-for-badge-1.gif" alt="Loading" title="Loading" />
    </div>
  </body>
</html>

blocks.json

[  
  {  
    "id":"3757fe53ea94da4100db2e5071ea8289",
    "sha":"f37923e838ee6db8fcb20091d305ebce04404f1b",
    "description":"d3 blocks on a-boxes",
    "owner":{  
      "login":"micahstubbs"
    }
  },
  {  
    "id":"e70e14483fe01eb0a3ea7d1d46a30571",
    "sha":"7e3906f8d8a9e5d79d61f2b77cc16f2829cb4a92",
    "description":"Musical Hexagons",
    "owner":{  
      "login":"vasturiano"
    }
  },
  {  
    "id":"0ba5ee8bd3773d70462523679d4ef5a4",
    "sha":"30d1ebaccc65e061989090e948526917c09db5f7",
    "description":"Delaunay Force Mesh II",
    "owner":{  
      "login":"erlenstar"
    }
  },
  {  
    "id":"de2b023d968abb7276b894409efdac56",
    "sha":"2a168d34c566b37bbdacbeb144c8ff9e14a32175",
    "description":"merging selections",
    "owner":{  
      "login":"enjalot"
    }
  },
  {  
    "id":"7d3f8beb9faa183fc8d4fe3fd1610e00",
    "sha":"b92274a2b8d9e8653ca020d89bc42e75c086bf09",
    "description":"d3 yoga",
    "owner":{  
      "login":"enjalot"
    }
  },
  {  
    "id":"57fbb830ba7e62caa46a82891168bc29",
    "sha":"a5ae874d673654d9fc7a18e09efca0591082b8bb",
    "description":"CMYK zoom",
    "owner":{  
      "login":"veltman"
    }
  },
  {  
    "id":"e8ccca52559796be775553b467593a9f",
    "sha":"269b11fe342729ca6a70db087ff0e3f2fd8b2122",
    "description":"Continuous Legend",
    "owner":{  
      "login":"syntagmatic"
    }
  },
  {  
    "id":"6c73711f8f24af9808a9031a69f75b18",
    "sha":"52e696e66b5bb8d833b82ea5b429532a4336f96f",
    "description":"Stereographic",
    "owner":{  
      "login":"erlenstar"
    }
  },
  {  
    "id":"a1eb3bdecd2ab1be1de2425a260cc0f7",
    "sha":"feca193fc32e1606b0e53a9a873c797f2e332b64",
    "description":"Spirograph Geometric Flowers",
    "owner":{  
      "login":"EfratVil"
    }
  },
  {  
    "id":"8c5a0e697673fd676be6823589e1ce31",
    "sha":"40dcc4e31ed53cb403e36dd07288678f21ae6cfe",
    "description":"stroke-dash-array",
    "owner":{  
      "login":"jermspeaks"
    }
  },
  {  
    "id":"b04d673fbfc665f2c98f382e2c79a9ad",
    "sha":"6e7cf7e122c99bfa6bfa47e6f035472020e9730a",
    "description":"Voronoi Tessellation",
    "owner":{  
      "login":"git-ashish"
    }
  },
  {  
    "id":"1fd92b8c309a0fdc71b0a64c788a70e7",
    "sha":"227f453f79e7f56e2c4cbec1dc0110bfe5960e18",
    "description":"Canvas Voronoi",
    "owner":{  
      "login":"git-ashish"
    }
  },
  {  
    "id":"6a6c2f11f9493adba658003a5a18a107",
    "sha":"d7c669281c38b23d8b21eecb56ed6991e6d2c10b",
    "description":"Voronoi Labels",
    "owner":{  
      "login":"git-ashish"
    }
  },
  {  
    "id":"a5d147cd45c624e8811238f0a5480439",
    "sha":"7341de0028d33120fa8316619b8d0e6fdb170410",
    "description":"Comunidad Valenciana population(d3v4)",
    "owner":{  
      "login":"LuisSevillano"
    }
  },
  {  
    "id":"cd0c38a20141e997e926592264067db3",
    "sha":"5766833b6df73d777c7b6f10b3fc088bf32d99b2",
    "description":"cluster force",
    "owner":{  
      "login":"ericsoco"
    }
  },
  {  
    "id":"50a350e86de82278ffb2df248499d3e2",
    "sha":"137caaf4c0de8590d808ee35bf2ab6668109374c",
    "description":"CMYK halftone printing",
    "owner":{  
      "login":"veltman"
    }
  },
  {  
    "id":"32f369bb437d7c23198b9b9ccc8d4751",
    "sha":"c7f2be04e7fe9a4781940e73fb1896eb471714db",
    "description":"d3.unconf 2016, v11",
    "owner":{  
      "login":"micahstubbs"
    }
  },
  {  
    "id":"a7495ca3d5b322a6697530feb62fceef",
    "sha":"719e306c9885a691244c01a228aa84ca594b299a",
    "description":"Painting Manhattan-distance Voronoi",
    "owner":{  
      "login":"Fil"
    }
  },
  {  
    "id":"99767e64051096388078913afca3ff4e",
    "sha":"ac755a56347c9941c8e0d27067e69cdc41b4c0b9",
    "description":"Choropleth with d3-cluster-scale",
    "owner":{  
      "login":"schnerd"
    }
  },
  {  
    "id":"82144236b9a920f77e3af1776d265c57",
    "sha":"ff6b6f78560e73ddc3735ded012fba7524bfbc8b",
    "description":"d3.unconf 2016, v10",
    "owner":{  
      "login":"sxywu"
    }
  }
]