React- Three-Fiber Kullanarak React Ve Three.js'ye Dalış

Bugün, React ve React Native uygulamalarında 3B modeller ve animasyonlar oluşturmak ve görüntülemek için react-three-fiber nasıl yapılandırılacağını ve kullanılacağını öğreneceğiz.

Bu eğitim, Web'de React kullanarak 3B model animasyonları hakkında daha fazla bilgi edinmek isteyen geliştiriciler ve Three.js ile tuval oluşturamama, click olayları gibi kullanıcı olaylarını bağlama ve bir oluşturma döngüsü başlatma, react-three-fiber gibi sınırlamaları olan herkes içindir. react-three-fiber bu yöntemlerle gelir. react-three-fiber kullanarak Three.js 3D modellerinin nasıl oluşturulacağını daha iyi anlamak için bir 3D model oluşturacağız.

react-three-fiber ile Başlarken

Three.js, tarayıcıda 3B grafikler oluşturmayı kolaylaştıran bir kitaplıktır, 3B modelleri ve animasyonları görüntülemek için bir tuval + WebGL kullanır, daha fazlasını buradan öğrenebilirsiniz.

tepki-üç-fiber, web üzerinde Three.js için bir React oluşturucudur ve tepki-yereldir, Three.js ile 3D modeller ve animasyonlar oluşturma hızınızı artırır, 3D modeller ve animasyonlara sahip bazı site örnekleri burada bulunabilir. react-three-fiber , yeniden kullanılabilir bileşenleri, bağlama olayları ve oluşturma döngüsü nedeniyle animasyonlara harcanan zamanı azaltır, önce Three.js'nin ne olduğuna bir bakalım.

react-three-fiber , React durumu, kancalar ve aksesuarlar kullanarak threeJS kodunun bileşenlerini oluşturmamıza olanak tanır, ayrıca aşağıdaki öğelerle birlikte gelir:

react-three-fiber nasıl kullanılır

react-three-fiber kullanmak için aşağıdaki komutları kullanarak başlayın:

NPM

 npm i three react-three-fiber

İPLİK

 yarn add three react-three-fiber

Not : react-three-fiber çalışması için yukarıda yaptığımız gibi three (Three.js) yüklemeniz gerekir.

React 3D Kızma Birader Modeli Oluşturma Ve Animasyon Projesi

Burada, aşağıdaki videoda olduğu gibi react-three-fiber kullanarak bir 3D ludo zar modeli oluşturacağız.

Projemizi başlatmak için create-react-app kullanacağız, bunun için aşağıdaki komutu terminalimizde uygulayalım.

 create-react-app react-three-fiber-ludo-model

Yukarıdaki komut, yerel makinemizde bir React projesini başlatır, sonra dizine cd yazalım ve react-three-fiber ve three paketlerimizi kuralım.

 cd react-three-fiber-ludo-model npm i three react-three-fiber

Paketler kurulduktan sonra, komutu kullanarak geliştirme sunucumuzu başlatalım.

 npm start

Yukarıdaki komut, tarayıcımızda proje geliştirme sunucumuzu başlatmalıdır. Ardından, projemizi seçtiğimiz metin düzenleyicimizde açalım, proje src klasörümüzün içindeki şu dosyaları silelim: App.css , App.test.js , serviceWorker.js ve setupTests.js . Ardından, App.js'mizde silinen dosyalara referans veren tüm kodları App.js .

Bu proje için, ludo zarlarımız için bir Box bileşenine ve React tarafından verilen App bileşenimize ihtiyacımız olacak.

Box Bileşenini Oluşturma

Box bileşeni, ludo zarlarımızın şeklini, bir ludo zarının görüntüsünü ve onu her zaman rotasyonda tutacak bir durumu içerecektir. Öncelikle aşağıdaki Box bileşenimiz için ihtiyacımız olan tüm paketleri import edelim.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

Yukarıdaki kodda useRef , useState ve useMemo öğelerini içe aktarıyoruz. Zar ağına erişmek için useRef kancasını ve ludo zarının aktif durumunu kontrol etmek için useState kancasını kullanacağız. zardaki sayıyı döndürmek için useMemo kancası kullanılacaktır. Sonra, Canvas ve useFrame react-three-fiber içe aktarıyoruz, canvas , tarayıcıdaki grafikleri çizmek için kullanılırken useFrame , bileşenlerin oluşturma döngüsüne bağlanmasına izin verir, bu, bir bileşenin işlenmesini mümkün kılar içeriği başka. Ardından, three paketi içe aktardık ve ardından bir ludo zarının statik görüntüsünü içe aktardık.

Sırada Box bileşenimiz için mantık yazmak var. İlk olarak, fonksiyonel bir bileşen oluşturmaya başlayacağız ve bileşenimize durum ekleyeceğiz, bunu aşağıda yapalım.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

Yukarıdaki kodda, props ile bir Box bileşeni oluşturuyoruz, sonra useRef kancasını kullanarak mesh adında bir ref oluşturuyoruz, bunu her seferinde her zaman aynı mesh'i döndürebilmemiz için yaptık.

Kafes, bir sahnedeki görsel bir öğedir, üçgen bir çokgen oluşturan 3B bir nesnedir, genellikle modelin şeklini tanımlamak için kullanılan bir Geometri ve modelin görünümünü tanımlayan Malzeme kullanılarak oluşturulur. Burada bir Mesh hakkında bilgi edinin, ayrıca useRef kancası hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Bir mesh başlatıldıktan sonra, useState kancasını kullanarak uygulamamız için bir durum başlatmamız gerekiyor, burada uygulamanın üzerine gelindiğinde ve etkin durumunu false olarak ayarladık.

Ardından, aşağıdaki kodu kullanarak ağı (ludo zar) döndürmek için react-three-fiber useFrame kancasını kullanıyoruz

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Burada, her 0,01 saniyede bir ağın mevcut konumunu döndürüyoruz, bu, döndürmeye iyi bir animasyon vermek için yapılır.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

Yukarıdaki kodda, texture adında bir sabit oluşturuyoruz ve yeni bir zar rulosu yüklemek için bir fonksiyon olarak bir tepki useMemo kancasını geçiriyoruz, burada zar görüntüsünü ve numarasını ezberlemek için useMemo . useMemo kancası hakkında buradan bilgi edinebilirsiniz.

Ardından, Box bileşenini tarayıcıda oluşturmak ve olaylarımızı eklemek istiyoruz, bunu aşağıda yapıyoruz

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

Yukarıdaki kodda Box bileşenimizi döndürüyoruz ve onu useRef , Box bileşeninin tüm özelliklerini spread operatörünü kullanarak geçtik ve ardından mesh kancasını kullanarak ağa başvurduk. Daha sonra, zar kutusunun aktif olduğu zaman boyutunu 2 ve olmadığı zaman 1.5 olarak ayarlamak için Three.js'deki scale özelliğini kullanırız. Son olarak, varsayılan olarak ayarlanmamışsa state active olarak ayarlamak için bir onClick olayı ekledik.

 <boxBufferGeometry args={[1, 1, 1]} />

Zar kutusunu oluşturmak için boxBufferGeometry bileşenini oluşturduk, boxBufferGeometry kutular gibi çizgiler ve noktalar çizmemize yardımcı oluyor, kutu geometrisinin boyutu gibi yapıcıları geçmek için args argümanını kullandık.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

meshBasicMaterial meshBasicMaterial, geometrileri basit bir biçimde çizmek için kullanılır. Burada attach özniteliğini geçtik ve side özniteliğe bir THREE.DoubleSide props geçtik. THREE.DoubleSide , react-three-fiber tarafından oluşturulması gereken kenarları veya boşlukları tanımlar.

 <primitive attach="map" object={texture} />

Three.js'deki primitive bileşen, 3B grafikler çizmek için kullanılır. Kızma zarlarının orijinal şeklini korumak için map özelliğini ekledik. Ardından, App.js dosyasında Box bileşenimizi oluşturacağız ve 3d ludo zar kutumuzu tamamlayacağız. Bileşeniniz aşağıdaki resme benzer görünmelidir.

3D Kızma Birader Kutusu Oluşturma

Bu bölümde Box bileşenimizi App.js ve 3d ludo kutumuzu tamamlayacağız, bunu yapmak için önce bir App bileşeni oluşturalım ve bir Canvas etiketi ile saralım, bu 3D modellerimizi oluşturmak için, bunu aşağıda yapalım.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Ardından kutulara bir ışık ekleyelim, react-three-fiber modellerimizi aydınlatmak için bize üç bileşen sağlar, bunlar aşağıdaki gibidir.

• ambientLight
  Bu, bir sahnedeki veya modeldeki tüm nesneleri eşit olarak aydınlatmak için kullanılır, ışığın yoğunluğu gibi sahneleri kabul eder, bu ludo zarının gövdesini aydınlatacaktır.
• spotLight
  Bu ışık tek bir yönden yayılır ve nesnenin boyutu arttıkça artar, bu ludo zarının noktalarını aydınlatacaktır.
• pointLight
  Bu bir ampulün ışığına benzer şekilde çalışır, ışık tek bir noktadan her yöne yayılır, bu uygulamamızın aktif hali için gerekli olacaktır.

Yukarıdakileri aşağıdaki uygulamamıza uygulayalım.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

Yukarıdaki kodda, ambientLight bileşenini react-three-fiber içe aktardık ve buna 0,5'lik bir yoğunluk ekledik, spotLight ve pointLight bileşenimize bir konum ve açı ekledik. Uygulamamızın son adımı kutu bileşenimizi oluşturmak ve ludo zar kutularına bir konum eklemektir, bunu aşağıdaki kodda yapardık

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

İşiniz bittiğinde, ludo 3D zarınız aşağıdaki resme benzer görünmelidir:

CodeSandbox'ta çalışan bir demo mevcuttur.

Çözüm

react-three-fiber , React ve React Native uygulamaları için 3D modellerin ve animasyonların oluşturulmasını kolaylaştırdı. 3D ludo zar kutumuzu oluşturarak, Three.js'nin bileşenleri ve react-three-fiber faydalarının yanı sıra nasıl kullanılacağının da temellerini öğrendik.

React ve Native uygulamalarınızda kendi başınıza react-three-fiber kullanarak 3B modeller ve animasyonlar oluşturarak bunu daha da ileri götürebilirsiniz. Ne gibi yeni şeyler bulduğunu görmek isterim!

Three.js hakkında daha fazlasını okuyabilir ve aşağıdaki referanslarda react-three-fiber okuyabilirsiniz.

alakalı kaynaklar

• Three.js belgeleri
• Three.js temelleri
• Poimandres tarafından React-Üç fiber GitHub deposu
• tepki-üç-fiber belgeleri
• React Hooks (useState, useMemo, vb.) resmi belgeleri