forked from xeolabs/scenejs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
effects_stereo.html
135 lines (108 loc) · 4.61 KB
/
effects_stereo.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
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<title>SceneJS Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
</style>
<script src="../api/latest/scenejs.min.js"></script>
<script src="libs/dat.gui.min.js"></script>
<link href="css/styles.css" rel="stylesheet"/>
</head>
<body>
<div id="infoDark">
<a href="http://scenejs.org">SceneJS</a> - Stereo effect with orbiting camera
<br>
drag mouse to orbit it, mouse wheel to zoom in and out
</div>
<script>
//-----------------------------------------------------------------------------------------------------------------
// Using an "effects/stereo" node in combination with a "cameras/orbit"
//-----------------------------------------------------------------------------------------------------------------
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
pluginPath: "../api/latest/plugins"
});
// Create scene
var scene = SceneJS.createScene({
nodes: [
// Mouse-orbited camera, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
{
type: "cameras/orbit",
yaw: 40,
pitch: -20,
zoom: 10,
zoomSensitivity: 1.0,
eye: { x: 0, y: 0, z: 10 },
look: { x: 0, y: 0, z: 0 },
spin: 0.1, // Spin slowly
nodes: [
// Stereo effect, implemented by plugin at:
// http://scenejs.org/api/latest/plugins/node/effects/stereo.js
{
type: "effects/stereo",
id: "myStereo",
eyeSep: 1.1, // Eye separation
focalLength: 500, // Focal length
nodes: [
// Cloudy sea skybox, implemented by plugin at:
// http://scenejs.org/api/latest/plugins/node/skybox/cloudySea.js
{
type: "skybox/numberedGrid",
size: 5000 // Box half-size on each axis - default is 5000
},
// The reflection cube map
// Images taken from: http://hristo.oskov.com/projects/cs418/mp3/
{
type: "reflect/numberedGrid",
intensity: 0.5,
nodes: [
// Randomly scattered boxes, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/geometry/randomObjects.js
{
type: "geometry/randomObjects",
numObjects: 1000
}
]
}
]
}
]
}
]
});
// Get stereo effect node and bind a GUI to it to play with it
scene.getNode("myStereo",
function (myStereo) {
var Menu = function () {
this["eyeSep"] = myStereo.getEyeSep();
this["focalLength"] = myStereo.getFocalLength();
var self = this;
// This is actually quite inefficient because it continually updates
// the scene graph, forcing frames to continually re-render.
// Your GPU's not going to like it, but it's just for a quick and dirty demo.
var update = function () {
myStereo.setEyeSep(self["eyeSep"]);
myStereo.setFocalLength(self["focalLength"]);
requestAnimationFrame(update);
};
update();
};
var gui = new dat.GUI();
var folder = gui.addFolder("effects/stereo '" + myStereo.getId() + "'");
var menu = new Menu();
folder.add(menu, 'eyeSep', 0.0, 20.0);
folder.add(menu, 'focalLength', 1, 50.0);
folder.open();
});
</script>
</body>
</html>