stemcstudio/README.md

## README.md

      
    Raw
  

              README.md
            
          
davinci-eight (WebGL) Graphics


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

<head>
    <base href="/">
    <style>
body {
    background-color: #cccccc;
}
    </style>
    <script src="/assets/js/stemcstudio-systemjs@1.0.0/system.js"></script>
</head>

<body>
    <script>
        System.config({
            "warnings": false,
            "map": {
                "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.57/dist/system/index.min.js"
            }
        });
    </script>
    <canvas id="my-canvas"></canvas>


    <script>
        System.register('./index.js', ['davinci-eight'], function(exports_1, context_1) {
            'use strict';
            var davinci_eight_1, engine, ambients, camera, dirLight, options, box, trackball, animate;
            var __moduleName = context_1 && context_1.id;
            return {
                setters: [function(davinci_eight_1_1) {
                    davinci_eight_1 = davinci_eight_1_1;
                }],
                execute: function() {
                    engine = new davinci_eight_1.Engine('my-canvas').size(500, 500).clearColor(0.1, 0.1, 0.1, 1).enable(davinci_eight_1.Capability.DEPTH_TEST);
                    ambients = [];
                    camera = new davinci_eight_1.PerspectiveCamera();
                    camera.eye.z = 5;
                    ambients.push(camera);
                    dirLight = new davinci_eight_1.DirectionalLight();
                    ambients.push(dirLight);
                    options = {
                        color: davinci_eight_1.Color.green,
                        mode: 'mesh'
                    };
                    box = new davinci_eight_1.Box(engine, options);
                    trackball = new davinci_eight_1.TrackballControls(camera, window);
                    trackball.subscribe(engine.canvas);
                    animate = function(timestamp) {
                        engine.clear();
                        trackball.update();
                        dirLight.direction.copy(camera.look).sub(camera.eye);
                        const t = timestamp * 0.001;
                        box.R.rotorFromGeneratorAngle({
                            xy: 0,
                            yz: 1,
                            zx: 0
                        }, t);
                        box.render(ambients);
                        requestAnimationFrame(animate);
                    };
                    requestAnimationFrame(animate);
                }
            };
        });
    </script>
    <script>
        System.defaultJSExtensions = true
        System.import('./index.js').catch(function(e) {
            console.error(e)
        })
    </script>
</body>

</html>

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

<head>
    <base href='/'>
    <link rel='stylesheet' href='style.css'>
</head>

<body>
    <canvas id='my-canvas'></canvas>
</body>

</html>

## index.ts
import {
    Box,
    BoxOptions,
    Capability,
    Color,
    DirectionalLight,
    Engine,
    Facet,
    PerspectiveCamera,
    TrackballControls
} from "davinci-eight"

const engine = new Engine("my-canvas")
    .size(500, 500)
    .clearColor(0.1, 0.1, 0.1, 1.0)
    .enable(Capability.DEPTH_TEST)

const ambients: Facet[] = []

const camera = new PerspectiveCamera()
camera.eye.z = 5
ambients.push(camera)

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

const options: BoxOptions = { color: Color.green, mode: "mesh" }
const box = new Box(engine, options)

const trackball = new TrackballControls(camera, window)
// Subscribe to mouse events from the canvas.
trackball.subscribe(engine.canvas)

/**
 * animate is the callback point for requestAnimationFrame.
 * This has been initialized with a function expression in order
 * to avoid issues associated with JavaScript hoisting.
 */
const animate = function(timestamp: number) {
    engine.clear()

    // Update the camera based upon mouse events received.
    trackball.update()

    // Keep the directional light pointing in the same direction as the camera.
    dirLight.direction.copy(camera.look).sub(camera.eye)

    const t = timestamp * 0.001

    box.R.rotorFromGeneratorAngle({ xy: 0, yz: 1, zx: 0 }, t)

    box.render(ambients)

    // This call keeps the animation going.
    requestAnimationFrame(animate)
}

// This call "primes the pump".
requestAnimationFrame(animate)

## package.json
{
    "description": "Eight Template",
    "dependencies": {
        "davinci-eight": "8.4.57"
    },
    "name": "davinci-eight-webgl-graphics",
    "version": "1.0.0",
    "author": "David Geo Holmes",
    "keywords": [
        "STEMCstudio",
        "template",
        "davinci-eight"
    ]
}

## studio.config.json
{
    "hideConfigFiles": false,
    "hideReferenceFiles": false,
    "linting": true,
    "noLoopCheck": false,
    "operatorOverloading": false,
    "overrides": [],
    "references": {},
    "showGeneratedFiles": false
}

## style.css
body {
    background-color: #cccccc;
}

## system.config.json
{
    "map": {
        "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.57/package.json"
    }
}

## tsconfig.json
{
    "allowJs": true,
    "checkJs": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "skipLibCheck": true,
    "sourceMap": false,
    "strict": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2016",
    "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"
        ],
        "quotemark": [
            true,
            "double",
            "avoid-escape"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}

## types.config.json
{
    "map": {
        "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.57/package.json"
    }
}
	<!DOCTYPE html>
	<html>

	<head>
	<base href="/">
	<style>
	body {
	background-color: #cccccc;
	}
	</style>
	<script src="/assets/js/stemcstudio-systemjs@1.0.0/system.js"></script>
	</head>

	<body>
	<script>
	System.config({
	"warnings": false,
	"map": {
	"davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.57/dist/system/index.min.js"
	}
	});
	</script>
	<canvas id="my-canvas"></canvas>


	<script>
	System.register('./index.js', ['davinci-eight'], function(exports_1, context_1) {
	'use strict';
	var davinci_eight_1, engine, ambients, camera, dirLight, options, box, trackball, animate;
	var __moduleName = context_1 && context_1.id;
	return {
	setters: [function(davinci_eight_1_1) {
	davinci_eight_1 = davinci_eight_1_1;
	}],
	execute: function() {
	engine = new davinci_eight_1.Engine('my-canvas').size(500, 500).clearColor(0.1, 0.1, 0.1, 1).enable(davinci_eight_1.Capability.DEPTH_TEST);
	ambients = [];
	camera = new davinci_eight_1.PerspectiveCamera();
	camera.eye.z = 5;
	ambients.push(camera);
	dirLight = new davinci_eight_1.DirectionalLight();
	ambients.push(dirLight);
	options = {
	color: davinci_eight_1.Color.green,
	mode: 'mesh'
	};
	box = new davinci_eight_1.Box(engine, options);
	trackball = new davinci_eight_1.TrackballControls(camera, window);
	trackball.subscribe(engine.canvas);
	animate = function(timestamp) {
	engine.clear();
	trackball.update();
	dirLight.direction.copy(camera.look).sub(camera.eye);
	const t = timestamp * 0.001;
	box.R.rotorFromGeneratorAngle({
	xy: 0,
	yz: 1,
	zx: 0
	}, t);
	box.render(ambients);
	requestAnimationFrame(animate);
	};
	requestAnimationFrame(animate);
	}
	};
	});
	</script>
	<script>
	System.defaultJSExtensions = true
	System.import('./index.js').catch(function(e) {
	console.error(e)
	})
	</script>
	</body>

	</html>
	import {
	Box,
	BoxOptions,
	Capability,
	Color,
	DirectionalLight,
	Engine,
	Facet,
	PerspectiveCamera,
	TrackballControls
	} from "davinci-eight"

	const engine = new Engine("my-canvas")
	.size(500, 500)
	.clearColor(0.1, 0.1, 0.1, 1.0)
	.enable(Capability.DEPTH_TEST)

	const ambients: Facet[] = []

	const camera = new PerspectiveCamera()
	camera.eye.z = 5
	ambients.push(camera)

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

	const options: BoxOptions = { color: Color.green, mode: "mesh" }
	const box = new Box(engine, options)

	const trackball = new TrackballControls(camera, window)
	// Subscribe to mouse events from the canvas.
	trackball.subscribe(engine.canvas)

	/**
	* animate is the callback point for requestAnimationFrame.
	* This has been initialized with a function expression in order
	* to avoid issues associated with JavaScript hoisting.
	*/
	const animate = function(timestamp: number) {
	engine.clear()

	// Update the camera based upon mouse events received.
	trackball.update()

	// Keep the directional light pointing in the same direction as the camera.
	dirLight.direction.copy(camera.look).sub(camera.eye)

	const t = timestamp * 0.001

	box.R.rotorFromGeneratorAngle({ xy: 0, yz: 1, zx: 0 }, t)

	box.render(ambients)

	// This call keeps the animation going.
	requestAnimationFrame(animate)
	}

	// This call "primes the pump".
	requestAnimationFrame(animate)
	{
	"description": "Eight Template",
	"dependencies": {
	"davinci-eight": "8.4.57"
	},
	"name": "davinci-eight-webgl-graphics",
	"version": "1.0.0",
	"author": "David Geo Holmes",
	"keywords": [
	"STEMCstudio",
	"template",
	"davinci-eight"
	]
	}
	{
	"hideConfigFiles": false,
	"hideReferenceFiles": false,
	"linting": true,
	"noLoopCheck": false,
	"operatorOverloading": false,
	"overrides": [],
	"references": {},
	"showGeneratedFiles": false
	}
	{
	"allowJs": true,
	"checkJs": true,
	"declaration": false,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": true,
	"skipLibCheck": true,
	"sourceMap": false,
	"strict": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es2016",
	"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"
	],
	"quotemark": [
	true,
	"double",
	"avoid-escape"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}