Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/README.md

Last active November 16, 2024 16:43
Show Gist options
  • Save stemcstudio/394d7777f6d3c37bd6fc6a1fe35748bf to your computer and use it in GitHub Desktop.
Save stemcstudio/394d7777f6d3c37bd6fc6a1fe35748bf to your computer and use it in GitHub Desktop.
Download ZIP
Eight Template
Raw
README.md

davinci-eight (WebGL) Graphics

Raw
generated.index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<style>
body {
background-color: #cccccc;
}
</style>
<script src="/assets/js/[email protected]/system.js"></script>
</head>
<body>
<script>
System.config({
"warnings": false,
"map": {
"davinci-eight": "https://cdn.jsdelivr.net/npm/[email protected]/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>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base href='/'>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<canvas id='my-canvas'></canvas>
</body>
</html>
Raw
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)
Raw
package.json
{
"description": "Eight Template",
"dependencies": {
"davinci-eight": "8.4.60"
},
"name": "davinci-eight-webgl-graphics",
"version": "1.0.0",
"author": "David Geo Holmes",
"keywords": [
"STEMCstudio",
"template",
"davinci-eight"
]
}
Raw
studio.config.json
{
"hideConfigFiles": false,
"hideReferenceFiles": false,
"linting": true,
"noLoopCheck": false,
"operatorOverloading": false,
"overrides": [],
"references": {},
"showGeneratedFiles": false
}
Raw
style.css
body {
background-color: #cccccc;
}
Raw
system.config.json
{
"map": {
"davinci-eight": "https://cdn.jsdelivr.net/npm/[email protected]/package.json"
}
}
Raw
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
}
Raw
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
}
}
Raw
types.config.json
{
"map": {
"davinci-eight": "https://cdn.jsdelivr.net/npm/[email protected]/package.json"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment