forked from xeolabs/scenejs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
geometry_heightmap_fogAndGrid.html
141 lines (119 loc) · 6.26 KB
/
geometry_heightmap_fogAndGrid.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
136
137
138
139
140
141
<!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>
<link href="css/styles.css" rel="stylesheet"/>
<body>
<div id="infoLight">
<a href="http://scenejs.org">SceneJS</a> - <a href="../api/latest/plugins/node/geometry/heightmap.js"
target="_other">heightmap</a> geometry with <a
href="../api/latest/plugins/node/shader/fog.js" target="_other">fog</a>, a <a
href="../api/latest/plugins/node/texture/procedural/grid.js" target="_other">grid</a> procedural texture and a
<a href="../api/latest/plugins/node/cameras/pickFlyOrbit.js" target="_other">pick-fly-orbit</a> camera
<br>
click on something to fly to that point
<br>
drag mouse to orbit it, mouse wheel to zoom in and out
</div>
<script>
// Demo of the "geometry/heightmap" custom node type, with an "shader/fog" node thrown in for fun.
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
pluginPath: "../api/latest/plugins"
});
// Create a scene
SceneJS.createScene({
nodes: [
// Mouse-controlled camera that orbits a ray-picked point
// implemented by plugin at http://scenejs.org/api/latest/plugins/node/cameras/orbitPick.js
{
type: "cameras/pickFlyOrbit",
yaw: -40,
pitch: -20,
maxPitch: -10,
minPitch: -80,
zoom: 800,
eye: { x: 0, y: 150, z: -1000 },
look: { x: 0, y: 150, z: 0 },
zoomSensitivity: 20.0,
showCursor: true,
cursorSize: 10.0,
nodes: [
// Fog effect, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/shader/fog.js
{
type: "shader/fog",
mode: "exp2", // Quadratic
density: 0.1, // Fog density
start: 100.0, // Near starting point
end: 1500.0, // Far ending point
color: { r: 0.0, g: 0.5, b: 0.0 }, // Fog color
nodes: [
// Override default lights with custom lights that happen to
// be the same as the default lights
{
type: "lights",
lights: [
{
mode: "ambient",
color: { r: 0.0, g: 0.5, b: 0.0 }
}
],
nodes: [
{
type: "material",
emit: 1,
nodes: [
// Procedural grid texture, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/procedural/grid.js
{
type: "texture/procedural/grid",
nodes: [
// Heightmap, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/geometry/heightmap.js
{
type: "geometry/heightmap",
// Texture image
src: 'textures/heightMap.jpg',
// Wireframe or solid - default is false
wire: false,
// Dimensions
xSize: 5000,
zSize: 5000,
ySize: 400,
// Segments on X and Z axis
xSegments: 200,
zSegments: 200
},
// Skybox node, implemented by plugin at
// http://scenejs.org/api/latest/plugins/node/skybox/grimmNight.js
{
type: "skybox/clouds"
}
]
}
]
}
]
}
]
}
]
}
]
}
);
</script>
</body>
</html>