3 boyutlu şekilleri döndürme

Üç boyutta döndürme kulağa karmaşık gelir ve öyle de olabilir, ama basit bazı döndürmeler vardır. Örneğin, küpümüzü (ekranın dışını gösteren) z-ekseni etrafında döndürdüğümüzü hayal edersek, aslında bir kareyi iki boyutta döndürüyor oluruz:

Trigonometri öğrenmek için bir neden

(x, 0) konumunda tek bir düğüme bakarak, her şeyi daha sadeleştirebiliriz. Basit trigonometri kullanarak, bu noktayı başlangıç noktası etrafında θ döndürdükten sonra konumunu şöyle bulabiliriz:

$x^{'} = x \times c o s (θ)$ ‍
$y^{'} = x \times s i n (θ)$ ‍

Bu denklemlerin nereden ortaya çıktığını anlamadıysanız, bu video yardımcı olabilir.

Bir noktayı başlangıç noktası etrafında döndürme

Yukarıdaki örnek x ekseninde başlayan bir noktayı başlangıç noktası etrafında döndürmemizi sağlar, ama ya nokta x ekseninin üstünde değilse? Bu biraz daha ileri düzey trigonometri gerektirir. Eğer (x, y) noktası ile başlangıç noktası arasındaki uzaklığa

r

ve (x, y)'ye uzanan doğru ile x ekseni arasındaki açıya

α

dersek:

$\begin{aligned} x = r \times c o s (α) \\ y = r \times s i n (α) \end{aligned}$ ‍

Eğer β'yla döndürerek (x', y') noktasına ulaşırsak, o zaman:

$\begin{aligned} x^{'} = r \times c o s (α + β) \\ y^{'} = r \times s i n (α + β) \end{aligned}$ ‍

Bazı trigonometrik özdeşlikler kullanarak şunu elde ederiz:

$\begin{aligned} x^{'} = r \times c o s (α) c o s (β) - r \times s i n (α) s i n (β) \\ y^{'} = r \times s i n (α) c o s (β) + r \times c o s (α) s i n (β) \end{aligned}$ ‍

Yukarıda x ve y değerlerini yerine koyarsak, yeni koordinatların eski koordinatlar ve döndürme açısı cinsinden bir fonksiyonu olarak şöyle bir denklem elde ederiz:

$\begin{aligned} x^{'} = x \times c o s (β) - y \times s i n (β) \\ y^{'} = y \times c o s (β) + x \times s i n (β) \end{aligned}$ ‍

Bir döndürme fonksiyonu yazma

Artık matematiğini bildiğimize göre, bir düğümü veya daha da iyisi düğümler dizimizi z ekseninin etrafında döndürmek için bir fonksiyon yazabiliriz. Bu fonksiyon düğüm dizisindeki tüm düğümlerden geçecek, mevcut x ve y koordinatlarını bulacak ve sonra da bunları güncelleyecektir. sin(theta) ve cos(theta)'yı döngünün dışında saklarız, böylece bunları sadece bir kere hesaplamamız yeterli olur:

var rotateZ3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var y = node[1];
      node[0] = x * cosTheta - y * sinTheta;
      node[1] = y * cosTheta + x * sinTheta;
   }
};

Küpü 30 derece döndürmek için, fonksiyonu şöyle çağıracağız:

rotateZ3D(30);

Aşağıda döndürülen küpü görebilirsiniz - bu, öncekinden biraz daha ilginçtir, ama çok fazla ilginç değildir:

Üç boyutta döndürme

Artık küpümüzü iki boyutta döndürebiliriz, ama hala kareye benzer. Ya küpümüzü y ekseninin (düşey eksenin) etrafında döndürmek istersek? Küpümüze y ekseninin etrafında döndürürken yukarıdan baktığımızı hayal edersek, göreceğimiz şey, z ekseninin etrafında döndürdüğümüz zaman olduğu gibi, dönen bir karedir.

Önceki trigonometri ve fonksiyonumuzu alıp, z ekseni y ekseni olacak şekilde ekseni yeniden etiketleyebiliriz. Bu durumda, düğümün y koordinatları değişmez, sadece x ve z koordinatları değişir.

var rotateY3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var z = node[2];
      node[0] = x * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + x * sinTheta;
   }
};

Küpümüzü x ekseni etrafında döndüren bir fonksiyonu oluşturmak için aynı argümanı kullanabiliriz:

var rotateX3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var y = node[1];
      var z = node[2];
      node[1] = y * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + y * sinTheta;
   }
};

Artık bu fonksiyonları tanımladığımıza göre, diğer iki eksen etrafında 30 derece döndürebiliriz:

rotateX3D(30);
rotateY3D(30);

Aşağıda kodun tamamını görebilirsiniz. Fonksiyon çağrılarındaki değerleri değiştirmek için sayı temizleyiciyi kullanmayı deneyin.

Kullanıcı etkileşimi

Küpü döndürmek için fonksiyon çağrıları ekleyebiliriz, ama izleyicinin küpü faresini kullanarak döndürebilmesini sağlayabilirsek, bu çok daha faydalı (ve memnuniyet verici) olur. Bunun için, bir mouseDragged() fonksiyonu oluşturmamız gerekir. Fare her sürüklendiğinde, bu fonksiyon otomatik olarak çağrılır.

mouseDragged = function() {
   rotateY3D(mouseX - pmouseX);
   rotateX3D(mouseY - pmouseY);
};

mouseX and mouseY, farenin geçerli konumunu içeren yerleşik değişkenlerdir. pmouseX and pmouseY, farenin bir önceki çerçevedeki konumunu içeren yerleşik değişkenlerdir. Böylece, x koordinatı artmışsa (fareyi sağa hareket ettirirsek), rotateY3D()'ye pozitif bir değer göndeririz ve küpü y ekseni etrafında saat yönünün tersine döndürürüz.

Aşağıda kendiniz görebilirsiniz.

Tartışmaya katılmak ister misiniz?

Giriş Yap

Sıralama ölçütü:

Henüz gönderi yok.

İngilizce biliyor musunuz? Khan Academy'nin İngilizce sitesinde neler olduğunu görmek için buraya tıklayın.