D3.js 多面幽绿色结晶体

Source: http://bl.ocks.org/mbostock/3055104

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1328
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var width = 960,
    height = 500;

var origin = [0, 0],
    velocity = [.18, .06];

var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .origin(origin)
    .scale(240);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var face = svg.selectAll(".face")
    .data(icosahedron_faces)
    .enter().append("path")
    .attr("class", "face");

var edge = svg.selectAll(".edge")
    .data(icosahedron_edges)
    .enter().append("path")
    .attr("class", "edge");

var point = svg.selectAll(".point")
    .data(icosahedron_points)
    .enter().append("circle")
    .attr("class", "point")
    .attr("r", 8.5);

d3.timer(function() {
    origin[0] += velocity[0];
    origin[1] += velocity[1];
    projection.origin(origin);
    draw();
});

function icosahedron_points() {
    var points = [],
        y = Math.atan2(1, 2) * 180 / Math.PI;
    points.push([0, -90]);
    for (var x = 0; x < 360; x += 36) {
        points.push([x, -y], [x += 36, y]);
    }
    points.push([0, 90]);
    return points;
}

function icosahedron_edges() {
    var edges = [],
        y = Math.atan2(1, 2) * 180 / Math.PI;
    for (var x = 0; x < 360; x += 72) {
        edges.push([
            [x + 0, -90],
            [x + 0, -y]
        ]);
        edges.push([
            [x + 0, -y],
            [x + 72, -y]
        ]);
        edges.push([
            [x + 36, y],
            [x - 36, y]
        ]);
        edges.push([
            [x + 36, y],
            [x + 0, -y]
        ]);
        edges.push([
            [x - 36, y],
            [x + 0, -y]
        ]);
        edges.push([
            [x + 36, 90],
            [x + 36, y]
        ]);
    }
    return edges;
}

var gradient = svg.append("defs").append("radialGradient")
    .attr("id", "gradient")
    .attr("cx", "75%")
    .attr("cy", "25%");

gradient.append("stop")
    .attr("offset", "10%")
    .attr("stop-color", "olive");

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#120");

var gradient2 = svg.append("defs").append("radialGradient")
    .attr("id", "gradient2")
    .attr("cx", "75%")
    .attr("cy", "25%");

gradient2.append("stop")
    .attr("offset", "10%")
    .attr("stop-color", "magenta");

gradient2.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#120");

function icosahedron_faces() {
    var faces = [],
        y = Math.atan2(1, 2) * 180 / Math.PI;
    for (var x = 0; x < 360; x += 72) {
        faces.push([
            [x + 0, -90],
            [x + 0, -y],
            [x + 72, -y],
            [x + 0, -90]
        ]);
        faces.push([
            [x + 0, -y],
            [x + 72, -y],
            [x + 36, y],
            [x + 0, -y]
        ]);
        faces.push([
            [x + 36, y],
            [x + 0, -y],
            [x - 36, y],
            [x + 36, y]
        ]);
        faces.push([
            [x - 36, 90],
            [x - 36, y],
            [x + 36, y],
            [x + 36, 90]
        ]);
    }
    return faces;
}

编译

CSS

body {
    background-color: black;
}
.point {
    fill: url(#gradient2);
    opacity: 0.7;
}
.edge {
    fill: none;
    stroke: olive;
    stroke-width: 3;
    stroke-opacity: 0;
}
.face {
    fill: url(#gradient);
    opacity: 0.75;
}
.font01 {
    font-family: arial;
    font-size: 20px;
    position: absolute;
    top: 546px;
    left: 20px;
    padding: 8px;
    border-bottom: 4px solid olive;
    text-shadow: 1px 1px 6px black;
}
.font02 {
    color: #41412a;
    font-family: arial;
    font-size: 22px;
    position: absolute;
    top: 600px;
    left: 20px;
    max-width: 380px;
    padding: 8px;
    border-bottom: 3px solid olive;
}
.font03 {
    color: darkolivegreen;
    font-family: arial;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 490px;
    left: 20px;
    max-width: 380px;
    padding: 8px;
    border-bottom: 3px solid olive;
}
a {
    color: #797b5f;
    text-decoration: none;
    text-shadow: 1px 1px 6px black;
}
a:hover {
    color: plum;
    text-shadow: 1px 1px 4px #010;
}

HTML

Source: http://bl.ocks.org/mbostock/3055104

编辑器支持Emmet

快捷键

Source: http://bl.ocks.org/mbostock/3055104

HTML5 Three.js GLSL 透明球体渐变内核和泡沫光影表面着色GLSL代码

Three.js 超炫的3D水晶漩涡（涟漪）动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：