メインコンテンツまでスキップ

Introduction

このページでは、React Three Fiber (R3F)を使った XR アプリケーションの開発を学習するための方法や参考になるリンクを紹介します。

前提知識​

R3F を使った開発では、React はもちろん、TypeScript、Three.js の開発知識も前提となります。

技術説明
JavaScriptウェブアプリ開発に用いられるスクリプト言語です。
TypeScriptJavaScript に静的型付けを追加したプログラミング言語です。
Reactコンポーネントベースのアプローチで、ウェブアプリ開発に用いられる JavaScript ライブラリです。
Three.jsThree.js は ウェブブラウザ上で 3 次元コンピュータグラフィックスを描画する JavaScript ライブラリおよび API です。
React Three Fiber(R3F)R3F は、React 上で宣言的に Three.js の描画オブジェクトを記述できるライブラリです。
OpenAPI SpecificationAPI の仕様を記述するための標準規格です。

参考サイト​

これらの技術の参考となるリンクを紹介します。

JavaScript Primer​

React を学ぶには JavaScript の言語知識が必須です。 JavaScript を触れたことがない人は、まずは JavaScript の知識習得から始めましょう。

JavaScript Primerは、JavaScript の文法や機能を一から学べるサイトです。「第一部：基本文法」までの知識があれば、ひとまず充分です。基本文法の目次を見てわからないことがあれば学習してください。

サバイバル TypeScript​

サバイバル TypeScriptは、TypeScript を最短ルートで実務利用できることを目指したサイトです。

実務レベルに必要な一通りの知識が必要な場合はサバイバル TypeScript で学習しましょう。読んで学ぶ TypeScriptの見出しをみて内容がイメージできれば大丈夫です。

React 公式サイト​

React を学ぶにはReact 公式サイトが一番お勧めです。

React を利用したことがない人は「クイックスタート」からはじめてください。「LEARN REACT」の内容まで理解できていれば、最低限の React の知識が身に付いています。わからない箇所があれば学習してください。

また、「API リファレンス」に書かれている下記のフックは使用頻度が高いので、あらかじめ読んで理解しておくことをお勧めします。

Three.js​

Three.js は、WebGL を使用して Web ブラウザで 3D コンピュータグラフィックスを作成および表示するための JavaScript ライブラリおよび API です。

後述の React Three Fiber や drei を利用することで、簡単に Three.js の機能を利用できますが、前提として Three.js の基礎知識(シーン、カメラ、ライト、レンダラー、ジオメトリ、マテリアルなど)を知っておく必要があります。 次のページでこれらの知識を体系的に学ぶことができます。

React Three Fiber​

React Three Fiber(R3F)は three.js 用の React レンダラーです。React のエコシステムに統合できる再利用可能なコンポーネントを使用して、シーンを宣言的に構築します。 公式サイトのドキュメントおよび Example で R3F の詳細を知ることができます。

また、Drei（ドイツ語で 3 という意味）というライブラリがあり、 React Three Fiber (R3F) 用の便利なヘルパーと抽象化を提供しています。 カメラ、照明、ローダーなどの一般的な 3D 要素を簡単に実装できるコンポーネントやフックがあり、開発効率が大幅に向上します。

OpenAPI Specification​

OpenAPI Specification の詳細については公式ドキュメント(英語版)を参考してください。

OpenAPI Specification の見方について​

Swagger Editorを使用することで API のリクエスト、レスポンスなどの詳細を確認できます。 API 仕様の内容をSwagger Editorのエディターに貼るとプレビューにその内容が表示されます。

その他の Swagger 機能についてはWhat Is Swagger?を参照してください。