stlviewer.html

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>ScubaTools Object Viewer</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" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
		<link rel="stylesheet" href="stlviewer.css" />
  		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

		<script src="https://threejs.org/build/three.js"></script>
		<script src="https://threejs.org/examples/js/Detector.js"></script>
		<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

    </head>
	<body>
		<div id="info">
			<div class="listcontainer">
				<h2>Available:</h2>
				<ul id="sortable1">
					<!-- PLACEHOLDER CYLINDERS -->
				</ul>
			</div>
			<div class="listcontainer">
				<h2>Selected:</h2>
				<ul id="sortable2">
					
				</ul>
			</div>

            <a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools -  
			<a href="https://threejs.org/" target="_blank">three.js</a> -
			STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>.
            <br/>
            Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom


		</div>

		<script src="stlviewer.js"></script>

		<script>
	     	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			var container;
			var camera, cameraTarget, scene, renderer;
			var m_spacer = new THREE.MeshPhongMaterial( {
                color: 0x736f6e, specular: 0x111111, shininess: 100 } );
 
/*
				var mapHeight = new THREE.TextureLoader().load( "img/rust1.jpg" );
				mapHeight.anisotropy = 4;
				mapHeight.repeat.set( 0.998, 0.998 );
				mapHeight.offset.set( 0.001, 0.001 );
				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
				mapHeight.format = THREE.RGBFormat;
				var m_cylinder = new THREE.MeshPhongMaterial( {
					color: 0x4682b4,
					specular: 0x222222,
					shininess: 25,
					bumpMap: mapHeight,
					bumpScale: 12
				} );
*/
            var m_cylinder = new THREE.MeshPhongMaterial( {
                color: 0x4682b4, specular: 0x111111, shininess: 200 } );
  			init();
			animate();

		</script><div><canvas style="width: 1589px; height: 711px;" height="711" width="1589"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas style="width: 80px; height: 48px; display: block;" height="48" width="80"></canvas><canvas style="width: 80px; height: 48px; display: none;" height="48" width="80"></canvas></div></div>
	

</body></html>