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 bundler

By using bundlers such as Webpack or Vite, Rhodonite can be easily imported and used. The following is an example using TypeScript. The following is an example using 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,
  });

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

Using without bundler

You can you Rhodonite without Bundler. The following is an example in TypeScript.

<! -- index.html -->
...
<script type="module" src="main.js">
...
// main.ts
import Rn from 'node_modules/rhodonite/dist/esm/index.js'; // use as ESModule
// import Rn from 'node_modules/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/iife 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 IIFE 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 IIFE version has more irregularities in the operation of Rhodonite types than usual. If you code in TypeScript, we recommend using the ESModule 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 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.)
  ...

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/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** ⚠️