Mercurial > hg-public > scubatools / file comparison

comparison: stlviewer.html

stlviewer.html

changeset 11
098335a1d510
parent 8
63b6f80e09ef
child 12
b3cf0176512e
equal deleted inserted replaced
10:d26669bf424e 11:098335a1d510
2 <html lang="en"><head> 2 <html lang="en"><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <title>ScubaTools Object Viewer</title> 4 <title>ScubaTools Object Viewer</title>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7 <style>
8 body {
9 font-family: Monospace;
10 background-color: #000000;
11 margin: 0px;
12 overflow: hidden;
13 }
14 7
15 #info { 8 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
16 color: #fff; 9 <link rel="stylesheet" href="stlviewer.css" />
17 position: absolute; 10 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
18 top: 10px; 11 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
19 width: 100%;
20 text-align: center;
21 z-index: 100;
22 display:block;
23 12
24 } 13 <script src="https://threejs.org/build/three.js"></script>
14 <script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
15 <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
25 16
26 a { color: skyblue }
27 .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
28 .highlight { background:orange; color:#fff; }
29
30 span {
31 display: inline-block;
32 width: 60px;
33 float: left;
34 text-align: center;
35 }
36
37 </style>
38 </head> 17 </head>
39 <body> 18 <body>
40 <div id="info"> 19 <div id="info">
20 <div class="listcontainer">
21 <h2>Available:</h2>
22 <ul id="sortable1">
23 <!-- PLACEHOLDER CYLINDERS -->
24 </ul>
25 </div>
26 <div class="listcontainer">
27 <h2>Selected:</h2>
28 <ul id="sortable2">
29
30 </ul>
31 </div>
32
41 <a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools - 33 <a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools -
42 <a href="https://threejs.org/" target="_blank">three.js</a> - 34 <a href="https://threejs.org/" target="_blank">three.js</a> -
43 STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>. 35 STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>.
44 <br/> 36 <br/>
45 Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom 37 Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom
38
39
46 </div> 40 </div>
47 41
48 <script src="https://threejs.org/build/three.js"></script> 42 <script src="stlviewer.js"></script>
49 <script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script> 43
50 <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
51 <script> 44 <script>
52 var container; 45 var container;
53 var camera, cameraTarget, scene, renderer; 46 var camera, cameraTarget, scene, renderer;
54 47
55 init(); 48 init();
56 animate(); 49 animate();
57 50
58 function init() {
59 container = document.createElement( 'div' );
60 document.body.appendChild( container );
61
62 camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
63 camera.position.set( 3, 0.35, 3 );
64
65 cameraTarget = new THREE.Vector3( 0, -0.25, 0 );
66
67 scene = new THREE.Scene();
68 scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
69
70 var controls = new THREE.OrbitControls(camera);
71
72 // Ground
73
74 var plane = new THREE.Mesh(
75 new THREE.PlaneBufferGeometry( 40, 40 ),
76 new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
77 );
78 plane.rotation.x = -Math.PI/2;
79 plane.position.y = -0.5;
80 scene.add( plane );
81
82 plane.receiveShadow = true;
83
84 // ASCII file
85
86 var loader = new THREE.STLLoader();
87 loader.load( './test.stl', function ( geometry ) {
88
89 var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
90 var mesh = new THREE.Mesh( geometry, material );
91
92 mesh.position.set( 0, -0.25, 0 );
93 mesh.rotation.set( 0, Math.PI / 2, 0 );
94 mesh.scale.set( 0.01, 0.01, 0.01 );
95
96 mesh.castShadow = true;
97 //mesh.receiveShadow = true;
98
99 scene.add( mesh );
100
101 } );
102
103 // Lights
104
105 scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
106
107 addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
108 //addShadowedLight( 0.5, 1, -1, 0xffaa00, 1 );
109 // renderer
110
111 renderer = new THREE.WebGLRenderer( { antialias: true } );
112 renderer.setClearColor( scene.fog.color );
113 renderer.setPixelRatio( window.devicePixelRatio );
114 renderer.setSize( window.innerWidth, window.innerHeight );
115
116 renderer.gammaInput = true;
117 renderer.gammaOutput = true;
118
119 renderer.shadowMap.enabled = true;
120 renderer.shadowMap.renderReverseSided = false;
121
122 container.appendChild( renderer.domElement );
123
124 window.addEventListener( 'resize', onWindowResize, false );
125
126 }
127
128 function addShadowedLight( x, y, z, color, intensity ) {
129
130 var directionalLight = new THREE.DirectionalLight( color, intensity );
131 directionalLight.position.set( x, y, z );
132 scene.add( directionalLight );
133
134 directionalLight.castShadow = true;
135
136 var d = 1;
137 directionalLight.shadow.camera.left = -d;
138 directionalLight.shadow.camera.right = d;
139 directionalLight.shadow.camera.top = d;
140 directionalLight.shadow.camera.bottom = -d;
141
142 directionalLight.shadow.camera.near = 1;
143 directionalLight.shadow.camera.far = 4;
144
145 directionalLight.shadow.mapSize.width = 1024;
146 directionalLight.shadow.mapSize.height = 1024;
147
148 directionalLight.shadow.bias = -0.005;
149
150 }
151
152 function onWindowResize() {
153
154 camera.aspect = window.innerWidth / window.innerHeight;
155 camera.updateProjectionMatrix();
156
157 renderer.setSize( window.innerWidth, window.innerHeight );
158
159 }
160
161 function animate() {
162
163 requestAnimationFrame( animate );
164
165 //render();
166 renderer.render( scene, camera );
167 //stats.update();
168
169 }
170
171 function render() {
172 var timer = Date.now() * 0.0005;
173 camera.position.x = Math.cos( timer ) * 3;
174 camera.position.z = Math.sin( timer ) * 3;
175 camera.lookAt( cameraTarget );
176 renderer.render( scene, camera );
177 }
178
179 </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> 51 </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>
180 52
181 53
182 </body></html> 54 </body></html>

Mercurial Repository: scubatools

mercurial