Skip to content

Instantly share code, notes, and snippets.

@mathdoodle
Last active February 24, 2018 18:56
Show Gist options
  • Save mathdoodle/0a22a10f83708b79aab4acc285d191a5 to your computer and use it in GitHub Desktop.
Save mathdoodle/0a22a10f83708b79aab4acc285d191a5 to your computer and use it in GitHub Desktop.
EIGHT Getting Started

EIGHT Project Template

Overview

A starter template for creating high-level 3D graphics using the the EIGHT library.

<!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>
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)
{
"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
}
body {
margin: 0;
background: blue;
}
canvas {
width: 500px;
height: 500px;
}
#stats {
position: absolute;
top: 0;
left: 0;
}
{
"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
}
{
"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