インストール
Rhodoniteは以下の2通りの方法で導入できます。
Rhodoniteはnpmを用いて導入することができます。
ターミナルから以下のコマンドでRhodoniteをインストールできます。
$ npm install rhodoniteRhodoniteにはCommonJS版があり、Webpackなどのバンドラーを用いて利用することができます。 （ブラウザはCommonJSを直接扱えないためです。）
以下はTypeScriptを用いた一例です。
// main.ts
import Rn from 'rhodonite'; // CommonJSとして利用
document.body.onload = async function load() {
await Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world') as HTMLCanvasElement,
});
// 3Dモデルの読み込みやdrawコールなど
}ESModuleとして利用することもできます。以下はTypeScriptでの例です。 Webpackなどのバンドラーの利用が難しい場合は、ESModule版の利用を推奨します。
<!-- index.html -->
...
<script type="module" src="main.js">
...// main.ts
import Rn from 'rhodonite/dist/esm/index.js'; // ESModuleとして利用
// import Rn from 'rhodonite/dist/esmdev/index.js'; // ライブラリ内のソースマップ表示やステップ実行をしたい場合はこちらを使う
document.body.onload = async function load() {
await Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world') as HTMLCanvasElement,
});
// 3Dモデルの読み込みやdrawコールなど
}// tsconfig.json
{
...
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true,
...
}
...
}
この方法では、導入したいプロジェクトフォルダーにRhodoniteランタイム（実行用のjsファイル）をコピーし、それを参照して利用します。
RhodoniteのGitHubリポジトリにはdistディレクトリが存在します。
リポジトリをCloneしてbuildを行うと、dist/umdディレクトリ以下にRhodoniteランタイムが生成されます。
または、CI(自動テスト)結果ページ(https://github.com/actnwit/RhodoniteTS/actions/workflows/test.yml)のテストが成功したリンク先のArtifactの欄からdistフォルダの内容をZipダウンロードして入手することも可能です。
distディレクトリ内のrhodonite.js、またはそのminify版のrhodonite.min.jsをプロジェクトフォルダー以下にコピーします。以下ではrhodonite.jsを用いた例を扱いますが、rhodonite.min.jsに読み換えても問題ありません。
htmlファイルからrhodonite.jsを参照することで、グローバルオブジェクト(window)のRnプロパティからRhodoniteを使えます。
この場合、RhodoniteのUMD版を利用していることになります。
たとえば、プロジェクトフォルダーが次の画像のように構成されているとします。
このとき、index.htmlから次のようにRhodoniteを利用できます。
// index.html
<body>
<canvas id="world"></canvas>
<script src="./rhodonite.js"></script>
<script>
document.body.onload = async function load() {
await Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world'),
});
// 3Dモデルの読み込みやdrawコールなど
}
</script>
</body>TypeScriptを使う場合は次のようにします。 UMD版ではRhodoniteの型の運用が通常よりも変則的になります。 TypeScriptでコーディングする場合は、ESModule版かCommonJS版の利用を推奨します。
import _Rn from 'rhodonite'; // Use this for adding type annotations to window.Rn in this sample
import { CameraComponent, RenderPass } from 'rhodonite'; // for type annotations for umd usage
declare const window: any;
declare const Rn: typeof _Rn; // Use the window.Rn as Rn
async function load() {
Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world') as HTMLCanvasElement
});
// Camera
const cameraEntity = Rn.EntityHelper.createCameraControllerEntity();
const cameraComponent: CameraComponent = cameraEntity.getCamera();
...
(After that, please refer to the sample codes.)
...TypeScriptコードを次のようにコンバイルします。
$ npx tsc ./main.ts --lib es2015,dom --target es2015 --module umd --moduleResolution nodeTypeScriptコードをUMDとしてコンパイルしたので、それをブラウザで読み込むためにreqiurejsなどを利用します。
<script src="dist/umd/rhodonite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" data-main="main.js"></script>