stemcstudio/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Loading External Modules

Overview

This example demonstrates how to load modules that are external to tsCodeHub.
How it Works

Two files, system.config.json and types.config.json override the loading of modules when defined.
The type information is provided by types.config.json.
The runtime JavaScript is defined by system.config.json.
You may also define instead system.config.js.
System.config({
    "paths": {
        "cdn:": "https://unpkg.com/"  
    },
    "map": {
      "eight": "cdn:davinci-eight@6.1.3/build/browser/index.js"
    },
    "packages": {
        "eight": {
            "defaultExtension": "js"
        }
    }
});
Both of these files map module names to resource URL(s) that provide either the JavaScript (js) or type definitions (d.ts).
A current limitation is that the d.ts files must be flattened.
We use https://unpkg.com as the CDN because it is automatically mapped to NPM. Thus, it is only necessary to publish your packages (including d.ts files) to NPM to use them in tsCodeHub.
Copyright (c) 2015-2017 David Geo Holmes.

  
## index.html
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <canvas id='canvas3D'></canvas>
</body>

</html>

## index.ts
import { Geometric3 as G3, Color } from 'eight'
import { Engine, Capability, Scene } from 'eight'
import { Facet, PerspectiveCamera, DirectionalLight } from 'eight'
import { TrackballControls } from 'eight'
import { Box } from 'eight'

const e2 = G3.e2(true)
const e3 = G3.e3(true)

const engine = new Engine('canvas3D')
    .size(500, 500)
    .clearColor(0.1, 0.1, 0.1, 1.0)
    .enable(Capability.DEPTH_TEST)

const scene = new Scene(engine)

const ambients: Facet[] = []

const camera = new PerspectiveCamera()
camera.eye = e2 + 3 * e3
ambients.push(camera)

const dirLight = new DirectionalLight()
ambients.push(dirLight)

const trackball = new TrackballControls(camera)
trackball.subscribe(engine.canvas)

const box = new Box(engine, { color: Color.blue })
scene.add(box)

const animate = function(timestamp: number) {

    engine.clear()

    trackball.update()

    dirLight.direction.copyVector(camera.look).subVector(camera.eye)

    box.attitude.rotorFromAxisAngle(e2, timestamp * 0.001)

    scene.render(ambients)

    requestAnimationFrame(animate)
}

requestAnimationFrame(animate)

## package.json
{
  "description": "Loading External Modules",
  "dependencies": {},
  "linting": true,
  "name": "loading-external-modules",
  "version": "1.0.0",
  "author": "David Geo Holmes",
  "keywords": [
    "loading",
    "unpkg",
    "external"
  ],
  "operatorOverloading": true
}

## style.css
body {
    background-color: white;
    font-family: Roboto, Arial, sans-serif;
    color: #333333;
}

h1 {
    font-family: Arial, sans-serif;
    color: #333333;
}

h2 {
    font-family: Arial, sans-serif;
    color: #333333;
}

h3 {
    font-family: Arial, sans-serif;
    color: #333333;
}

h4 {
    font-family: Arial, sans-serif;
    color: #333333;
}

h5 {
    font-family: Arial, sans-serif;
    color: #333333;
}

#errors {
    background: #ff99bb;
    color: #333333;
    display: 'none';
    margin: -20px -20px 20px;
    padding: 20px;
    white-space: 'pre-wrap';
}

#warnings {
    background: #ffffb3;
    color: #333333;
    display: 'none';
    margin: -20px -20px 20px;
    padding: 20px;
    white-space: 'pre-wrap';
}

#infos {
    background: #99ff99;
    color: #333333;
    display: 'none';
    margin: -20px -20px 20px;
    padding: 20px;
    white-space: 'pre-wrap';
}

## system.config.json
{
    "paths": {
        "cdn:": "https://unpkg.com/"
    },
    "map": {
      "eight": "cdn:davinci-eight@8.4.3/build/browser/index.js"
    },
    "packages": {
        "eight": {
            "defaultExtension": "js"
        }
    }
}

## tsconfig.json
{
    "allowJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "traceResolution": true
}

## tslint.json
{
    "rules": {
        "array-type": [
            true,
            "array"
        ],
        "curly": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "eofline": true,
        "forin": true,
        "jsdoc-format": true,
        "new-parens": true,
        "no-conditional-assignment": false,
        "no-consecutive-blank-lines": true,
        "no-construct": true,
        "no-for-in-array": true,
        "no-inferrable-types": [
            true
        ],
        "no-magic-numbers": false,
        "no-shadowed-variable": true,
        "no-string-throw": true,
        "no-trailing-whitespace": [
            true,
            "ignore-jsdoc"
        ],
        "no-var-keyword": true,
        "one-variable-per-declaration": [
            true,
            "ignore-for-loop"
        ],
        "prefer-const": true,
        "prefer-for-of": true,
        "prefer-function-over-method": false,
        "prefer-method-signature": true,
        "radix": true,
        "semicolon": [
            true,
            "never"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}

## types.config.json
{
    "map": {
        "eight": "https://unpkg.com/davinci-eight@8.4.3/build/browser/index.d.ts"
    }
}
	<!DOCTYPE html>
	<html>

	<head>
	</head>

	<body>
	<canvas id='canvas3D'></canvas>
	</body>

	</html>
	import { Geometric3 as G3, Color } from 'eight'
	import { Engine, Capability, Scene } from 'eight'
	import { Facet, PerspectiveCamera, DirectionalLight } from 'eight'
	import { TrackballControls } from 'eight'
	import { Box } from 'eight'

	const e2 = G3.e2(true)
	const e3 = G3.e3(true)

	const engine = new Engine('canvas3D')
	.size(500, 500)
	.clearColor(0.1, 0.1, 0.1, 1.0)
	.enable(Capability.DEPTH_TEST)

	const scene = new Scene(engine)

	const ambients: Facet[] = []

	const camera = new PerspectiveCamera()
	camera.eye = e2 + 3 * e3
	ambients.push(camera)

	const dirLight = new DirectionalLight()
	ambients.push(dirLight)

	const trackball = new TrackballControls(camera)
	trackball.subscribe(engine.canvas)

	const box = new Box(engine, { color: Color.blue })
	scene.add(box)

	const animate = function(timestamp: number) {

	engine.clear()

	trackball.update()

	dirLight.direction.copyVector(camera.look).subVector(camera.eye)

	box.attitude.rotorFromAxisAngle(e2, timestamp * 0.001)

	scene.render(ambients)

	requestAnimationFrame(animate)
	}

	requestAnimationFrame(animate)
	{
	"description": "Loading External Modules",
	"dependencies": {},
	"linting": true,
	"name": "loading-external-modules",
	"version": "1.0.0",
	"author": "David Geo Holmes",
	"keywords": [
	"loading",
	"unpkg",
	"external"
	],
	"operatorOverloading": true
	}
	body {
	background-color: white;
	font-family: Roboto, Arial, sans-serif;
	color: #333333;
	}

	h1 {
	font-family: Arial, sans-serif;
	color: #333333;
	}

	h2 {
	font-family: Arial, sans-serif;
	color: #333333;
	}

	h3 {
	font-family: Arial, sans-serif;
	color: #333333;
	}

	h4 {
	font-family: Arial, sans-serif;
	color: #333333;
	}

	h5 {
	font-family: Arial, sans-serif;
	color: #333333;
	}

	#errors {
	background: #ff99bb;
	color: #333333;
	display: 'none';
	margin: -20px -20px 20px;
	padding: 20px;
	white-space: 'pre-wrap';
	}

	#warnings {
	background: #ffffb3;
	color: #333333;
	display: 'none';
	margin: -20px -20px 20px;
	padding: 20px;
	white-space: 'pre-wrap';
	}

	#infos {
	background: #99ff99;
	color: #333333;
	display: 'none';
	margin: -20px -20px 20px;
	padding: 20px;
	white-space: 'pre-wrap';
	}
	{
	"paths": {
	"cdn:": "https://unpkg.com/"
	},
	"map": {
	"eight": "cdn:davinci-eight@8.4.3/build/browser/index.js"
	},
	"packages": {
	"eight": {
	"defaultExtension": "js"
	}
	}
	}
	{
	"allowJs": false,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": false,
	"sourceMap": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es5",
	"traceResolution": true
	}
	{
	"rules": {
	"array-type": [
	true,
	"array"
	],
	"curly": false,
	"comment-format": [
	true,
	"check-space"
	],
	"eofline": true,
	"forin": true,
	"jsdoc-format": true,
	"new-parens": true,
	"no-conditional-assignment": false,
	"no-consecutive-blank-lines": true,
	"no-construct": true,
	"no-for-in-array": true,
	"no-inferrable-types": [
	true
	],
	"no-magic-numbers": false,
	"no-shadowed-variable": true,
	"no-string-throw": true,
	"no-trailing-whitespace": [
	true,
	"ignore-jsdoc"
	],
	"no-var-keyword": true,
	"one-variable-per-declaration": [
	true,
	"ignore-for-loop"
	],
	"prefer-const": true,
	"prefer-for-of": true,
	"prefer-function-over-method": false,
	"prefer-method-signature": true,
	"radix": true,
	"semicolon": [
	true,
	"never"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}
	{
	"map": {
	"eight": "https://unpkg.com/davinci-eight@8.4.3/build/browser/index.d.ts"
	}
	}