How to use @microsoft/mixed-reality-extension-sdk - 10 common examples

import * as MRE from '@microsoft/mixed-reality-extension-sdk';
import dotenv from 'dotenv';
import { resolve as resolvePath } from 'path';
import { App } from './app';

// Read .env if file exists
dotenv.config();

process.on('uncaughtException', (err) => console.log('uncaughtException', err));
process.on('unhandledRejection', (reason) => console.log('unhandledRejection', reason));

// MRE.log.enable('network');
// MRE.log.enable('network-content');

// Start listening for connections, and serve static files
const server = new MRE.WebHost({
	// baseUrl: 'http://.ngrok.io',
	baseDir: resolvePath(__dirname, '../public'),
});

// Handle new application sessions
server.adapter.onConnection((context, params) => new App(context, params, server.baseUrl));

export default server;

private setupRunner() {
		// Main label at the top of the stage
		this.contextLabel = MRE.Actor.Create(this.context, {
			actor: {
				name: 'contextLabel',
				text: {
					contents: this.activeTestName,
					height: 0.2,
					anchor: MRE.TextAnchorLocation.MiddleCenter,
					justify: MRE.TextJustify.Center,
					color: NeutralColor
				},
				transform: {
					local: {
						position: { y: 1.8 }
					}
				}
			}
		});

		this.testRoot = MRE.Actor.Create(this.context, {
			actor: {
				name: 'testRoot',
				exclusiveToUser: this.exclusiveUser && this.exclusiveUser.id || undefined
			}
		});

sunPrimitives.forEach((prim) => {
                // Add a collider so that the behavior system will work properly on Unity host apps.
                const center = { x: 0, y: 0, z: 0 } as MRESDK.Vector3Like;
                const radius = 3;
                prim.setCollider('sphere', false, center, radius);

                const buttonBehavior = prim.setBehavior(MRESDK.ButtonBehavior);

                buttonBehavior.onClick('pressed', () => {
                    if (this.animationsRunning) {
                        this.pauseAnimations();
                        this.animationsRunning = false;
                    } else {
                        this.resumeAnimations();
                        this.animationsRunning = true;
                    }
                });

                buttonBehavior.onHover('enter', () => {
                    console.log(`Hover entered on ${sunEntity.model.name}.`);
                });

                buttonBehavior.onHover('exit', () => {

private createBody(bodyName: string) {
        console.log(`Loading ${bodyName}`);

        const facts = database[bodyName];

        const distanceMultiplier = Math.pow(facts.distance, 1 / 3);
        const scaleMultiplier = Math.pow(facts.diameter, 1 / 3) / 25;

        const positionValue = { x: distanceMultiplier, y: 0, z: 0 };
        const scaleValue = { x: scaleMultiplier / 2, y: scaleMultiplier / 2, z: scaleMultiplier / 2 };
        const obliquityValue = MRESDK.Quaternion.RotationAxis(
            MRESDK.Vector3.Forward(), facts.obliquity * MRESDK.DegreesToRadians);
        const inclinationValue = MRESDK.Quaternion.RotationAxis(
            MRESDK.Vector3.Forward(), facts.inclination * MRESDK.DegreesToRadians);

        // Object layout for celestial body is:
        //  inclination                 -- orbital plane. centered on sol and tilted
        //      position                -- position of center of celestial body (orbits sol)
        //          label               -- centered above position. location of label.
        //          obliquity0          -- centered on position. hidden node to account
        //                                 for the fact that obliquity is a world-relative axis
        //              obliquity1      -- centered on position. tilt of obliquity axis
        //                  model       -- centered on position. the celestial body (rotates)
        try {
            const inclination = MRESDK.Actor.CreateEmpty(this.context, {
                actor: {
                    name: `${bodyName}-inclination`,
                    transform: {
                        rotation: inclinationValue
                    }

private createBody(bodyName: string) {
        console.log(`Loading ${bodyName}`);

        const facts = database[bodyName];

        const distanceMultiplier = Math.pow(facts.distance, 1 / 3);
        const scaleMultiplier = Math.pow(facts.diameter, 1 / 3) / 25;

        const positionValue = { x: distanceMultiplier, y: 0, z: 0 };
        const scaleValue = { x: scaleMultiplier / 2, y: scaleMultiplier / 2, z: scaleMultiplier / 2 };
        const obliquityValue = MRESDK.Quaternion.RotationAxis(
            MRESDK.Vector3.Forward(), facts.obliquity * MRESDK.DegreesToRadians);
        const inclinationValue = MRESDK.Quaternion.RotationAxis(
            MRESDK.Vector3.Forward(), facts.inclination * MRESDK.DegreesToRadians);

        // Object layout for celestial body is:
        //  inclination                 -- orbital plane. centered on sol and tilted
        //      position                -- position of center of celestial body (orbits sol)
        //          label               -- centered above position. location of label.
        //          obliquity0          -- centered on position. hidden node to account
        //                                 for the fact that obliquity is a world-relative axis
        //              obliquity1      -- centered on position. tilt of obliquity axis
        //                  model       -- centered on position. the celestial body (rotates)
        try {
            const inclination = MRESDK.Actor.CreateEmpty(this.context, {
                actor: {
                    name: `${bodyName}-inclination`,
                    transform: {
                        app: { rotation: inclinationValue }
                    }

* Licensed under the MIT License.
 */

import { WebHost } from '@microsoft/mixed-reality-extension-sdk';
import dotenv from 'dotenv';
import { resolve as resolvePath } from 'path';
import App from './app';

process.on('uncaughtException', err => console.log('uncaughtException', err));
process.on('unhandledRejection', reason => console.log('unhandledRejection', reason));

// Read .env if file exists
dotenv.config();

// Start listening for connections, and serve static files
const server = new WebHost({
	// baseUrl: 'http://.ngrok.io',
	baseDir: resolvePath(__dirname, '../public')
});

// Handle new application sessions
server.adapter.onConnection(context => new App(context, server.baseUrl));

import { log, WebHost } from '@microsoft/mixed-reality-extension-sdk';
import dotenv from 'dotenv';
import { resolve as resolvePath } from 'path';
import App from './app';

// Read .env if file exists
dotenv.config();

process.on('uncaughtException', err => console.log('uncaughtException', err));
process.on('unhandledRejection', reason => console.log('unhandledRejection', reason));

log.enable('app');

// Start listening for connections, and serve static files
const server = new WebHost({
    // baseUrl: 'http://.ngrok.io',
    baseDir: resolvePath(__dirname, '../public')
});

// Handle new application sessions
server.adapter.onConnection(context => new App(context, server.baseUrl));

import { log, WebHost } from '@microsoft/mixed-reality-extension-sdk';
import dotenv from 'dotenv';
import { resolve as resolvePath } from 'path';
import App from './app';

// Read .env if file exists
dotenv.config();

process.on('uncaughtException', err => console.log('uncaughtException', err));
process.on('unhandledRejection', reason => console.log('unhandledRejection', reason));

log.enable('app');

// Start listening for connections, and serve static files
const server = new WebHost({
    // baseUrl: 'http://.ngrok.io',
    baseDir: resolvePath(__dirname, '../public')
});

// Handle new application sessions
server.adapter.onConnection(context => new App(context, server.baseUrl));

import { log, WebHost } from '@microsoft/mixed-reality-extension-sdk';
import dotenv from 'dotenv';
import { resolve as resolvePath } from 'path';
import App from './app';

// Read .env if file exists
dotenv.config();

process.on('uncaughtException', err => console.log('uncaughtException', err));
process.on('unhandledRejection', reason => console.log('unhandledRejection', reason));

log.enable('app');

// Start listening for connections, and serve static files
const server = new WebHost({
    // baseUrl: 'http://.ngrok.io',
    baseDir: resolvePath(__dirname, '../public')
});

// Handle new application sessions
server.adapter.onConnection(context => new App(context, server.baseUrl));

/* Sample .env file:
 *  PORT=80
 *  BASE_URL=http://.ngrok.io
 *  MRE_LOGGING=app:error,network,network-content
 */

import { WebHost } from '@microsoft/mixed-reality-extension-sdk';
import { resolve as resolvePath } from 'path';
import App from './app';

process.on('uncaughtException', err => console.log('uncaughtException', err));
process.on('unhandledRejection', reason => console.log('unhandledRejection', reason));

// Start listening for connections, and serve static files
const server = new WebHost({
	baseDir: resolvePath(__dirname, '../public')
});

// Handle new application sessions
server.adapter.onConnection(context => new App(context, server.baseUrl));