A starter template for creating high-level 3D graphics using the the EIGHT
library.
Last active
February 24, 2018 18:56
-
-
Save mathdoodle/0a22a10f83708b79aab4acc285d191a5 to your computer and use it in GitHub Desktop.
EIGHT Getting Started
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<base href='/'> | |
<script src='https://jspm.io/[email protected]'></script> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<canvas id='canvas'></canvas> | |
<script> | |
System.defaultJSExtensions = true | |
System.import('./index') | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Geometric3 } from 'davinci-eight' | |
import { Engine, Capability, Scene } from 'davinci-eight' | |
import { Facet, PerspectiveCamera, DirectionalLight } from 'davinci-eight' | |
import { TrackballControls } from 'davinci-eight' | |
import { Color } from 'davinci-eight' | |
import { Box, Sphere, Track } from 'davinci-eight' | |
/** | |
* Standard basis vector in x-direction. | |
*/ | |
const e1 = Geometric3.e1(true) | |
/** | |
* Standard basis vector in y-direction. | |
*/ | |
// const e2 = Geometric3.e2(true) | |
/** | |
* Standard basis vector in z-direction. | |
*/ | |
// const e3 = Geometric3.e3(true) | |
/** | |
* Wrapper around the WebGLRenderingContext providing the ContextManager interface. | |
*/ | |
const engine = new Engine('canvas') | |
.size(500, 500) | |
.clearColor(0.1, 0.1, 0.1, 1.0) | |
.enable(Capability.DEPTH_TEST) | |
/** | |
* A collection of objects that can be rendered with a single draw method call. | |
*/ | |
const scene = new Scene(engine) | |
/** | |
* Rendering information that applies to all objects. | |
*/ | |
const ambients: Facet[] = [] | |
/** | |
* Provides the viewing point and perspective transformation. | |
*/ | |
const camera = new PerspectiveCamera() | |
camera.eye.scale(50) | |
ambients.push(camera) | |
/** | |
* Provides a light color and direction for Lambert shading. | |
*/ | |
const dirLight = new DirectionalLight() | |
ambients.push(dirLight) | |
/** | |
* Controls the camera by accumulating mouse movements then moving and rotating the camera. | |
*/ | |
const trackball = new TrackballControls(camera, window) | |
trackball.subscribe(engine.canvas) | |
// trackball.enableContextMenu() | |
// Create drawables such as Arrow, Box, Curve, Grid, Sphere, Cylinder. | |
// Add them to the scene here... | |
/** | |
* This is my red box | |
*/ | |
const box = new Box(engine) | |
box.X = 10 * e1 | |
box.color = new Color(1, 0, 0) | |
box.width = 5 | |
box.height = 5 | |
box.depth = .5 | |
// body.opacity = 0.4 | |
scene.add(box) | |
const particle = new Sphere(engine) | |
particle.radius = 0.3 | |
particle.X = -5 * e1 | |
particle.color = Color.cyan | |
scene.add(particle) | |
const track = new Track(engine) | |
const stats = new Stats() | |
document.body.appendChild(stats.domElement) | |
/** | |
* The increment of time which we advance each frame. | |
*/ | |
const Δt = 0.05 | |
let t = 0 | |
/** | |
* The (constant) velocity (vector) | |
*/ | |
const v = - 0.5 * e1 | |
/** | |
* Animates the scene. | |
*/ | |
const animate = function(_timestamp: number) { | |
stats.begin() | |
engine.clear() | |
trackball.update() | |
dirLight.direction.copy(camera.look).sub(camera.eye) | |
// Manupulate the X (Position) and R (Attitude) | |
// properties of your scene objects here... | |
if (t < 20) { | |
particle.X = particle.X + v * Δt | |
t = t + Δt | |
} | |
track.addPoint(particle.X) | |
track.render(ambients) | |
scene.render(ambients) | |
stats.end() | |
requestAnimationFrame(animate) | |
} | |
requestAnimationFrame(animate) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"description": "EIGHT Getting Started", | |
"dependencies": { | |
"davinci-eight": "7.3.1", | |
"stats.js": "0.16.0" | |
}, | |
"operatorOverloading": true, | |
"name": "eight-getting-started", | |
"version": "0.1.0", | |
"keywords": [ | |
"EIGHT", | |
"Track", | |
"mathdoodle" | |
], | |
"author": "David Geo Holmes", | |
"linting": true, | |
"hideConfigFiles": true | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
background: blue; | |
} | |
canvas { | |
width: 500px; | |
height: 500px; | |
} | |
#stats { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"allowJs": true, | |
"checkJs": true, | |
"declaration": true, | |
"emitDecoratorMetadata": true, | |
"experimentalDecorators": true, | |
"jsx": "react", | |
"module": "system", | |
"noImplicitAny": true, | |
"noImplicitReturns": true, | |
"noImplicitThis": true, | |
"noUnusedLocals": true, | |
"noUnusedParameters": true, | |
"preserveConstEnums": true, | |
"removeComments": false, | |
"skipLibCheck": true, | |
"sourceMap": true, | |
"strictNullChecks": true, | |
"suppressImplicitAnyIndexErrors": true, | |
"target": "es5", | |
"traceResolution": true | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment