Contenu principal
Créer des formes 3D
Une forme simple avec laquelle commencer à travailler est le cube. Bien qu'un tétraèdre possède moins de côtés, ceux-ci n'étant pas orthogonaux, cela corse les choses. Commençons par créer un cube de 200 x 200 x 200 pixels, centré à l'origine (0, 0, 0).
Nous n'allons pas commencer à tout dessiner, mais déterminer des tableaux de nombres pour décrire les formes de notre forme 3D (plus spécifiquement, des tableaux qui décrivent les nœuds et les arêtes.
Les nœuds
Nous commençons par définir un tableau de nœuds, où chaque nœud est un tableau de trois chiffres, les coordonnées x, y et z de ce nœud :
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];Comme vous l'avez peut-être remarqué, les nœuds représentent les 8 possibilités d'arrangement des trois valeurs 100, positives ou négatives.
Vous pouvez regarder les nœuds comme un cube 2 x 2 x 2, centré à l'origine, dans la visualisation ci-dessous. Faites pivoter à l'aide de la souris :
Les arêtes
Nous définissons ensuite un tableau d'arêtes, dont chaque arête est un tableau de deux nombres. Par exemple,
edge0 définit une arête entre node0 et node1. On commence à compter à partir de 0 car les tableaux sont indexés à partir de 0 (pour obtenir la valeur du premier nœud, on tape 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];La partie la plus délicate est de s'assurer qu'on a bien joint les bonnes arêtes. Voici une visualisation des arêtes, connectées en forme de cube :
Vous souhaitez rejoindre la discussion ?
Bonjour,
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-t-il une logique pour les variables edges autre que le dessin du cube ?(5 votes)