Install - actnwit/RhodoniteTS GitHub Wiki

Rhodonite can be installed in the following two ways

Using npm repository

Rhodonite can be installed using npm.

Installing Rhodonite using npm

You can install Rhodonite from a terminal with the following command.

$ npm install rhodonite

Coding example when used with webpack

Rhodonite has a CommonJS version, which can be used with bundlers such as Webpack. (This is because browsers cannot handle CommonJS directly.)

The following is an example using TypeScript.

// main.ts
import Rn from 'rhodonite'; // use as CommonJS

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

  // loading 3D models, draw calls, etc.
}

Using as an ESModule

You can also use it as an ESModule. The following is an example in TypeScript. If you have difficulty using bundlers such as Webpack, we recommend using the ESModule version.

<! -- index.html -->
...
<script type="module" src="main.js">
...
// main.ts
import Rn from 'rhodonite/dist/esm/index.js'; // use as ESModule
// import Rn from 'rhodonite/dist/esmdev/index.js'; // use this if you want to display the source map or step through the library

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

  // loading 3D models, draw calls, etc.
}
// tsconfig.json
{
  ...
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    ...
  }
  ...
}

How to use the runtime in the GitHub repository

In this method, you copy the Rhodonite runtime (the js file for execution) to the project folder where you want to deploy it, and refer to it for use.

Copy the Rhodonite runtime

There is a dist directory in the Rhodonite GitHub repository. Clone the repository and do build, Rhodonite runtime will be generated under the dist/umd directory.

dist_dir

Or, the CI (automated testing) results page ([https://github.com/actnwit/RhodoniteTS/actions/workflows/test.yml](https://github.com/actnwit/RhodoniteTS/ actions/workflows/test.yml)). image

Copy rhodonite.js in the dist directory or its minify version rhodonite.min.js under the project folder. The following example uses rhodonite.js, but you can replace it with rhodonite.min.js.

Coding example using JavaScript

By referring to rhodonite.js from the html file, you can use Rhodonite from the Rn property of the global object (window). In this case, you are using the UMD version of Rhodonite.

For example, suppose your project folder is configured as in the following image.

use_runtime_directory

In this case, you can use Rhodonite from index.html as follows

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

      // loading 3D model, draw call, etc.
    }
  </script>
</body>

If you use TypeScript, do the following The UMD version has more irregularities in the operation of Rhodonite types than usual. If you code in TypeScript, we recommend using the ESModule or CommonJS version.

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.)
  ...

Convey the TypeScript code as follows.

$ npx tsc . /main.ts --lib es2015,dom --target es2015 --module umd --moduleResolution node

Now that we have compiled the TypeScript code as a UMD, we can use reqiurejs or something similar to load it in the browser.

<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>
⚠️ **GitHub.com Fallback** ⚠️