Three.JS nedir?

Three.JS, Web tarayıcılarında animasyonlu 3B grafikler oluşturmak ve görüntülemek için kullanılan tarayıcılar arası bir JavaScript kitaplığı ve API'sidir.

Three.JS, eklentilere güvenmeden JavaScript dilini kullanarak GPU hızlandırmalı 3D animasyonların oluşturulmasına izin verir

React Three Fiber Nedir?

tepki-üç-fiber, Three.JS için ek yükü olmayan bir React oluşturucudur . Bileşenler, React'in dışında birleşik bir oluşturma döngüsüne katılır. React'in zamanlama yetenekleri nedeniyle, ölçekte Three.JS'den daha iyi performans gösterir.

Kurmak

Bunun için birçok bağımlılık var:

yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing

Nesne Canvas, React Three Fiber Sahnenizi tanımlamaya başladığınız yerdir.

Yukarıdaki kodda, yapılandırılmış kamera ve gölgeler içeren bir tuval oluşturdum

Işıklar ve Gölgeler

Tuvalin içinde ışıklara ve gölgelere ihtiyacımız var, böylece modellerimizin gölgeleri olacak ve parlak görünecekler.

Kalpleri Yarat

İlk olarak, kalp şeklini oluşturmalıyız:

Ardından farklı faktörler ve hız ile çarpın:

Kalplerimizin yüzmesini istediğimiz için, konumlarını belirleyeceğiz.useFrame

Son olarak kalpleri yukardakilere döküp Instanceskoyacağız.Canvas

Son olarak, bazı efektlere ihtiyacımız var

Çözüm

Sonuçlar

Canlı demo:https://threejs-floating-hearts.vercel.app/

Kaynak kodu:https://github.com/leduc1901/threejs-floating-hearts

Son sözler

İçeriğim herkes için ücretsiz olsa da bu makaleyi faydalı bulursanız bana buradan bir kahve ısmarlayabilirsiniz.