Web Sitelerinize 3B Öğeler Eklemek için Three.js'yi Kullanma

Düz tasarım harikadır, ancak 3B öğeler web tasarım düzenlerini yeni bir düzeye taşır. Animasyonlu 3D grafiklere ve etkileşimli 3D sahnelere sahip web siteleri, her zamankinden daha yaygın hale geliyor. Müşteriler artık bu tür tasarımları web sitelerinde istiyor ve sizden isteyecekler. 3D tasarımı web tasarım projelerinize nasıl dahil edeceğinizi öğrenmek, yalnızca kariyer yolunuzu iyileştirecek ve size daha fazla müşteri kazandıracaktır. Neyse ki, Three.js gibi kaynaklar Divi tasarımcıları ve geliştiricilerinin web sitelerine özel 3D öğeler eklemeleri için kolayca kullanılabilir.

Bu yazıda, Three.js'nin temellerine ve web sitelerinize 3D öğeler eklemek için neden iyi bir seçim olduğuna bakacağız. Evet, Divi web siteleriniz bile. Three.js'ye başlamak için, özellikle HTML, CSS ve Javascript olmak üzere biraz kodlama bilgisine ihtiyacınız olacak. Hala kodlamayı öğreniyorsanız, en başından itibaren Three.js web sitesindeki adım adım öğreticiyi izleyin. Kodu nereye ekleyeceğinize ilişkin terminoloji sizin için yeniyse, teknik adımlarda size yol gösterecek çok sayıda öğretici bulunmaktadır. Three.js kitaplığını tasarımlarınıza nasıl dahil edeceğinizi gerçekten anlamak için birkaç video izlemenizi, belki de Skillshare veya Udemy'de bir kurs almanızı öneririm.

Hadi hadi bakalım.

Three.js nedir

Her şeyden önce, Three.js nedir?

Three.js, <canvas>, <svg>, CSS3D ve WebGL oluşturucuları sağlayan bir javascript 3D kitaplığıdır. Eklentiye ihtiyaç duymadan 3D tasarımları tarayıcınıza getirir. Kitaplık, basit 3B öğeler, karmaşık 3B etkileşimler ve yaratıcı animasyonlu oyunlar oluşturmanıza yardımcı olabilir. Three.js, kullanıcıların kendi Three.js kreasyonlarını paylaşabilecekleri bir Github deposuna sahip açık kaynaklı bir kitaplıktır.

Three.js'nin kapsadığı tüm oluşturucular arasında en yaygın olarak kullanılanı WebGL'dir. Yalnızca WebGL ile 3B öğeler oluşturmak, çok sayıda kod satırı ve çok sayıda matematik bilgisi gerektirir. Three.js, bir sahne oluşturmayı ve onu WebGL ile oluşturmayı çok daha kolay hale getirir.

Bir 3B Sahneyi ve Three.js Terminolojisini Anlama

Three.js ile bir 3B animasyon oluşturmak için önce bir 3B sahnenin nasıl kurulduğunu anlamalısınız. Bir 3D ayarı oluşturmak için gerekli olan üç unsur şunlardır:

1. Sahne
2. Kamera
3. oluşturucu

Sahne , Three.js'nin göstereceği tüm 3B öğeleri ayarladığınız yerdir. Görsel olarak bir tiyatro sahnesini veya televizyon setini andırıyor. kamera , sahnenin bakış açısı ve bir insanın teknik olarak sahnedeki unsurları nasıl göreceğidir. Oluşturucu hepsini bir araya getirir ve sahneyi çizer. 3D animasyonda akıcıysanız, bunu kesinlikle bir sahne kurmak için bir standart olarak kabul edersiniz.

Sahne kurulduktan sonra, içine nesneler yerleştirilir. Nesneler üç adımda oluşturulur:

1. geometri
2. Malzeme
3. ağ

Bir nesnenin geometrisi , bir şeklin iskeleti veya temel taslağıdır. Geometriye bir renk veya doku vermek için malzeme uygulanır. Geometri ve malzemenin birleşimine ağ denir.

Three.js kitaplığında zaten kullanmanız için birçok temel geometri var. Onları sıfırdan inşa etmeye gerek yok. Bunları kütüphaneden kodunuza çağırmanız ve ardından özelleştirmeniz yeterlidir. Malzeme olarak renkler için onaltılı kodlar kullanmanın yanı sıra, görüntülerle dokular oluşturabilir veya bunları doku kitaplıklarında bulabilirsiniz.

Sahne kurulduktan ve geometriler eklendikten sonra, sahneyi aydınlatmak, nesneleri canlandırmak ve çok daha fazlası için işlevler eklersiniz. Three.js kitaplığında bulunan temel nesnelerin yanı sıra, çevrimiçi kitaplıklardan veya Blender'da oluşturduğunuz diğer 3B görüntüleri de yükleyebilirsiniz.

Three.js'ye Başlarken

Three.js ile rahat olmak daha kolay olamazdı. Three.js web sitesinde, kitaplığın nasıl çalıştığını ve onu nasıl kullanabileceğinizi anlamak için ihtiyacınız olan tüm belgeler bulunur.

Three.js web sitesinde ve Github'larında, en basit Three.js uygulaması için kodun canlı bir sürümünü bulacaksınız. JSFiddle kullanıyorlar ancak CodePen veya Codesandbox.io üzerinde çalıştığını da görebilirsiniz.

Her şeyin nasıl çalıştığını gerçekten anlamak için Three.js web sitesindeki adımları izlemenizi öneririm. İster Codepen ile, ister Terminaliniz veya tercih ettiğiniz kodlama yazılımı ile. Sahnenizi hazırladıktan ve neler yapılabileceğini fark etmeye başladığınızda, Threejs.org web sitesinde Three.js kitaplığının tamamı kullanılabilir. Aşağıda, JSFiddle üzerinde çalışan temel Three.js uygulamasını görebilirsiniz. Kodla oynamak için “JSFiddle ile Düzenle”ye tıklayın.

Three.js Öğrenme Kaynakları

Three.js açık kaynaklı bir API olduğundan, GitHub depolarında her zaman bir şeyler oluyor. Yani her zaman öğrenilecek birçok yeni şey vardır. Neyse ki, değişiklikler için sürekli güncellenen dijital bir kılavuz oluşturdular. Bunu Discover threejs.com'da bulabilirsiniz. Bu açık ara en iyi kaynak. Uygulamayı nasıl kuracağınıza ve kitaplık varlıklarını nasıl kullanacağınıza dair adım adım bir eğitime ihtiyacınız varsa, Three.js belgelerindeki tüm adımlarda size yol gösteren harika bir Skillshare kursu burada.

Benzer şekilde, bu YouTube öğreticisi size Three.js ile bir sahne oluşturmanın temellerini gösterir, ancak temel web geliştirme becerilerini bilmenizi bekler.

Three.js ve WebGL'ye derinlemesine dalmak istiyorsanız, bu Udemy kursu her şeyi açıklıyor ve sonunda 3D içerik oluşturmada akıcı olmanızı vaat ediyor.

Özenli, hızlı ve kirli bir eğitim mi arıyorsunuz? CreativeBloq'taki bu adım adım kod eğitimi, tam da ihtiyacınız olan şeydir.

Three.js Örnekleri

Three.js ile kendi 3D tasarımlarınızı tasarlamaya başlamak için biraz ilham almaktan daha iyi bir şey olamaz. Oldukça inanılmaz Three.js kreasyonlarını görmek için web sitelerine gidin ve uzakları keşfedin.

Three.js'yi Divi ile Kullanma

Three.js'yi Divi ile kullanmak oldukça basittir. Javascript kitaplığını proje dosyalarınıza eklemeniz ve HTML'nize eklemeniz yeterlidir. Herhangi bir Divi düzenine uygulama eklemek için, önce favori kodlama yazılımınızda veya bilgisayarınızın terminalinde 3B tasarımı ayrı ayrı oluşturun. Derleme hazır olduğunda, javascript'i bir kod modülüne kopyalayın. <script> etiketlerini açıp kapattığınızdan emin olun.

Çözüm

Three.js, bir web sitesine 3B öğeler eklemek için güçlü bir kaynaktır. Bu yazıda Three.js'nin nasıl çalıştığına dair temel bilgilere baktık. API'de gerçekten derinlere dalmanız ve denemeler yapmanız gereken çok şey var. olasılıklar gerçekten sonsuzdur. Basit bir dönen küpten zengin bir dijital dünyanın içindeki karmaşık etkileşimli bir oyuna. Three.js ile ne yaratacaksınız?

Theromb / Shutterstock.com üzerinden Öne Çıkan Görsel