Son iki yılda, VR ve AR teknolojilerini çevreleyen faizlerde bir patlama olmuştur. En son büyük şey
deneysel tasarım
, AR ayrıca web'e de ulaştı, ancak bu yeni teknoloji ile yeni beceriler geliyor ve şu anda izlenecek önemli standartları olmayan vahşi batı gibi hissediyor.
Web'de 3D görüntüleme yeteneği yeni bir şey değil, ancak kaçınıyorsanız, o zaman üç.js veya A-Frame gibi teknolojilere atlamanız gerekir (
AR Araçları Denemek
tam bir liste için).
Hangi beceri seviyesi olursanız olun, iyi bir içeriğiniz yoksa, çok fazla fark yaratmaz. Z'ye atlamadan önce AR için uygun kullanım durumlarını düşünün. Bu makalede, size çoklu işaretleyici AR deneyiminin nasıl oluşturulacağını göstereceğiz.
Beceri seviyenizi oldukça fazla değil mi? Bir
Web Sitesi Oluşturucu
telaş olmadan sizin için bir site oluşturacak. Ya da karmaşık bir siteyle dalıyorsanız,
ağ sağlayıcısı
sağ.
Birden fazla işaretleyici kullanılarak, bir işlemin farklı aşamalarını veya bu işaretçiye göre benzersiz bir içerik göstermek mümkündür. Bu örnekte, uygulamamız su döngüsünü keşfedecektir. Özel bir AR marker oluşturmayı öğrenmek için Sayfa 3'e atlayın.
01. Başlayın
Aç
Başlat
IDE'inizdeki ve içinde klasör
index.html
Sayfa Script etiketlerini bulun. Eğitimdeki tüm kod bunlara girecek. Uygulamayı test etmek için bir sunucunuza sahip olmalısınız ve bir telefonda test etmek istiyorsanız, dosyaları bir HTTPS sunucusundaki kullanmanız gerekir. Script etiketindeki ilk değişkenleri ekleyin:
var model1, model2, model3, sayım = 0,
parçacıklar, partikül, partiküller sistemi;
var yükleyici = yeni üç.colladaloader ();
AR sahne çalışmasını sağlamak için bir model yüklenir. Yüklendikten sonra değişkende depolandığını göreceksiniz.
model1
. Bu daha sonra ölçeklendirilir ve üç adım boyunca iki kez klonlanır. Üç farklı model yüklemek yerine, bir modeldeki tüm ayarlamalar, mobil cihazlarda hızlı bir şekilde yüklemek için kodda yapılacaktır.
İlk modelde, bulut olay yerinde bulunacak ve bu, bulut denizin dışına çıkması için yeni bir pozisyona karışacak. Bu, sonsuza dek tekrarlamak için ayarlanmıştır ve Tween'in bir bulut oluşturmasını canlandırması ve göstermesi için sekiz saniye sürecektir.
Bulut neredeyse görünmez olmak için düştü. Buluta başka bir araya eklenir ve bu, bulutu normal boyutuna kadar ölçer. Hareket ve ölçeklendirme ile, bulutun su döngüsü sürecindeki ilk adım olarak denizin yükselmesi ve oluşturulması yanılsaması verecektir.
İkinci modelden bir sonraki bulut, ilk bulutun animasyonunu gökyüzünde kurulan bir bulut olarak bitirdiği yerlerde konumlandırılmalıdır. Bunun, dağın biraz üzerinde yükselen, toprağın üzerinde konumlandırmak için bir araya gelen bir hareket verilir. Bu, daha büyük bir hamle olduğu için canlandırmak için 12 saniye sürer.
Bu yanılsama çalışmasını yapmanın anahtarı, bulutun yağmur yağmasına izin veriyor. Su döngüsü, karada daha yüksek hareket ettiği gibi bulut yağmuruna sahiptir. Efekti elde etmek için bir parçacık sistemi kullanılacaktır. Burada bir yağmur damlası görüntüsü kullanarak parçacıkların ve parçacık malzemesi miktarı oluşturulur.
Var textureloader = yeni üç.Textureloader ();
partikül = 1500;
parçacıklar = yeni üç.Geometri ();
var pmaterial = yeni üç.Pointsmaterial ({
Renk: 0x3A4E5D,
Boyut: 0.05,
Harita: textureloader.load ("img / rain.png"),
Phatest: 0.3,
Opaklık: 0,9,
Şeffaf: True});
07. Yağmur damlaları oluşturun
Döngü için kullanılması, 1500 yağmur damlası, bulut ve zemin arasında olacak rasgele bir X, Y, Z konumuyla oluşturulabilir. Her yağmur damlası, yağmurun daha doğal görünmesini sağlamak için kendi rastgele hızı verilir. Parçacık, geometrinin doğru tepesine itilir.
için (var i = 0; i & lt; particleCount; i ++) {
var px = math.random () * 60 - 30,
py = math.random () * -10,
pz = math.random () * 20 - 10;
var partikülü = yeni üç.vector3 (px, py, pz);
partive.velocity = yeni üç.Vektör3 (0, - (math.Random () * 0.9), 0);
parçacıklar.vertices.Push (parçacık); }
08. Parçacık sisteminde çalışın
Şimdi parçacık sistemi geometri ve malzemeden oluşturulur. Parçacıklar, Z-Siparişin doğru olması için sıralanacak şekilde ayarlanır ve daha sonra yağmur parçacıkları ikinci bulutun bir çocuğu yapılır. Bulutun her yerinden dolayı, yağmur da takip ediyor, bu yüzden bulutun ardından yağmurları canlandırmaya gerek yok!
Son modelde, bulut, ikinci bulut animasyon döngüsünün bitiş noktasına yeniden konumlandırılmıştır. Bu yeni bulut sadece gökyüzünde oturacak ve canlandırılmayacak. Bunun yerine nehir canlandıracak, böylece nehir modeli bir değişkende depolanır, arayla eklenmeye hazır.
VaR Cloud3 = Model3.getObjectbyName ("bulut", doğru);
Cloud3 = Cloud3.Children ;
cloud3.position.set (0, 50, -145);
var nehri = model3.getObjectbyname ("nehir", doğru);
River = River.Children ;
10. Nehri doldurun
Nehirdeki su seviyeleri yükselmesi gerekir
Su döngüsünün üçüncü aşamasında, su tepelerden, nehirleri ve gölleri denize döndüğü gibi doldurur. Bu, nehrin yüksekliğini hareket ettireceği için en ince hareket budur, böylece doldurun gibi görünür. Her şey şimdi önceden yüklenmiş
içinde
İşlev denir.
Natürmort, herkesin çay bardağı değil - belli bir set alır
Boyama Teknikleri
- Ama benim için her zaman bir favori oldu. Kurulumun renkleri ve stilleri üzerinde tam kon..
Web afişleri oluşturmak, dünyadaki en çekici işler değildir, ancak her tasarımcının kariyerinde bir noktada, muhtemelen birçok kez yapması gereken bir şeydir. Her ne kadar web afi..
