Built with blockbuilder.org
forked from fabid's block: d3 x3dom surface
forked from fabid's block: d3 x3dom surface (no gradient)
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://x3dom.org/download/1.7/x3dom.js"></script>
<script src="//d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet", href="https://x3dom.org/download/1.7/x3dom.css" type="text/css" inline>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background: #fcfcfc}
canvas {background: white;}
</style>
</head>
<body>
<script>
function makeSolid(selection, color) {
selection.append("appearance").append("material").attr("diffuseColor", color || "black");
return selection;
}
function drawAxes(scene, x, y, z) {
var xAxis = d3_x3dom_axis.x3domAxis('x', 'y', x).tickSize(z.range()[1] - z.range()[0]).tickPadding(y.range()[0]);;
var yAxis = d3_x3dom_axis.x3domAxis('y', 'x', y).tickSize(z.range()[1] - z.range()[0]);
var zAxis2 = d3_x3dom_axis.x3domAxis('z', 'y', z).tickSize(x.range()[1] - x.range()[0]).tickFormat(function(d){return ''});
var zAxis = d3_x3dom_axis.x3domAxis('z', 'x', z).tickSize(x.range()[1] - x.range()[0]);
scene.append('group')
.attr('class', 'xAxis')
.call(xAxis)
.select('.domain').call(makeSolid, 'red');
scene.append('group')
.attr('class', 'yAxis')
.call(yAxis)
.select('.domain').call(makeSolid, 'blue');
scene.append('group')
.attr('class', 'zAxis')
.call(zAxis)
.select('.domain').call(makeSolid, 'green');
scene.append('group')
.attr('class', 'zAxis')
.call(zAxis2)
.select('.domain').call(makeSolid, 'green');
}
function initX3DomScene(selector, width, height) {
var x3d = d3.select("body").append("x3d")
.attr("width", width + 'px')
.attr("height", height +'px' );
d3.select('.x3dom-canvas')
.attr("width", 2 * width)
.attr("height", 2 * height);
var scene = x3d.append("scene");
var view_pos = [30, 100, 30];
var fov = 0.8;
var view_or = [0.02, 1, 1, 2.8];
scene.append("viewpoint")
.attr("position", view_pos.join(" "))
.attr("orientation", view_or.join(" "))
.attr("fieldOfView", fov);
return scene
}
var width = 800, height = 400;
var scene = initX3DomScene('body', width, height);
var x = d3.scaleLinear().range([0, 40]);
var y = d3.scaleLinear().range([0, 40]);
var z = d3.scaleLinear().range([0, 40]);
drawAxes(scene, x, y, z);
var cx = 0.5;
var cy = 0.9;
var f = function(vx, vy) {return (vx - cx)*(vx - cx) + (vy - cy)*(vy - cy);};
var X = d3.range(0, 1.05, 0.1);
var Y = d3.range(0, 1.05, 0.1);
var nx = X.length,
ny = Y.length;
var data = d3.range(nx).map(function(i) {return d3.range(ny).map(
function(j){
return [x(X[i]), y(Y[j]), z(f(X[i], Y[j]))];
});})
var flattened = d3.merge(data);
var coordinates = d3.merge(flattened).join(' ');
var coordIndex = d3.merge(d3.range(ny - 1).map(function(j) {
return d3.merge(d3.range(nx - 1).map(function(i) {
var start = i + j * nx;
return [start, start + nx, start + nx + 1, start + 1, -1];
}));
}));
var surfacesData = [{
points: coordinates,
faces: coordIndex.join(' '),
}]
var surfaces = scene.selectAll('.surface')
.data(surfacesData);
surfaces
.enter()
.append('shape')
.append('indexedfaceset')
.attr('coordIndex', function(d) { return d.faces} )
.append("coordinate")
.attr('point', function(d){ return d.points;});
</script>
</body>
Modified http://x3dom.org/download/1.7/x3dom.js to a secure url
https://x3dom.org/download/1.7/x3dom.js
https://d3js.org/d3.v4.0.0-alpha.50.min.js