Created
June 23, 2014 23:55
-
-
Save jasonparallel/7d6c1ed76e5114df2961 to your computer and use it in GitHub Desktop.
This file contains 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> | |
<meta charset="utf-8"> | |
<title>Phoria - Dev test page 6</title> | |
<script src="scripts/gl-matrix.js"></script> | |
<script src="scripts/phoria-util.js"></script> | |
<script src="scripts/phoria-entity.js"></script> | |
<script src="scripts/phoria-scene.js"></script> | |
<script src="scripts/phoria-renderer.js"></script> | |
<script src='scripts/dat.gui.min.js'></script> | |
<script> | |
var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || | |
window.mozRequestAnimationFrame || window.msRequestAnimationFrame || | |
function(c) {window.setTimeout(c, 15)}; | |
/** | |
Phoria | |
pho·ri·a (fôr-) | |
n. The relative directions of the eyes during binocular fixation on a given object | |
*/ | |
// bind to window onload event | |
window.addEventListener('load', onloadHandler, false); | |
var scene; | |
function onloadHandler() | |
{ | |
// get the canvas DOM element and the 2D drawing context | |
var canvas = document.getElementById('canvas'); | |
// create the scene and setup camera, perspective and viewport | |
scene = new Phoria.Scene(); | |
scene.camera.position = {x:0.0, y:2, z:-20.0}; | |
scene.camera.lookat = {x:0.0, y:2, z:0}; | |
scene.perspective.fov = 25; | |
scene.perspective.aspect = canvas.width / canvas.height; | |
scene.viewport.width = canvas.width; | |
scene.viewport.height = canvas.height; | |
// event handler to rotate the camera around the scene | |
var rotation = 0.0; | |
scene.onCamera(function(position, lookAt, up) { | |
var rotMatrix = mat4.create(); | |
mat4.rotateY(rotMatrix, rotMatrix, rotation); | |
rotation -= 0.01; | |
vec4.transformMat4(position, position, rotMatrix); | |
}); | |
// create a canvas renderer | |
var renderer = new Phoria.CanvasRenderer(canvas); | |
var a = Phoria.Entity.create({ | |
points: [{x:-1, y:1, z:1}, {x:1, y:1, z:1}, {x:1, y:-1, z:1}, {x:-1, y:-1, z:1}], | |
edges: [{a:0,b:1},{a:1,b:2}, {a:2,b:3}, {a:3,b:0}], | |
polygons: [{vertices:[0,1,2,3]}], | |
style: { | |
drawmode: "solid" | |
} | |
}); | |
//a.rotateY(Math.PI/2); | |
//a.translateX(5); | |
// a.rotateY(Math.PI); | |
scene.graph.push(a); | |
var pause = false; | |
var fnAnimate = function() { | |
if (!pause) | |
{ | |
// execute the model view 3D pipeline and render the scene | |
scene.modelView(); | |
renderer.render(scene); | |
} | |
requestAnimFrame(fnAnimate); | |
}; | |
// key binding | |
document.addEventListener('keydown', function(e) { | |
switch (e.keyCode) | |
{ | |
case 27: // ESC | |
pause = !pause; | |
break; | |
} | |
}, false); | |
// add GUI controls | |
var gui = new dat.GUI(); | |
var f = gui.addFolder('Perspective'); | |
f.add(scene.perspective, "fov").min(5).max(175); | |
f.add(scene.perspective, "near").min(1).max(100); | |
f.add(scene.perspective, "far").min(1).max(1000); | |
f = gui.addFolder('Camera LookAt'); | |
f.add(scene.camera.lookat, "x").min(-100).max(100); | |
f.add(scene.camera.lookat, "y").min(-100).max(100); | |
f.add(scene.camera.lookat, "z").min(-100).max(100); | |
f.open(); | |
f = gui.addFolder('Camera Position'); | |
f.add(scene.camera.position, "x").min(-100).max(100); | |
f.add(scene.camera.position, "y").min(-100).max(100); | |
f.add(scene.camera.position, "z").min(-100).max(100); | |
f.open(); | |
// start animation | |
requestAnimFrame(fnAnimate); | |
} | |
</script> | |
</head> | |
<body style="background-color: #bfbfbf"> | |
<canvas id="canvas" width="768" height="512" style="background-color: #fff"></canvas> | |
<div><a style="color:#225588;text-decoration:none;" href="./index.html"><< Phoria demos</a></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment