インストール - actnwit/RhodoniteTS GitHub Wiki

Rhodoniteは以下の2通りの方法で導入できます。

npmリポジトリを利用する方法

Rhodoniteはnpmを用いて導入することができます。

npmを用いたRhodoniteのインストール

ターミナルから以下のコマンドでRhodoniteをインストールできます。

$ npm install rhodonite

Bundlerを使った場合のコーディング例

WebpackやViteなどのバンドラーを使うことで、Rhodoniteを容易にimportして利用することができます。 以下はTypeScriptを用いた一例です。

// main.ts
import Rn from 'rhodonite';

document.body.onload = async function load() {
  await Rn.System.init({
    approach: Rn.ProcessApproach.Uniform,
    canvas: document.getElementById('world') as HTMLCanvasElement,
  });

  // 3Dモデルの読み込みやdrawコールなど
}

Bundlerを使わない場合

Bundlerを使わないで利用することもできます。以下はTypeScriptでの例です。

<!-- index.html -->
...
<script type="module" src="main.js">
...
// main.ts
import Rn from 'node_modules/rhodonite/dist/esm/index.js'; // ESModuleとして利用
// import Rn from 'node_modules/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,
    ...
  }
  ...
}

GitHubリポジトリ内のランタイムを使用する方法

この方法では、導入したいプロジェクトフォルダーにRhodoniteランタイム（実行用のjsファイル）をコピーし、それを参照して利用します。

Rhodoniteランタイムのコピー

RhodoniteのGitHubリポジトリにはdistディレクトリが存在します。 リポジトリをCloneしてbuildを行うと、dist/iifeディレクトリ以下にRhodoniteランタイムが生成されます。

dist_dir

または、CI(自動テスト)結果ページ(https://github.com/actnwit/RhodoniteTS/actions/workflows/test.yml)のテストが成功したリンク先のArtifactの欄からdistフォルダの内容をZipダウンロードして入手することも可能です。 image

distディレクトリ内のrhodonite.js、またはそのminify版のrhodonite.min.jsをプロジェクトフォルダー以下にコピーします。以下ではrhodonite.jsを用いた例を扱いますが、rhodonite.min.jsに読み換えても問題ありません。

JavaScriptを用いたコーディング例

htmlファイルからrhodonite.jsを参照することで、グローバルオブジェクト(window)のRnプロパティからRhodoniteを使えます。 この場合、RhodoniteのIIFE版を利用していることになります。

たとえば、プロジェクトフォルダーが次の画像のように構成されているとします。

use_runtime_directory

このとき、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を使う場合は次のようにします。 IIFE版ではRhodoniteの型の運用が通常よりも変則的になります。 TypeScriptでコーディングする場合は、ESModule版の利用を推奨します。

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 iife 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 node

TypeScriptコードをUMDとしてコンパイルしたので、それをブラウザで読み込むためにreqiurejsなどを利用します。

<script src="dist/iife/rhodonite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" data-main="main.js"></script>
⚠️ **GitHub.com Fallback** ⚠️