Üç.js ile 3B nesneyi eritiriniz

Sep 11, 2025
Nasıl Yapılır

Bunu bildiğimiz gibi, sürekli değişiyor ve gelişiyor. Hala basit ve basit bir ortam olarak hatırlayabileceğimizi, birkaç yıl önce başka bir boyut kazandı ve orada da duracak gibi görünmüyor. İçin bir Web Sitesi Oluşturucu Bir zamanlar bilim kurgu filmi filmi görsel efektlerinin bir parçası olan şey şimdi kanepenizde yatan bir tablette mümkündür ve aslında tam ekran Google Chrome pencereleri olan büyük ölçekli etkileşimli kurulumlarla kaplı binalar var.

Üç.js ile gerçekçi bir erime etkisinin nasıl oluşturulacağını öğrenmek için aşağıdaki adımları izleyin.

01. Üç.js sahnesini ayarlayın

Devam edin ve üç.js kütüphanesini alın ve sitenize ekleyin. Webgrenderer, sahneyi ve perspektivecamera'yı başlatmanız gerekir. Bunlar başlatıldıktan sonra, sahneyi oluşturmanız gerekir. Requestanimationframe .

02. Sahneye aydınlatma ekleyin

Sonra, ışıkların 3B sahneye eklenmesi gerekir. Bu örnekte, iki ışık kullanılacaktır: bir ortam ışığı ve bir nokta ışığı. Ortam ışığı, sahne için genel bir küresel renk görevi görürken, nokta ışığı mesafe ile azaltan ışık yayar. Bu, sahneye biraz kontrast verecektir. 

 var ambientlight = yeni üç.eblientlight (0xccccccc);
sahne.add (ambientight);
var pointlight = yeni üç.Pointlight (0xffffff, 1);
pointlight.position.set (10, 5, 0);

03. 3B modelini yükleyin

Şimdi sahne kuruldu, 3B modelin yüklenmesi gerekiyor. Model, herhangi bir desteklenen format kullanılarak yüklenebilir (JSON, OBJ, DAE, vb.). Aşağıda bir dae modeli yükleme örneğidir. Bu örnekte, modelin köşe modifikasyonlarını gerçekleştirmek için yeterli çokgen olması çok önemlidir.

Bu örnekte kullanılan geyik kafatası 3,500 polis vardır. Poli sayısı çok düşükse, Vertex animasyonları çok açık ve çarpık olur. 

 loader = yeni three.colladaloader ();
loader.load ('Dae / Deer_skull / deer_skull.dae', ONLoadcompletehandler);

04. Bir Bump Haritası Ekleyin

Bump haritaları, dokularınıza düşük maliyetle derinlik eklemek için mükemmeldir. Çarpma harita görüntüsünü oluşturduktan sonra, sadece aşağıdaki gibi malzemeye uygulayarak uygulayabilirsiniz. Ayrıca, modelinizin ölçeğine uyacak şekilde yumru haritanızın ölçeğini ayarlamanız gerekir. 

 materyal.bumpmap = 'img / deer_skull / geyik-bump.jpg';
materyal.bumpscale = .008;

05. Vertex animatörünü kullanın

Sitesinin genelinde Johnny, Jerome Etienne'nin bir oyun uzantısını kullanıyor, üç.js, versiyon animasyonlarını yapmayı kolaylaştıran. Bu uzantı, çerçeve hızında bir modelin her bir tepesine kolay erişim sağlar ve dalga formlarını kullanarak köşeleri manipüle etmesini sağlar.

Vertex animasyon uzantısı Etienne's Github ile kullanılabilir. Bir sonraki adımlarda nasıl kullanıldığına bakacağız.

Users can interact with the 3D model and view from multiple angles

Kullanıcılar 3B model ile etkileşime girebilir ve çoklu açılardan görüntüleyebilir

06. Erime başla

Bir geometrinin bir parçasını eritmek birkaç genel adım içerir. İlk olarak, her nokta sürekli aşağı doğru itilir. Bir nokta yere ulaştığında, bir 'push Vector' dediğimiz şeyleri kullanarak dışa doğru itti.

Sonra, alt kısım boyunca toplanan noktaları bir kalınlıkta bir kalınlıkta bırakacağız, böylece erimiş geometri tamamen düz değildir. Bunu başarmak için Johnny, Skeel Lee'nin VFX Shader'tan Houdini'deki kodu taşındı ve değiştirdi.

07. Köşeleri aşağı doğru hareket ettirmeye başlayın

Aşağıda, bir modelin geometrisini yere doğru sürmek için Vertex animatörünü kullanmanın bir örnek kullanımıdır. 

 Var VerTexanimation = Yeni ThreeX.vertExanimation (Geometri, İşlev (Menşe, Konum, Delta, Şimdi) {Pozisyon.y - = Meltamount * ModelHeight;}

Bu, işaretlerini tanımlayan oranla basacaktır. meltamount . Render döngüsündeki Vertex animasyonunuzda 'güncelleme'yi de aramayı unutmayın.

08. İtme vektörünü belirleyin

Bir nokta yere ulaştığında, eriyik bir etkisi elde etmek için dışa doğru itilmelidir. Aşağıdaki kod, X ve Z eksenlerinde hangi yönün, üniform bir yer değiştirmeyi elde edersiniz. Koşullu, yalnızca modelin en düşük sınırlarına (zemin) ulaşan noktaların dışa doğru itilmesini sağlar. 

eğer (pozisyon.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Ekle (bbox.min.clone ()). DiDescalar (2.0);
pushvector = position.clone (). Sub (centroid);
pushvector.y = 0; }

09. Erimişi doğal hissettirin

Aşağıdaki kod, hareket halinde rastgelelik oluşturmak için gürültü kullanır, böylece eriyik organik hisseder. Gürültü değişkenleri, istenen etkiyi elde etmek için ayarlanabilir. Gürültü daha sonra birlikte itme vektörüne uygulanır. meltamount ve yayılma Erimiş havuzun hızını ve boyutunu kontrol etmek için. Bu dış vektör nihayet hesaplanır ve daha sonra Vertex'e uygulanır. 

 VAR N = NOSEAMPLUDE * JENERATOR.GETVAL ((konum.x) * NOISEFREQUENCE + NoiseOffet);
var outwardVector = pushvector.multiplyscalar (((Meltamount * Spreadamount) + N) * OutwardSpeed);
Konum.add (DışaDwector);

10. Erimiş havuz kalınlığını verin

Şimdiye kadar açıklanan kod erime etkisi elde edecek, ancak iki şey yanlış. İlk olarak, havuz oldukça düz hissedecek, çünkü tüm noktalar aynı Y konumuna eritti. İkincisi, hepsi aynı Y'yi paylaştığı için, aynı yükseklikte çok fazla puan yığılacak, bu da titremeye neden olabilir. Bunu önlemek için eriyik oranında bir kalınlık uygulanır: 

 konum.y + = meltamount * havuzthickness;

11. Diğer modellerde deneyin

Yukarıdaki kodla, yeterli poligonlu herhangi bir model eritilebilir. Bir zip dosyasını indirin İşte ve modeli istediğiniz bir şeyle değiştirin. İyi eğlenceler!

Bu makale başlangıçta ortaya çıktı Web tasarımcısı Sayı 265. satın al İşte .

İlgili Makaleler:

  • Üç.js ile etkileşimli 3D görseller oluşturun
  • Web Tasarımcıları İçin En İyi Renk Araçları
  • Web tasarımının kesme kenarına dikkat edin

Nasıl Yapılır - En Popüler Makaleler

Afinite Tasarımcısı'ndaki varlıklarla başlayın

Nasıl Yapılır Sep 11, 2025

Uygulama tasarımı veya markalaşma teminatı gibi projeler üzerinde çalışırken, tasarım boyunca bir süreklilik duygusu v..

Google'ın Web Araçları için bir rehber

Nasıl Yapılır Sep 11, 2025

Sayfa 1/5: HTML, CSS ve AMP'yi görüntüleyin ve değiştirin; Js HTML, ..

ICLone 7 ile araç animasyonları yapın

Nasıl Yapılır Sep 11, 2025

Animasyonlar oluşturma veya 3B filmler Araçları tekerleklerle olan bazı komplikasyonları sunabilir, çünkü ..

Renkli bir zombiyi nasıl boyayacağınız

Nasıl Yapılır Sep 11, 2025

Her zaman ölümsüzlüğü beğendim ve genellikle çok sık hareket eden bir hedefe indirgenmiş olan düzensiz underdog için ..

Fotogerçekçi bir oda sahnesi nasıl oluşturulur

Nasıl Yapılır Sep 11, 2025

Gerçekçi bir 3D mimari sineklik nasıl yaratılacağını bilmek istiyorum, ancak çabalarınızı boru hattı içinde nereden ..

Yağlı boya için ihtiyacınız olan 5 şey

Nasıl Yapılır Sep 11, 2025

Bazı sanatçıları onları keşfetmekten çıkaran yağlıboya çevresinde haksız bir gizem var. Hakkı biliyorsan Ya�..

Bir guaş paleti nasıl karıştırılır

Nasıl Yapılır Sep 11, 2025

Guaş, suluboya boyasından daha bağışlayıcıdır, ancak erken yaptığınız kararlar hala geri kalanını etkileyebilir. ..

Canlı bir peri kraliçesi nasıl oluşturulur

Nasıl Yapılır Sep 11, 2025

Kötü bir eşek peri kraliçesini, en sevdiğim dergi, ImaJinefx'ten başka hiçbiri ile boyaması isteniyor, beni çok heyecanl..

Kategoriler