react-three-fiberを使用したReactとThree.jsの詳細

今日は、configureと使用方法を学習するつもりreact-three-fiber構築して反応して反応ネイティブアプリケーションで3Dモデルとアニメーションを表示します。

このチュートリアルは、Reactを使用してWebで3Dモデルアニメーションについて詳しく知りたい開発者、およびキャンバスを作成できない、 clickイベントなどのユーザーイベントをバインドしてレンダリングループを開始する、 react-three-fiberなどのThree.jsに制限がある人を対象としています。 react-three-fiberにはこれらの方法が付属しています。 react-three-fiberを使用してThree.js3Dモデルを構築する方法をよりよく理解するために、3Dモデルを構築します。

react-three-fiber入門

Three.jsは、あなたがよりここに学ぶことができる、それが簡単にブラウザで3Dグラフィックスを作成することができライブラリが、それは3Dモデルやアニメーションを表示するには、キャンバス+ WebGLの使用です。

react-three-fiberは、Web上のThree.js用のReactレンダラーであり、react-nativeです。これは、Three.jsを使用して3Dモデルとアニメーションを作成する速度を向上させます。3Dモデルとアニメーションを使用するサイトの例です。ここで見つけることができます。 react-three-fiber 、そのための再利用可能なコンポーネントのアニメーションに費やす時間を削減し、イベントを結合し、ループをレンダリングし、最初のはThree.jsが何であるかを見てみましょう。

react-three-fiberを使用すると、React状態、フック、および小道具を使用してthreeJSコードのコンポーネントを構築できます。また、次の要素が付属しています。

使用方法react-three-fiber

react-three-fiberを使用するには、以下のコマンドを使用することから始めます。

NPM

 npm i three react-three-fiber

糸

yarn add three react-three-fiber

注： react-three-fiberを機能させるには、上記のようにthree （Three.js）をインストールする必要があります。

React3Dルドーダイスモデルとアニメーションプロジェクトの構築

ここでは、下のビデオのように、 react-three-fiberを使用して3Dルドーダイスモデルを構築します。

create-react-appを使用してプロジェクトを初期化します。これを行うには、ターミナルで以下のコマンドを実行します。

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

上記のコマンドは、当社のローカルマシン、次のletの中にプロジェクトを反応させるの初期化cdのディレクトリに、我々のパッケージがインストールreact-three-fiberとthree 。

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

パッケージがインストールされたら、コマンドを使用して開発サーバーを起動しましょう

npm start

上記のコマンドは、ブラウザでプロジェクト開発サーバーを起動する必要があります。 次は私たちのプロジェクト内で、選択の私達のテキストエディタで私たちのプロジェクトを開いてみましょうsrc ：以下のファイルを削除、フォルダApp.css 、 App.test.js 、 serviceWorker.jsとsetupTests.js 。 次に、 App.jsで削除されたファイルを参照するすべてのコードを削除しましょう。

このプロジェクトでは、ルドーダイス用のBoxコンポーネントと、Reactによって提供されるAppコンポーネントが必要になります。

Boxコンポーネントの構築

Boxコンポーネントには、ルドーサイコロの形状、ルドーサイコロの画像、および常に回転を維持するための状態が含まれます。 まず、以下のBoxコンポーネントに必要なすべてのパッケージをインポートしましょう。

 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";

上記のコードでは、 useRef 、 useMemo 、 useStateをインポートしています。 useRefフックを使用してサイコロのメッシュにアクセスし、 useRefフックを使用してuseStateサイコロのアクティブな状態を確認します。 useMemoフックは、サイコロの数字を返すために使用されます。 次に、 react-three-fiberからCanvasとuseFrameをインポートします。 canvasはブラウザでグラフィックを描画するために使用されますが、 useFrameを使用すると、コンポーネントをレンダリングループにフックできます。これにより、1つのコンポーネントをレンダリングできます。別のコンテンツ。 次に、 threeパッケージをインポートしてから、ルドーダイスの静止画像をインポートしました。

次に、 Boxコンポーネントのロジックを記述します。 まず、機能コンポーネントの構築から始めて、コンポーネントに状態を追加します。以下でそれを実行しましょう。

 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 /> ); }

上記のコードでは、作成しているBox我々はREFを作成隣に、小道具を持つコンポーネントと呼ばれるmesh使用useRefフックを、我々は常に同じで毎回メッシュ返すことができ、このようにしました。

メッシュはシーン内の視覚要素であり、三角形のポリゴンを構成する3Dオブジェクトです。通常、モデルの形状を定義するために使用されるジオメトリとモデルの外観を定義するマテリアルを使用して構築されます。ここでメッシュについて学びますuseRefフックについてもここで学ぶことができます。

初期化した後mesh 、私たちが使用して我々のアプリケーションの状態を初期化する必要がありuseStateフックを、ここではfalseにアプリケーションの推移とアクティブ状態を設定します。

次に、以下のコードを使用して、 react-three-fiberのuseFrameフックを使用してメッシュ（ルドーダイス）を回転させます

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

ここでは、メッシュの現在の位置を0.01秒ごとに回転させています。これは、回転に優れたアニメーションを与えるために行われます。

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

上記のコードでは、 textureという定数を作成し、新しいサイコロロールをロードする関数としてreact useMemoフックを渡します。ここでは、サイコロの画像とその番号を記憶するためのuseMemoです。 useMemoフックについてはここで学ぶことができます。

次に、ブラウザでBoxコンポーネントをレンダリングし、イベントを追加します。これを以下で行います。

 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> ); }

上記のコードでは、 Boxコンポーネントを返し、spread演算子を使用してBoxコンポーネントのすべてのプロパティを渡したmeshでラップし、 useRefフックを使用してメッシュを参照しています。 次に、Three.jsのscaleプロパティを使用して、アクティブな場合はダイスボックスのサイズを設定し、アクティブでない場合は1.5に設定します。 最後になりましたが、デフォルトで設定されていない場合にstateをactiveに設定するonClickイベントを追加しました。

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

サイコロボックスをレンダリングするために、Three.jsからboxBufferGeometryコンポーネントをレンダリングしました。boxBufferGeometryは、ボックスなどの線やポイントを描画するのに役立ちますboxBufferGeometry argsを使用して、ボックスジオメトリのサイズなどのコンストラクターを渡しました。

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

Three.jsのmeshBasicMaterialは、単純な形式でジオメトリを描画するために使用されます。 ここでは、 attach属性を渡し、 THREE.DoubleSide小道具をside属性に渡しました。 THREE.DoubleSideは、 react-three-fiberによってレンダリングされる側面またはスペースを定義します。

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

Three.jsのprimitiveコンポーネントは、3Dグラフを描画するために使用されます。 ルドーダイスの元の形状を維持するために、マッププロパティを添付しました。 次に、 App.jsファイルでBoxコンポーネントをレンダリングし、3dルドーダイスボックスを完成させます。 コンポーネントは次の画像のようになります。

3Dルドーダイスボックスのレンダリング

このセクションでは、 App.jsでBoxコンポーネントをレンダリングし、3d ludoボックスを完成させます。最初に、 Appコンポーネントを作成し、 Canvasタグでラップします。これは、3Dモデルをレンダリングするためのものです。以下でそれをやってみましょう。

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

次に、ボックスにライトを追加しましょうreact-three-fiberは、モデルを照らすための3つのコンポーネントを提供します。これらは次のとおりです。

• ambientLight
  これは同様に、そのような光の強度として小道具を受け付けるシーンまたはモデル内の光のすべてのオブジェクトに使用され、これはルードサイコロの本体を点灯します。
• spotLight
  この光は一方向から放射され、物体のサイズが大きくなるにつれて大きくなり、ルドーダイスのポイントを照らします。
• pointLight
  これは、電球の光と同様に動作し、光が一点から全方向に放射され、これは我々のアプリケーションのアクティブ状態のために必要であろう。

以下のアプリケーションに上記を実装しましょう。

 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;

上記のコードでは、 react-three-fiberからambientLightコンポーネントをインポートし、それに0.5の強度を追加しました。次に、 spotLightコンポーネントとpointLightコンポーネントに位置と角度を追加しました。 アプリケーションの最後のステップは、ボックスコンポーネントをレンダリングし、ルドーダイスボックスに位置を追加することです。これは、以下のコードで行います。

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

完了すると、ルドー3Dサイコロは次の画像のようになります。

実用的なデモはCodeSandboxで入手できます。

結論

react-three-fiberにより、ReactおよびReactNativeアプリケーション用の3Dモデルとアニメーションのレンダリングが簡単になりました。 当社の3Dルードサイコロボックスを構築することによって、私たちは、その構成要素と利点の横のThree.jsの基本について学んできたreact-three-fiber同様にそれを使用する方法として。

独自にreact-three-fiberを使用して、ReactおよびNativeアプリケーションで3Dモデルとアニメーションを構築することにより、これをさらに進めることができます。 あなたが思いついた新しいものを見てみたいです！

以下のリファレンスで、Three.jsとreact-three-fiber詳細を読むことができます。

関連リソース

• Three.jsドキュメント
• Three.jsの基礎
• React-Poimandresによる3ファイバーGitHubリポジトリ
• react-3ファイバーのドキュメント
• React Hooks（useState、useMemoなど）の公式ドキュメント