Install
Rhodonite can be installed in the following two ways
Rhodonite can be installed using npm.
You can install Rhodonite from a terminal with the following command.
$ npm install rhodoniteRhodonite 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.
}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,
...
}
...
}
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.
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.
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)).
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.
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.
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 nodeNow 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>