Mercurial > hg-public > scubatools / file comparison

comparison: stlviewer.html

stlviewer.html

changeset 8
63b6f80e09ef
child 11
098335a1d510
equal deleted inserted replaced
7:9b6867df00c9 8:63b6f80e09ef
1 <!DOCTYPE html>
2 <html lang="en"><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <title>ScubaTools Object Viewer</title>
5 <meta charset="utf-8">
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
15 #info {
16 color: #fff;
17 position: absolute;
18 top: 10px;
19 width: 100%;
20 text-align: center;
21 z-index: 100;
22 display:block;
23
24 }
25
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>
39 <body>
40 <div id="info">
41 <a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools -
42 <a href="https://threejs.org/" target="_blank">three.js</a> -
43 STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>.
44 <br/>
45 Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom
46 </div>
47
48 <script src="https://threejs.org/build/three.js"></script>
49 <script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
50 <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
51 <script>
52 var container;
53 var camera, cameraTarget, scene, renderer;
54
55 init();
56 animate();
57
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>
180
181
182 </body></html>

Mercurial Repository: scubatools

mercurial