Ana içerik
3 Boyutlu Şekiller Oluşturma
Artık bir küpümüz var, ama ya konumunu veya boyutunu değiştirmek istersek? Veya bir veya birçok dikdörtgenler prizması istersek? Şu anki kodumuzla, düğümleri teker teker değiştirmemiz gerekirdi, bu da bayağı sıkıcı olurdu. Bizim istediğimiz ise, belirli bir konum ve boyutları olan bir dikdörtgenler prizmasını oluşturmak için basit bir yöntemdir. Başka bir deyişle, bir konum ve boyutları bir düğüm dizisi ve bir ayrıt dizisine gönderen bir fonksiyon istiyoruz.
Dikdörtgenler prizması tanımlama
Bir dikdörtgenler prizmasında üç boyut vardır: en, yükseklik ve derinlik:
Ayrıca 3D uzayda bir konumu da vardır, bu da bize altı parametre verir. Bir küpün konumunu tanımlamak için birkaç yol mevcuttur: merkezini veya bir köşesini tanımlayabiliriz. Herhalde birincisi daha yaygındır, ama ikincisinin daha kullanışlı olduğunu düşünüyorum.
Fonksiyonumuzun hem düğüm, hem de ayrıt dizisini vermesi gerekir. İki değişkeni vermenin bir yolu, bu değişkenleri,
düğümler ve ayrıtlar için birer anahtarla bir nesneye paketlemektir. Dikkat ederseniz, değişkeni belirtmek için herhangi bir dizeyi kullanabilirsiniz, aynı sözcüğü kullanmak kolayıma gelir.// Bir köşesi (x, y, z) ve
// eni, w, yüksekliği, h, ve derinliği, d olan bir dikdörtgenler prizması oluşturma.
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [];
var edges = [];
var shape = { 'nodes': nodes, 'edges': edges };
return shape;
};Bir dikdörtgenler prizması oluşturmak için bu fonksiyonu kullansaydık, birinci düğüme şöyle ulaşırdık:
var object = createCuboid(0, 0, 0, 100, 160, 50);
var node0 = shape.nodes[0];Bu
node0'ı nodes dizisinin ilk değeri yapar. Ancak, şu anda, nodes ve edges dizilerinde değer yoktur.Düğümleri, karşılıklı boyutla veya boyutsuz her konumun kombinasyonu olarak tanımlarız. Ayrıtlar da eskisi gibi tanımlanır (sadece ilk başta her ayrıtı birer birer tanımlamaktansa, hepsini bir anda tanımlarım). Dikkat ederseniz, bu fonksiyon dikdörtgenler prizması için negatif boyut tanımlamanıza izin verir.
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [[x, y, z ], [x, y, z+d], [x, y+h, z ], [x, y+h, z+d], [x+w, y, z ], [x+w, y, z+d], [x+w, y+h, z ], [x+w, y+h, z+d]];
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]];
return { 'nodes': nodes, 'edges': edges};
};Sonra, eni 100, yüksekliği 160, derinliği 50 ve bir nodu başlangıç noktasında olan bir dikdörtgenler prizmasını şu şekilde oluşturabiliriz:
var shape = createCuboid(0, 0, 0, 100, 160, 50);Önceki kodumuz sadece genel
nodes ve edges değişkenlerini içerdiğinden, nesnemizin özelliklerini bu genel değişkenlerin içinde tanımlamalıyız:var nodes = shape.nodes; var edges = shape.edges;Tam kodu aşağıda görebilirsiniz.
Birden çok şekille çalışmak
Farklı boyutlarla şekiller oluşturabiliriz, ama ya birden fazlasını istersek? Bir şeyden değişen sayıda istediğimizde, bir dizi faydalı olur, onun için, bir şekil dizisi oluşturalım.
var shape1 = createCuboid(-120, -20, -20, 240, 40, 40);
var shape2 = createCuboid(-120, -50, -30, -20, 100, 60);
var shape3 = createCuboid( 120, -50, -30, 20, 100, 60);
var shapes = [shape1, shape2, shape3];Şimdi bir nesne dizisiyle çalışmak için display ve rotate fonksiyonlarını değiştirmemiz gerekecek. Tüm şekillerden geçen bir for döngüsünde, ayrıtları göstermek için kodu sararak başlayın.
// Kenarları çizme
stroke(edgeColor);
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
var edges = shapes[shapeNum].edges;
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var node0 = nodes[n0];
var node1 = nodes[n1];
line(node0[0], node0[1], node1[0], node1[1]);
}
}Ve düğümleri göstermek için benzer bir for döngüsü:
// Nodları çizin
fill(nodeColor);
noStroke();
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n]; ellipse(node[0], node[1], nodeSize, nodeSize);
}
}Döndürme fonksiyonlarının her birine benzer bir for döngüsü ekleyebiliriz, ama düğüm dizisini her fonksiyona geçirmenin daha esnek bir hareket olduğunu düşünüyorum - bu şekilde şekilleri birbirinden bağımsız olarak döndürebiliriz. Örneğin, rotateZ3D() fonksiyonu şöyle görünür:
var rotateZ3D = function(theta, nodes) { ... };Artık döndürmek için fareyi kullandığımızda, şekillerden geçmemiz ve her biri için fonksiyonu çağırmamız gerekir:
mouseDragged = function() {
var dx = mouseX - pmouseX;
var dy = mouseY - pmouseY;
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
rotateY3D(dx, nodes);
rotateX3D(dy, nodes);
}
};Herhangi bir düğümden geçmeyen döndürme fonksiyonlarına çağrıları kaldırdığınızdan emin olun. Aşağıda tam kodu görebilirsiniz.
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.