Conteúdo principal
Programação
Criando formas 3D
Uma forma simples para começarmos é o cubo. Embora um tetraedro tenha menos lados, seus lados não são ortogonais, o que torna as coisas mais complicadas. Vamos começar criando um cubo de 200×200×200 pixels, centralizado na origem (0, 0, 0).
Não vamos começar desenhando alguma coisa de fato, mas criando arrays de números que descrevem nossas formas em 3D - especificamente, arrays que descrevem nossos nós (do inglês, node) e nossas arestas (do inglês, edge).
Nós
Começamos definindo um array de nós, em que cada nó é um array com três dígitos, as coordenadas x, y e z desse nó:
var node0 = [-100, -100, -100];
var node1 = [-100, -100, 100];
var node2 = [-100, 100, -100];
var node3 = [-100, 100, 100];
var node4 = [ 100, -100, -100];
var node5 = [ 100, -100, 100];
var node6 = [ 100, 100, -100];
var node7 = [ 100, 100, 100];
var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];Como você deve ter notado, os nós são todos os 8 modos de organizar três conjuntos de 100 negativo ou positivo.
Você pode ver os nós de um cubo de 2x2x2 centralizado na origem na visualização sabaixo. Gire-a usando o mouse:
Arestas
A seguir, definimos um array de arestas, em que cada aresta é um array com dois números. Por exemplo,
edge0 define uma aresta entre node0 e node1. We start counting at 0 because arrays are indexed starting at zero (To get the value of the first node we type nodes[0]).var edge0 = [0, 1];
var edge1 = [1, 3];
var edge2 = [3, 2];
var edge3 = [2, 0];
var edge4 = [4, 5];
var edge5 = [5, 7];
var edge6 = [7, 6];
var edge7 = [6, 4];
var edge8 = [0, 4];
var edge9 = [1, 5];
var edge10 = [2, 6];
var edge11 = [3, 7];
var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];A parte complicada é garantir que você una as arestas corretas. Esta é uma visualização das arestas que estamos conectando para formar um cubo:
Quer participar da conversa?
não seria melhor desenha um esboço da figura antes de começar a escrever no código? Só para visualizar melhor onde fica cada aresta?(4 votos)