Creating a Project

Basic setup

• Open project folder from your IDE.
• Create .gitignore file and add node_modules into it. You can also add any file that you don't want to track in the history of your project.
• Run npm init -y in your console to generate package.json. Add all packages that you want to use in your project into dependencies. How to use packages.
• Run tsc --init in your console to generate tsconfig.json. Use target version later than ES6. Remember that not every latest version may be supported.
• If you don't have typescript installed try to run the following command in your console:

npm install -g typescript

• To launch your project we recommend you to use webpack.js. You can see an example in webpack.dev.js.
• You may need next script in your package.json:

"start": "webpack-dev-server --config webpack.dev.js --mode development"

• Add index.html file with empty basic structure and create a separate folder for your source code.

/src

Index.ts

• Your index.ts may have the following structure:

class App { constructor() { const modulesProcessor = new ModulesProcessor() } }

new App();

ModulesProcessor

• Modules - array of modules which will be inited.

const modulesProcessor = new ModulesProcessor({ modules: [ new FirstModule(), new SecondModule(), new ThirdModule(), ...], ...})

• Viewer config - options for the renderer, scene and camera.
• Bootstrap - programm module.

ExampleApp

• onInit() is called after modules initialization.
• You can create component using its factory from ModulesProcessor agents:

const windowComponent = modulesProcessor.agents.get(Factory).getFactory(WindowComponent)(windowOptions);

• You can get the controller:

const actionController = modulesProcessor.agents.get(ActionController)

• You can get the module:

const oculusQuestModule = modulesProcessor.modules.get(OculusQuestModule)

• Also you can get modulesInstances and a viewer:

const modulesInstances = modulesProcessor.modulesInstances

const frameworkViewer = modulesProcessor.viewer