-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (94 loc) · 3.44 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Three.js - Webgl - Interactions</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="model-container">
<aside class="explanations">
Commands :<br />
Use mouse left to rotate the scene, mouse right to move it.<br />
On the model, use <b>CTRL + mouse left</b> to affect/deselect a face to a new Control
Point.<br />
Hold the mouse button and drag to select more faces.
</aside>
<aside class="control-points-list">
<h3>Control Points</h3>
<ul class="list"></ul>
</aside>
<div class="povs">
<aside class="view-commands">
<h3>Points of View</h3>
<button name="reset">Reset to perspective view</button>
<button name="opposite">Opposite perspective</button>
</aside>
<aside class="model-positions">
<h3>Model Positions</h3>
<button name="face">Face</button>
<button name="behind">Behind</button>
<button name="left">Left</button>
<button name="right">Right</button>
<button name="above">Above</button>
<button name="below">Below</button>
</aside>
</div>
<button id="fullscreen"></button>
</section>
<script>
// Checks for WebGL v1.0 in Browser / Graphic Card
// source: https://threejs.org/examples/js/WebGL.js
function isWebGLAvailable() {
try {
const canvas = document.createElement('canvas');
return !!(
window.WebGLRenderingContext &&
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
);
} catch (error) {
return false;
}
}
function getWebGLErrorMessage() {
const version = 1;
const names = {
1: 'WebGL',
2: 'WebGL 2',
};
const contexts = {
1: window.WebGLRenderingContext,
2: window.WebGL2RenderingContext,
};
const platform = contexts[version] ? 'graphics card' : 'browser';
const message = `Your ${platform} does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">${
names[version]
}</a>`;
const element = document.createElement('div');
element.id = 'webglmessage';
element.style.fontFamily = 'monospace';
element.style.fontSize = '13px';
element.style.fontWeight = 'normal';
element.style.textAlign = 'center';
element.style.background = '#fff';
element.style.color = '#000';
element.style.padding = '1.5em';
element.style.width = '400px';
element.style.margin = '5em auto 0';
element.innerHTML = message;
return element;
}
</script>
<script src="https://unpkg.com/three"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<script src="./Scene.js"></script>
<script src="./BusinessLogic.js"></script>
<script src="./app.js"></script>
</body>
</html>