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
|
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link rel="shortcut icon" href="lamp.ico" type="image/x-icon" />
<title>OCCT WebGL Viewer Sample</title>
</head>
<body>
<h2>OCCT WebGL Viewer Sample</h2>
<div>
<canvas id=occViewerCanvas oncontextmenu=event.preventDefault() tabindex=-1 style="border:0 none;background-color:#000" width="409" height="409"></canvas>
<img id=occlogo src="OCC_logo.png" style="position: absolute; left: 20px; top: 0px; z-index: 2;" />
</div>
<div>
<label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep">
<input type="button" value="Clear All" onclick="OccViewerModule.removeAllObjects()">
<input type="button" value="Fit All" onclick="OccViewerModule.fitAllObjects(true)">
</div>
<h4>Console output:</h4>
<p id="output"></p>
<script>
//! Resize canvas to fit into window.
function updateCanvasSize()
{
// size of canvas in logical (density-independent) units
var aSizeX = Math.min (window.innerWidth, window.screen.availWidth);
var aSizeY = Math.min (window.innerHeight, window.screen.availHeight);
aSizeX = Math.max (300, aSizeX - 30);
aSizeY = Math.max (300, aSizeY / 2);
occViewerCanvas.style.width = aSizeX + "px";
occViewerCanvas.style.height = aSizeY + "px";
// drawing buffer size (aka backing store)
var aDevicePixelRatio = window.devicePixelRatio || 1;
occViewerCanvas.width = aSizeX * aDevicePixelRatio;
occViewerCanvas.height = aSizeY * aDevicePixelRatio;
occlogo.style.top = (aSizeY - 30) + "px";
}
window.onresize = updateCanvasSize;
updateCanvasSize();
// capture keyboard input on mouse click
occViewerCanvas.tabIndex = -1;
occViewerCanvas.onclick = (theEvent) => { occViewerCanvas.focus() };
occViewerCanvas.focus();
//! Check browser support.
function isWasmSupported()
{
try {
if (typeof WebAssembly === "object"
&& typeof WebAssembly.instantiate === "function") {
const aDummyModule = new WebAssembly.Module (Uint8Array.of (0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
if (aDummyModule instanceof WebAssembly.Module)
{
return new WebAssembly.Instance(aDummyModule) instanceof WebAssembly.Instance;
}
}
} catch (e) {}
return false;
}
if (!isWasmSupported())
{
var anElement = document.getElementById('output');
anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>";
}
//! Handle file uploading.
fileInput.onchange = function()
{
if (fileInput.files.length == 0) { return; }
// Warning! Entire file is pre-loaded into memory.
var aFile = fileInput.files[0];
var aReader = new FileReader();
aReader.onload = function()
{
var aDataArray = new Uint8Array (aReader.result);
const aDataBuffer = OccViewerModule._malloc (aDataArray.length);
OccViewerModule.HEAPU8.set (aDataArray, aDataBuffer);
OccViewerModule.openFromMemory (aFile.name, aDataBuffer, aDataArray.length, true);
//OccViewerModule._free (aDataBuffer); will be freed by called method
OccViewerModule.displayGround (true);
occViewerCanvas.focus();
};
aReader.readAsArrayBuffer(aFile);
};
</script>
<script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>
</body>
</html>
|
