Advertisement
here2share

$ rotating 3D cube

Sep 15th, 2022
1,230
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // rotating 3D cube
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <style>
  8.         canvas {
  9.             background-color: black;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <canvas></canvas>
  15.     <script>
  16.         var canvas = document.querySelector("canvas");
  17.         canvas.width = window.innerWidth;
  18.         canvas.height = window.innerHeight;
  19.  
  20.         var g = canvas.getContext("2d");
  21.  
  22.         var nodes = [[-1, -1, -1], [-1, -1, 1], [-1, 1, -1], [-1, 1, 1],
  23.         [1, -1, -1], [1, -1, 1], [1, 1, -1], [1, 1, 1]];
  24.  
  25.         var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6],
  26.         [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
  27.  
  28.         function scale(factor0, factor1, factor2) {
  29.             nodes.forEach(function (node) {
  30.                 node[0] *= factor0;
  31.                 node[1] *= factor1;
  32.                 node[2] *= factor2;
  33.             });
  34.         }
  35.  
  36.         function rotateCuboid(angleX, angleY) {
  37.  
  38.             var sinX = Math.sin(angleX);
  39.             var cosX = Math.cos(angleX);
  40.  
  41.             var sinY = Math.sin(angleY);
  42.             var cosY = Math.cos(angleY);
  43.  
  44.             nodes.forEach(function (node) {
  45.                 var x = node[0];
  46.                 var y = node[1];
  47.                 var z = node[2];
  48.  
  49.                 node[0] = x * cosX - z * sinX;
  50.                 node[2] = z * cosX + x * sinX;
  51.  
  52.                 z = node[2];
  53.  
  54.                 node[1] = y * cosY - z * sinY;
  55.                 node[2] = z * cosY + y * sinY;
  56.             });
  57.         }
  58.  
  59.         function drawCuboid() {
  60.             g.save();
  61.            
  62.             g.clearRect(0, 0, canvas.width, canvas.height);
  63.             g.translate(canvas.width / 2, canvas.height / 2);
  64.             g.strokeStyle = "#FFFFFF";
  65.             g.beginPath();
  66.  
  67.             edges.forEach(function (edge) {
  68.                 var p1 = nodes[edge[0]];
  69.                 var p2 = nodes[edge[1]];
  70.                 g.moveTo(p1[0], p1[1]);
  71.                 g.lineTo(p2[0], p2[1]);
  72.             });
  73.            
  74.             g.closePath();
  75.             g.stroke();
  76.  
  77.             g.restore();
  78.         }
  79.  
  80.         scale(200, 200, 200);
  81.         rotateCuboid(Math.PI / 4, Math.atan(Math.sqrt(2)));
  82.  
  83.         setInterval(function() {
  84.             rotateCuboid(Math.PI / 180, 0);
  85.             drawCuboid();
  86.         }, 17);
  87.  
  88.     </script>
  89.  
  90. </body>
  91. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement