Skip to main content

Example 1 Scene

Cat!

The Example1 Scene is an extra example scene provided in addition to the default starter scene. It shows how to do various useful things, in particular:

Running Example1​

To run the Example1 Scene, change the relevant part of main/MainAppComponent.ts:

/**
 * Comment out this code
 */
// import {MainSceneModel} from "./Scene/MainSceneModel";
// import {MainSceneController} from "./Scene/MainSceneController";
// const SceneModel = new MainSceneModel();
// SceneModel.confirmInitialized();
// const SceneController = new MainSceneController(SceneModel);

/**
 * And uncomment this code
 */
import {Example1SceneController} from "./Scene/ExampleScenes/Example1";
import {Example1SceneModel} from "./Scene/ExampleScenes/Example1";
const SceneModel = new Example1SceneModel();
SceneModel.confirmInitialized();
const SceneController = new Example1SceneController(SceneModel);

What you will see when you run Example1​

When you first run the code, you should see this trippy-looking cat scene:

You will notice two new elements right away. The first is a cat, loaded from a .glb file we have added to the repo. This model is also texture mapped using this texture atlas. The original model can be found in .obj format here.

Billboard particles​

The provided billboard particle system does a lot of the work to set up an efficient billboard-based particle system. The main thing that are missing are:

  • Code to ensure that each particle billboard will always orient itself to face the camera. The pose of each particle is set in BillboardParticleSystemView using getTransformForParticleIndex. You can also customize getColorForParticleIndex to change the color of particles. Beyond that, you can change the texture for your particle by modifying BillboardParticleSystemGraphic, e.g.:
export class BillboardParticleSystemGraphic extends InstancedParticleSystemGraphic<BillboardParticle>{
    // get particleTexture(){return "images/particleFlare.jpg"}
    get particleTexture(){return "images/gradientParticle.jpg"}
}

Pointer Lock Controls​

For an example of how to implement pointer lock controls, follow the code in ExamplePointerLockInteractionMode.ts