Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

3B görüntülemenin tanıtımı, internet teknolojileri ile kullanıcı etkileşimini dönüştürdü. Başlangıç ​​olarak, web uygulamaları web tarayıcısı aracılığıyla ilgi çekici ve etkileşimli bir deneyim sunarak daha sürükleyici hale geldi.

Bu teknoloji, oyun ve artırılmış/sanal gerçeklik alanları tarafından zaten hevesle benimsenmiştir. Sanal öğelerle etkileşim kurmanın gerçekçi ve sürükleyici bir yolunu sunar.

Bir React uygulamasında 3B nesnelerin nasıl oluşturulacağını öğrenin.

3B Modelleme ve Programlamanın Temelleri

3B görüntülemeye başlamadan önce bilmeniz gereken birkaç nokta vardır:

  • 3B nesneler, yapılarını üç boyutta tanımlayan ayrı noktalar veya köşeler içerir. Bu noktaların birleştirilmesi, nesnenin ekrandaki şeklini oluşturan yüzler oluşturur.
  • Modern tarayıcılar, WebGL gibi teknolojileri kullanarak yerleşik 3B oluşturma yeteneğine sahiptir. Bunu, 3B modelleri ve sahneleri hızlı bir şekilde işlemek için makinenizdeki grafik işleme biriminin gücünü kullanarak yaparlar.
    instagram viewer
  • Tarayıcınızın oluşturduğu herhangi bir 3B nesne, üç ana bileşenden oluşur. Bunlar sahne, kamera ve oluşturucudur ve hepsi çok önemli bir rol oynar. Sahne, ışıklar ve kameralar dahil olmak üzere tüm 3B öğelerinizi kurmak için temel platformu sağlar. Kamera, 3B nesneyi çeşitli açılardan görüntülemenizi sağlar. Son olarak, oluşturucu, sahneyi bir tuval HTML öğesinin üzerine monte eder ve görüntüler.

Three.js ve React Three Fiber ile 3D İşleme

Üç.js 3B nesneleri bir web tarayıcısında işlemek için kullanabileceğiniz bir JavaScript kitaplığıdır. Yerleşik bileşenlerini kullanarak, tarayıcınızda React uygulamanızın diğer özelliklerinin yanı sıra kolayca 3B nesneler oluşturabilir ve görüntüleyebilirsiniz.

tepki-üç-fiber paketi, Three.js üzerinde çalışır. Tarayıcıda 3B nesneler oluşturmak ve işlemek için Three.js bileşenlerini kullanma sürecini basitleştirir. İlginç bir şekilde, aynı zamanda özel Tepki kancaları React'te 3B nesneler oluştururken kullanışlı olan.

Bir React Uygulamasında 3B Nesneleri Oluşturma

Tarayıcınızda basit bir 3B şekil ve ayrıca Blender tarafından oluşturulmuş bir 3B model oluşturmak için aşağıdaki adımları izleyin. Blender'a aşina değilseniz, acemi olarak nasıl başlayacağınızı öğrenin.

Bir React uygulaması oluşturun, aşağıdaki komutu çalıştırmak için terminalinizi çalıştırın ve gerekli bağımlılıkları kurun:

npm üç kurun @react-three/fiber @react-three/drei

Three.js, tepki-üç-fiber ve tepki-üç-drei paketlerini kurun. tepki-üç-drei kitaplığı, 3B sahneler ve nesneler oluşturmak için tepki-üç-fiber ile birlikte çalışır.

3B Şekil Oluşturun

Bir tarayıcıda çok az kodla basit bir 3B kutu şekli oluşturabilirsiniz. Aç kaynak/uygulama.js dosya, tüm standart React kodunu silin ve aşağıdakileri ekleyin:

içe aktarmak Tepki itibaren"tepki";
içe aktarmak {Tuval} itibaren"@tepki-üç/fiber";
içe aktarmak {OrbitControls} itibaren"@tepki-üç/drei";
işlevKutu() {
geri dönmek (
<örgü>
<boxBufferGeometrieklemek ="geometri" />
<örgüLambertMalzemeeklemek="malzeme"renk="sıcak pembe" />
örgü>
 )
}
ihracatvarsayılanişlevUygulama() {
geri dönmek (
<divsınıf adı="Uygulama">
<divsınıf adı="Uygulama başlığı">
<Tuval>
<Yörünge Denetimleri />
<ortam ışığıyoğunluk ={0.5} />
<spot ışıkkonum={[10,15,10]} açı={0.3} />
<Kutu />
Tuval>
div>
div>
 );
}

Bu kod aşağıdakileri yapar:

  • bu Kutu bileşeni, bir 3B kutu oluşturmak için tepki-üç fiberden ağ, boxBufferGeometry ve meshLambertMaterial bileşenlerini kullanır. Bu üç bileşen, kutunun şeklini oluşturmak için el ele çalışır.
  • boxBufferGeometry bileşeni kutuyu oluşturur ve bu kod meshLambertMaterial bileşeninin color özelliğini sıcak pembe olarak ayarlar.
  • Daha sonra, ortam ışığı, bir spot ışığı ve Orbit Controls bileşen özellikleri ayarlı kutu bileşenini barındıran Canvas öğesini oluşturur.
  • Ortam ışığı bileşeni özelliği, tuvale yumuşak bir ışık ekler. SpotLight bileşeni, belirli bir konumdan 0,3'lük bir açıyla odaklanmış bir ışık ekler. Son olarak, OrbitControls bileşeni, kamerayı 3B nesne etrafında kontrol etmenizi sağlar.

app.js bileşenini index.js dosyasına içe aktarın ve oluşturun ve sonuçları şu adreste tarayıcınızda görüntülemek için bir geliştirme sunucusunu çalıştırın: http://localhost: 3000.

Blender Tarafından Oluşturulan 3D Modeli Oluşturun

Blender, farklı alanlardaki yaratıcı kişiler tarafından 3B modeller, görsel efektler ve etkileşimli 3B uygulamalar oluşturmak için kullanılan açık kaynaklı bir araçtır. Web uygulamanız için 3B modeller oluşturmak için Blender'ı kullanabilirsiniz.

Bu eğitim için, şu adreste bulunan SRT performansına göre bir BMW 3D modelini işleyeceksiniz: eskiz fab.

Kredi bilgileri: RadeonGamer/ eskiz fab
Creative Commons Atıf

Başlamak için, modeli Sketchfab'den GLTF (GL İletim Formatı) formatında indirin. Bu biçim, tarayıcıda 3B modellerin işlenmesini kolaylaştırır. İndirme işlemi tamamlandıktan sonra, modelin klasörünü açın ve modelin dosyasını React uygulamanızın içindeki genel dizine taşıyın.

Şimdi, app.js dosyanıza gidin ve onu aşağıdaki kodla doldurun.

  • Aşağıdaki bileşenleri içe aktarın: 
    içe aktarmak {useGLTF, Sahne Alanı, PresentationControls} itibaren"@tepki-üç/drei";
  • Model bileşenini oluşturun ve aşağıdaki kodu ekleyin: 
    işlevmodeli(sahne){
    sabit {sahne} = kullanGLTF("/bmw.glb");
    geri dönmek<ilkelnesne={sahne} {...sahne} />
    }
    ihracatvarsayılanişlevUygulama() {
    geri dönmek (
    <divsınıf adı="Uygulama">
    <divsınıf adı="Uygulama başlığı">
     dpr={[1,2]} 
     gölge kamerası={{fav: 45}}
     stil={{"konum": "mutlak"}}
     >
     hız={1.5} 
    küresel yakınlaştır={0.5}
     kutup={[-0.1, Matematik.PI / 4]}
     >
    <Sahneçevre={hükümsüz}>
    <modeliölçek={0.01} />
    Sahne>
    Sunum Kontrolleri>
    Tuval>
    div>
    div>
     );
    }
  • React-three-drei kitaplığından useGLTF kancası, bir sahne değişkeni tanımlar ve ona "/bmw.glb" yolunda bulunan model dosyasının değerini atar. Ardından bileşen, 3B model için sahneyi oluşturan ilkel bir nesne döndürür.
  • Canvas öğesi, modeli oluşturan ana bileşenleri, cihaz piksel oranı (DPR), gölgeler, kamera açısı ve stil gibi belirtilen özelliklerle işler.
  • Ardından PresentationControls bileşeninin hız ve genel yakınlaştırma gibi özelliklerini belirtirsiniz. Bu özellikler, modeli ekranda nasıl kontrol edeceğinizi tanımlar.
  • Son olarak, modeli tarayıcı ekranına bağlayan Stage bileşenini yapılandırın.

Uygulamanızdaki değişiklikleri güncellemek için geliştirme sunucusunu çalıştırın. Tarayıcınızda işlenen modeli görmelisiniz.

3B Modelleri Web Uygulamanızda Oluşturma

Web uygulamalarınızda 3B modeller oluşturmak, daha gerçekçi ve etkileşimli bir 3B hissi sağlayarak kullanıcı deneyimini iyileştirmek gibi çeşitli avantajlar sağlayabilir. Sonuç olarak, kullanıcılar ürünle daha iyi etkileşim kurabilir.

Bununla birlikte, 3B öğelerin işlenmesi, uygulamanın performansını olumsuz etkilemek gibi dezavantajlara sahip olabilir. 3B modellerin oluşturulması için daha fazla kaynak gerekir ve bu da uygulamanızın daha yavaş yüklenmesine neden olabilir.