Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
d3 + x3dom
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>kCube</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
<style>
x3d {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border: 0;
}
</style>
</head>
<body></body>
<script>
// http://doc.x3dom.org/author/Grouping/Transform.html
// http://bl.ocks.org/camio/5087116
var colour = "#FFF yellow #fa0 #b11 #02e #0A0".split(" ");
var size = "0.8,0.0,0.8 0.0,0.8,0.8 0.8,0.8,0.0".split(" ");
var facelets = [];
var matricies = [
[[0,0,0],[0,0,1],[0,0,2],[1,0,0],[1,0,1],[1,0,2],[2,0,0],[2,0,1],[2,0,2]],
[[0,0,0],[0,0,1],[0,0,2],[0,1,0],[0,1,1],[0,1,2],[0,-1,0],[0,-1,1],[0,-1,2]],
[[0,0,0],[0,-1,0],[0,-2,0],[-1,0,0],[-1,-1,0],[-1,-2,0],[-2,0,0],[-2,-1,0],[-2,-2,0]],
];
function face(x,y,z,c,m) {
matricies[m].forEach(function(e,i) {
facelets.push({
t:`${x+e[0]} ${y+e[1]} ${z+e[2]}`,
c:colour[c],
s:size[m]
})
});
}
face(-1,1.4,-1,0,0);
face(-1,-1.4,-1,1,0);
face(-1.4,0,-1,2,1);
face(1.4,0,-1,3,1);
face(1,1,-1.4,4,2);
face(1,1,1.4,5,2);
var x3d = d3.select("body")
.append("x3d")
.attr("showStat", "true")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight)
var scene = x3d.append("scene");
var cubies = scene
.selectAll('.cubie')
.data(facelets)
var cubieEnter = cubies
.enter()
.append("transform")
.classed("cubie", true)
.attr('translation',d=>d.t)
.append("shape")
cubieEnter
.append("appearance")
.append("material")
.attr("diffuseColor",d=>d.c)
cubieEnter
.append("box")
.attr('size',d=>d.s)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment