Как нарисовать додекаэдр в d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

// Задаем координаты вершин додекаэдра
const vertices = [
  [-1, -1, -1],
  [-1, -1, 1],
  [-1, 1, -1],
  [-1, 1, 1],
  [1, -1, -1],
  [1, -1, 1],
  [1, 1, -1],
  [1, 1, 1],
  [0, -phi, -1 / phi],
  [0, -phi, 1 / phi],
  [0, phi, -1 / phi],
  [0, phi, 1 / phi],
  [-1 / phi, 0, -phi],
  [-1 / phi, 0, phi],
  [1 / phi, 0, -phi],
  [1 / phi, 0, phi],
  [-phi, -1 / phi, 0],
  [-phi, 1 / phi, 0],
  [phi, -1 / phi, 0],
  [phi, 1 / phi, 0],
];

// Задаем индексы вершин, образующих грани додекаэдра
const faces = [
  [0, 1, 9, 8, 4],
  [4, 8, 10, 16, 17],
  [5, 7, 11, 19, 18],
  [3, 2, 14, 15, 7],
  [1, 0, 6, 2, 3],
  [12, 13, 11, 7, 15],
  [1, 3, 7, 5, 9],
  [0, 4, 17, 12, 6],
  [8, 9, 5, 18, 10],
  [16, 10, 18, 19, 13],
  [2, 6, 12, 15, 14],
  [11, 13, 19, 11, 19],
];

// Создаем SVG элемент и задаем его размеры
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500);

// Создаем группу для хранения додекаэдра
const group = svg.append("g")
  .attr("transform", "translate(250,250)");

// Создаем массив вершин в формате x,y,z
const vertices3D = vertices.map(vertex => {
  const [x, y, z] = vertex;
  const radius = 150;
  const scale = radius / Math.sqrt(x * x + y * y + z * z);
  return [x * scale, y * scale, z * scale];
});

// Создаем массив полигонов
const polygons = faces.map(face => {
  const vertices = face.map(index => vertices3D[index]);
  const polygon = d3.polygon(vertices);
  return polygon;
});

// Добавляем полигоны в группу
group.selectAll("path")
  .data(polygons)
  .enter()
  .append("path")
  .attr("d", d3.line())
  .attr("stroke", "black")
  .attr("fill