webgl-3d-viewer
Version:
A WebGL ThreeJS STL viewer implementation written in ES6
153 lines (122 loc) • 4.6 kB
HTML
<html>
<head>
<title>STL Viewer</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
<link href="css/stlviewer.css" rel="stylesheet">
<style>
.right-bottom .github-fork-ribbon {
background-color: #333;
}
</style>
<script src="vendor/three.js"></script>
<script src="vendor/jquery.js"></script>
<script src="vendor/dat.gui.min.js"></script>
<script src="vendor/stats.min.js"></script>
<script src="main.js"></script>
<script>
$(document).ready(function() {
// Enable Stats
var stats = new Stats();
stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb
// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '2px';
stats.domElement.style.left = '2px';
var ctl = document.getElementsByClassName('viewer__container')[0];
ctl.appendChild(stats.domElement);
var id = "stlviewer";
var config = {stats: stats, dragDrop: true, autoRotate: true, startupAnimation: true, zoom: true};
var viewer = new ModelViewer(document.getElementById(id),config);
window.viewer = viewer;
var gui = new dat.GUI();
var Configuration = function() {
this.color = "#c3b9b9";
this.BodyBgColor = "#000000";
this.wireframe = false;
this.plane = false;
this.boundingBox = false;
this.sphere = false;
this.axis = false;
this.autorotate = true;
this.material = true;
this.zoom = config.zoom;
this.model = '';
this.modelSamples = {
"3D Buddha (~3 MB)": "model/buddha_flat_bottom.stl",
"Guitar (~160 Kb)": "model/guitar.stl",
"Snowman (~200Kb)": "model/snowman.stl",
"3D Benchy (~11.2MB)": "model/3DBenchy.stl",
"3D Benchy broken (~11.2MB)": "model/3DBenchy-broken.stl",
"Gear link 4 broken.stl (~6.3MB)": "model/Gear-link-4-broken.stl",
"Decor (~11.3MB)": "model/decor.stl",
"Tri Lobe (~18.3 MB)": "model/tri_lobe.stl",
"Metatron (~35 MB)": "model/metatron.stl"
}
};
var cfg = new Configuration();
// Load default stl
viewer.load('model/buddha_flat_bottom.stl');
gui.addColor(cfg, 'color').onChange(function(colorValue) {
viewer.setModelColorByHexcode(colorValue);
});
/*
gui.addColor(cfg, 'BodyBgColor').onChange(function(colorValue) {
document.body.style.background = colorValue;
});
*/
gui.add(cfg, 'wireframe').onChange(function(val){
viewer.toggleModelWireframe();
});
gui.add(cfg, 'plane').onChange(function(val){
viewer.togglePlane();
});
gui.add(cfg, 'boundingBox').onChange(function(val){
viewer.toggleBoundingBox();
});
gui.add(cfg, 'sphere').onChange(function(val){
viewer.toggleSphere();
});
gui.add(cfg, 'axis').onChange(function(val){
viewer.toggleAxis();
});
gui.add(cfg, 'zoom').onChange(function(val) {
viewer.zoom = val
});
/*
gui.add(cfg, 'autorotate').onChange(function(val){
viewer.toggleAutoRotate();
});
*/
gui.add(cfg, 'material').onChange(function(val){
viewer.toggleMaterial();
});
gui.add(cfg, 'model', cfg.modelSamples).onChange(function(val){
viewer.load(val,function(){
viewer.setModelColorByHexcode(cfg.color);
});
});
var obj = { "Reload Viewer":function(){
viewer.reload();
}};
gui.add(obj,"Reload Viewer");
gui.close();
});
</script>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
</head>
<body>
<div class="viewer">
<div class="viewer__wrapper">
<div class="viewer__info">DragDrop STL file (binary / ascii) on to the viewer or select one from the control.</div>
<div class="viewer__container" id="stlviewer">
</div>
</div>
</div>
<div class="gfr__wrapper gfr__wrapper--right-bottom">
<div class="gfr__ribbon gfr__ribbon--black">
<a class="gfr__link" href="https://github.com/piscis/webgl-3d-viewer">Fork me on GitHub</a>
</div>
</div>
</body>
</html>