Javascript: вращающийся кубик

А ведь совсем недавно, до эпохи canvas, сделать такое на обычной веб-страничке было целой историей - или подключать Java-виджет, или какое-нибудь ActiveX-расширение "только для Internet Explorer", или долго и муторно анимировать GIF'ку, или ещё что-то в этом роде.

Сегодня же вращающийся кубик делается просто "родными" средствами вашего браузера.

Код, в принципе и является трансляций с Java, но без необходимости использовать ныне устаревшие ява-апплеты.

Код кубика без обрамления HTML приведён под катом, его можно вставить в любой документ HTML.

<div align="center">
 <canvas id="cubeCanvas" width="100" height="100"></canvas>
</div>
<script type="text/javascript">
(function () {
 var canvas = document.getElementById("cubeCanvas");
 var size = Math.min (canvas.width,canvas.height);
 var g = canvas.getContext("2d");
 var nodes = //Вершины
  [[-1, -1, -1], [-1, -1, 1], [-1, 1, -1], [-1, 1, 1],
   [1, -1, -1], [1, -1, 1], [1, 1, -1], [1, 1, 1]];
 var edges = //грани
  [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6],
   [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
 
 function scale (factor0, factor1, factor2) { //масштабирование по осям
  nodes.forEach(function (node) {
   node[0] *= factor0; node[1] *= factor1; node[2] *= factor2;
  });
 }
 
 function rotateCuboid (angleX, angleY) { //пересчёт координат вершин для вращения
  var sinX = Math.sin(angleX);
  var cosX = Math.cos(angleX);
  var sinY = Math.sin(angleY);
  var cosY = Math.cos(angleY);
  nodes.forEach(function (node) {
   var x = node[0]; var y = node[1]; var z = node[2];
   node[0] = x * cosX - z * sinX;
   node[2] = z * cosX + x * sinX;
   z = node[2];
   node[1] = y * cosY - z * sinY;
   node[2] = z * cosY + y * sinY;
  });
 }
 
 function drawCuboid () {
  g.save();
  g.clearRect(0, 0, canvas.width, canvas.height); //очистить канву
  g.translate(canvas.width / 2, canvas.height / 2); //сместить в центр куба начало координат
  g.strokeStyle = "#000000"; //цвет граней
  g.beginPath();
  edges.forEach(function (edge) {
   var p1 = nodes[edge[0]];
   var p2 = nodes[edge[1]];
   g.moveTo(p1[0], p1[1]);
   g.lineTo(p2[0], p2[1]);
  });
  g.closePath();
  g.stroke();
  g.restore();
 }
 
 scale (size/4, size/4, size/4); //масштаб указан здесь!
 rotateCuboid (Math.PI / 3, Math.atan(Math.sqrt(3))); //угол определён здесь!
 setInterval( function() {
  rotateCuboid (Math.PI / 180, Math.PI / 180); //поворот при вращении задан здесь!
  drawCuboid ();
 }, 10);
})(); 
</script>
<noscript><div>Извините, требуется включённый Javascript</div></noscript>

Если нужно вращать кубик или параллелепипед мышкой, поможет код из прикреплённого файла (щёлкните ссылку на прикреплённый файл правой кнопкой мыши и выберите команду "Сохранить объект как...", "Сохранить ссылку как..." и т.п., в зависимости от браузера).

 Вращение параллелепипеда мышкой, открыть для просмотра в текущем окне/вкладке (2 Кб)

26.11.2017, 20:21 [4367 просмотров]