rl-loadout-lib

Load Rocket League assets into three.js. This library is closely tied with Rocket Loadout as the code was originally part of it. It uses GLTF models and TGA textures created and stored for the website.

Documentation

Quick start

The library currently works with Three.js r110. You should use that since there are usually a lot of breaking changes between Three.js releases. Models are DRACO compressed, you must provide the decoder.

NPM

npm install rl-loadout-lib

import { Scene } from 'three';
import { RocketAssetManager, RocketConfig, PaintConfig } from 'rl-loadout-lib';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

// You must provide the GLTFLoader to avoid issues with multiple instances of three.js and webgl context
const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
gltfLoader.setDRACOLoader(dracoLoader);
const config = new RocketConfig({
  gltfLoader
});

const manager = new RocketAssetManager(config);

const scene = new Scene();

async function load() {
  // Default colors (blue team)
  const paintConfig = new PaintConfig();

  // load Octane body
  const body = await manager.loadBody(23, paintConfig);
  // load OEM wheels
  const wheels = await manager.loadWheel(376, paintConfig);

  // Add the wheels to the body.
  // It will automatically create 4 wheels with the correct position and scale
  body.addWheelsModel(wheels);
 
  // Now you can add the car to the three.js scene
  scene.add(body.scene);
}

Pure JS

Download Three.js r110 and the javascript bundle from the releases.

<script src="js/three.js"></script>
<script src="js/rl-loadout-lib.js"></script>

You can use the RL global.

const gltfLoader = new THREE.GLTFLoader();
const dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
gltfLoader.setDRACOLoader(dracoLoader);
const config = new RL.RocketConfig({
  gltfLoader
});

const manager = new RL.RocketAssetManager(config);

...