Skip to content

Instantly share code, notes, and snippets.

@coderextreme

coderextreme/README.md

Last active January 16, 2016 03:45
Show Gist options
  • Save coderextreme/15c56736c8a907ab7532 to your computer and use it in GitHub Desktop.
Save coderextreme/15c56736c8a907ab7532 to your computer and use it in GitHub Desktop.
Download ZIP
Example for asterisky
Raw
README.md

This example is for asterisky

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Earth Rotating w/ Interior</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<link rel="stylesheet" type="text/css" href="http://x3dom.org/release/x3dom.css" ></link>
<style type="text/css">
X3D {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 600px;
z-index: -1;
}
body {
color: white;
background: black;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="http://x3dom.org/release/x3dom-full.js"></script>
</head>
<body>
<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace" showStat="false" showLog="false" altImg="">
<Scene>
<Transform scale="2 2 2" rotation= "1 0 0 0.3927">
<Transform id="world" rotation="0 1 0 2.3562">
<Shape>
<SphereSegment class="tq" ccw="false" latitude='-90 -80 -70 -60 -50 -40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90'
longitude='360 350 340 330 320 310 300 290 280 270 260 250 240 230 220 210 200 190 180 170 160 150 140 130 120 110 100 90' ></SphereSegment>
<Appearance>
<Material diffuseColor="0.2 0.8 0.8"></Material>
</Appearance>
</Shape>
<Shape>
<SphereSegment class="tq" ccw="false" latitude='-90 -80 -70 -60 -50 -40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90'
longitude='360 350 340 330 320 310 300 290 280 270 260 250 240 230 220 210 200 190 180 170 160 150 140 130 120 110 100 90' ></SphereSegment>
<Appearance>
<ImageTexture url='earth.png'></ImageTexture>
<TextureTransform id="tt" translation="0 0" scale="0.75 1"></TextureTransform>
</Appearance>
</Shape>
<Shape>
<SphereSegment class="oq" id="ss3" ccw="false" latitude='-90 -80 -70 -60 -50 -40 -30 -20 -10 0'
longitude='90 80 70 60 50 40 30 20 10 0' ></SphereSegment>
<Appearance>
<Material diffuseColor="0.2 0.8 0.8"></Material>
</Appearance>
</Shape>
<Shape>
<SphereSegment class="oq" id="ss4" ccw="false" latitude='-90 -80 -70 -60 -50 -40 -30 -20 -10 0'
longitude='90 80 70 60 50 40 30 20 10 0' ></SphereSegment>
<Appearance>
<ImageTexture url='earth.png'></ImageTexture>
<TextureTransform id="ot" translation="3 0" scale="0.25 0.5"></TextureTransform>
</Appearance>
</Shape>
</Transform>
</Transform>
</Scene>
</X3D>
</body>
<script type="text/javascript" src="world.js"></script>
<script type="text/javascript">
setInterval(function() {
// rotate longitude
/* doesn't work
var s1 = d3.select("X3D").select(".tq").attr("longitude");
var longs = s1.split(/ /);
longs[longs.length] = parseInt(longs[longs.length-1])-10;
d3.select("X3D").selectAll(".tq").attr("longitude", longs.slice(1).join(" "));
var s2 = d3.select("X3D").select(".oq").attr("longitude");
var longs = s2.split(/ /);
longs.unshift(parseInt(longs[0])+10);
longs[longs.length] = parseInt(longs[longs.length-1])-10;
d3.select("X3D").selectAll(".oq").attr("longitude", longs.slice(1).join(" "));
*/
// rotate transforms
var tt = d3.select("X3D").select("#tt").attr("translation");
var trans = tt.split(/ /);
trans[0] = parseFloat(trans[0])-1/27;
d3.select("X3D").select("#tt").transition().attr("translation", trans.join(" "));
var ot = d3.select("X3D").select("#ot").attr("translation");
var trans = ot.split(/ /);
trans[0] = parseFloat(trans[0])-1/9;
d3.select("X3D").select("#ot").transition().attr("translation", trans.join(" "));
/* rotate everything
var world = d3.select("X3D").select("#world").attr("rotation");
var rot = world.split(/ /);
rot[3] = parseFloat(rot[3])+Math.PI/12;
console.log(rot);
d3.select("X3D").select("#world").attr("rotation", rot.join(" "));
*/
}, 100);
</script>
</html>
Raw
world.js
(function () {
var data = [
{
trx:1, try:0, trz:0, tr:1.5708
},
{
trx:0, try:0, trz:1, tr:1.570
},
{
trx:1, try:0, trz:0, tr:3.1416
}
]
;
var world = d3.select("#world");
var hemitransform = world.selectAll(".hemitransform")
.data(data)
.enter()
.append("transform")
.attr("class", "hemitransform")
.attr("rotation", function(d) { return [d.trx, d.try, d.trz, d.tr ].join(" "); })
.append("transform")
.attr("class", "disktransform")
.attr("rotation", "1 0 0 -1.5708")
;
var color = d3.scale.category10();
function shelldata() {
return [ 0, Math.random(), Math.random(), Math.random(), Math.random(), 1 ].sort(function(a, b){return a-b;})
}
var sd = shelldata();
var shape = hemitransform.selectAll(".shape")
.data(sd)
.enter()
.append("shape")
.attr("class", "shape")
;
shape
.append("appearance")
.append("material")
.attr("diffuseColor", function(d, i) { return color(i); })
;
var disk2d = shape
.append("disk2d")
.attr("solid", "false")
.attr("class", "disk2d")
.attr("innerRadius", function(d, i) { if (i === 0) return 0; else return sd[i-1];})
.attr("outerRadius", function(d, i) { return sd[i]; })
;
setInterval(function() {
var sd = shelldata();
disk2d.data(sd);
disk2d.transition()
.attr("innerRadius", function(d, i) { if (i === 0) return 0; else return sd[i-1];})
.attr("outerRadius", function(d, i) { return sd[i]; })
},
1000);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment