Created
December 5, 2021 21:46
-
-
Save guiseek/0a127847331b749f24ba939ecfdc5e1c to your computer and use it in GitHub Desktop.
Cubo 3D com SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Cubo 3D</title> | |
| <style> | |
| .edge { | |
| fill: white; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .button { | |
| fill: #fff; | |
| stroke: #2580ff; | |
| stroke-width: 1; | |
| } | |
| .button:hover { | |
| stroke-width: 3; | |
| } | |
| </style> | |
| <script> | |
| let edges = [ | |
| [0, 1], | |
| [2, 3], | |
| [0, 2], | |
| [1, 3], | |
| [4, 5], | |
| [6, 7], | |
| [4, 6], | |
| [5, 7], | |
| [0, 4], | |
| [1, 5], | |
| [2, 6], | |
| [3, 7], | |
| ] | |
| let xCoords = [50, 190, 50, 190, 50, 190, 50, 190] | |
| let yCoords = [50, 50, 190, 190, 50, 50, 190, 190] | |
| let zCoords = [50, 50, 50, 50, 190, 190, 190, 190] | |
| let centreX = 120 | |
| let centreY = 120 | |
| let centreZ = 120 | |
| let svgDocument | |
| function init(evt) { | |
| if (!('svgDocument' in window)) { | |
| svgDocument = evt.target.ownerDocument | |
| } | |
| drawBox() | |
| } | |
| function drawBox() { | |
| for (let i = 0; i < edges.length; i++) { | |
| const edge = svgDocument.querySelector(`#edge-${i}`) | |
| edge.setAttributeNS(null, 'x1', xCoords[edges[i][0]] + '') | |
| edge.setAttributeNS(null, 'x2', xCoords[edges[i][1]] + '') | |
| edge.setAttributeNS(null, 'y1', yCoords[edges[i][0]] + '') | |
| edge.setAttributeNS(null, 'y2', yCoords[edges[i][1]] + '') | |
| } | |
| } | |
| function rotateAboutX(radians) { | |
| for (let i = 0; i < xCoords.length; i++) { | |
| const y = yCoords[i] - centreY | |
| const z = zCoords[i] - centreZ | |
| const d = Math.sqrt(y * y + z * z) | |
| const theta = Math.atan2(y, z) + radians | |
| yCoords[i] = centreY + d * Math.sin(theta) | |
| zCoords[i] = centreZ + d * Math.cos(theta) | |
| } | |
| drawBox() | |
| } | |
| function rotateAboutY(radians) { | |
| for (let i = 0; i < xCoords.length; i++) { | |
| const x = xCoords[i] - centreX | |
| const z = zCoords[i] - centreZ | |
| const d = Math.sqrt(x * x + z * z) | |
| const theta = Math.atan2(x, z) + radians | |
| xCoords[i] = centreX + d * Math.sin(theta) | |
| zCoords[i] = centreZ + d * Math.cos(theta) | |
| } | |
| drawBox() | |
| } | |
| let rotateXTimeout | |
| let rotateYTimeout | |
| function beginRotateX(radians) { | |
| rotateAboutX(radians) | |
| rotateXTimeout = setInterval(`rotateAboutX(${radians})`, 20) | |
| } | |
| function endRotateX() { | |
| if (typeof rotateXTimeout != 'undefined') { | |
| clearTimeout(rotateXTimeout) | |
| } | |
| } | |
| function beginRotateY(radians) { | |
| rotateAboutY(radians) | |
| rotateYTimeout = setInterval(`rotateAboutY(${radians})`, 20) | |
| } | |
| function endRotateY() { | |
| if (typeof rotateYTimeout != 'undefined') { | |
| clearTimeout(rotateYTimeout) | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg" onload="init(evt)"> | |
| <line id="edge-0" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-1" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-2" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-3" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-4" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-5" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-6" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-7" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-8" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-9" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-10" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <line id="edge-11" class="edge" x1="100" y1="100" x2="100" y2="100" /> | |
| <path class="button" d="m50.5 250.5 15 -15 0 8 45 0 0 14 -45 0 0 8 z" onmousedown="beginRotateY(0.08)" | |
| onmouseout="endRotateY()" onmouseup="endRotateY()" /> | |
| <path class="button" d="m190.5 250.5 -15 -15 0 8 -45 0 0 14 45 0 0 8 z" onmousedown="beginRotateY(-0.08)" | |
| onmouseout="endRotateY()" onmouseup="endRotateY()" /> | |
| <path class="button" d="m255.5 50.5 15 15 -8 0 0 45 -14 0 0 -45 -8 0 z" onmousedown="beginRotateX(0.08)" | |
| onmouseout="endRotateX()" onmouseup="endRotateX()" /> | |
| <path class="button" d="m255.5 190.5 15 -15 -8 0 0 -45 -14 0 0 45 -8 0 z" onmousedown="beginRotateX(-0.08)" | |
| onmouseout="endRotateX()" onmouseup="endRotateX()" /> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment