forked from kevinroast/phoria.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test0.html
122 lines (112 loc) · 4.19 KB
/
test0.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Phoria - Dev test page 0</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);
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
var scene = new Phoria.Scene();
scene.camera.position = {x:0.0, y:5.0, z:-15.0};
scene.perspective.aspect = canvas.width / canvas.height;
scene.viewport.width = canvas.width;
scene.viewport.height = canvas.height;
// create a canvas renderer
var renderer = new Phoria.CanvasRenderer(canvas);
// add a grid to help visualise camera position etc.
var plane = Phoria.Util.generateTesselatedPlane(8,8,0,20);
scene.graph.push(Phoria.Entity.create({
points: plane.points,
edges: plane.edges,
polygons: plane.polygons,
style: {
drawmode: "wireframe",
shademode: "plain",
linewidth: 0.5,
objectsortmode: "back"
}
}));
var c = Phoria.Util.generateUnitCube();
var cube = Phoria.Entity.create({
points: c.points,
edges: c.edges,
polygons: c.polygons
});
scene.graph.push(cube);
scene.graph.push(new Phoria.DistantLight());
var pause = false;
var fnAnimate = function() {
if (!pause)
{
// rotate local matrix of the cube
cube.rotateY(0.5*Phoria.RADIANS);
// 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.open();
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();
f = gui.addFolder('Camera Up');
f.add(scene.camera.up, "x").min(-10).max(10).step(0.1);
f.add(scene.camera.up, "y").min(-10).max(10).step(0.1);
f.add(scene.camera.up, "z").min(-10).max(10).step(0.1);
f = gui.addFolder('Rendering');
f.add(cube.style, "drawmode", ["point", "wireframe", "solid"]);
f.add(cube.style, "shademode", ["plain", "lightsource"]);
f.add(cube.style, "fillmode", ["fill", "filltwice", "inflate", "fillstroke", "hiddenline"]);
f.open();
// start animation
requestAnimFrame(fnAnimate);
}
</script>
</head>
<body style="background-color: #bfbfbf">
<canvas id="canvas" width="768" height="512" style="background-color: #eee"></canvas>
<div><a style="color:#225588;text-decoration:none;" href="./index.html"><< Phoria demos</a></div>
</body>
</html>