Tue, 04 Apr 2017 03:13:58 +0200
finished webrenderer
.htaccess | file | annotate | diff | comparison | revisions | |
stlviewer.css | file | annotate | diff | comparison | revisions | |
stlviewer.html | file | annotate | diff | comparison | revisions | |
stlviewer.js | file | annotate | diff | comparison | revisions |
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.htaccess Tue Apr 04 03:13:58 2017 +0200 @@ -0,0 +1,11 @@ +<ifmodule mod_headers.c> + <filesmatch "\\.(stl)$"> + Header set Cache-Control "max-age=2592000, private" + </filesmatch> + <filesmatch "\\.(css)$"> + Header set Cache-Control "max-age=604800, public" + </filesmatch> + <filesmatch "\\.(js)$"> + Header set Cache-Control "max-age=216000, private" + </filesmatch> +</ifmodule> \ No newline at end of file
--- a/stlviewer.css Tue Apr 04 00:47:22 2017 +0200 +++ b/stlviewer.css Tue Apr 04 03:13:58 2017 +0200 @@ -31,7 +31,7 @@ #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; - min-height: 20px; + /*min-height: 20px;*/ list-style-type: none; margin: 0; padding: 5px 0 0 0; @@ -48,7 +48,11 @@ .listcontainer { width: 157px; - height: 300px; - overflow-y: scroll; + height: 500px; + overflow-y: auto; overflow-x: hidden; + float: left; +} +.listcontainer ul { + min-height: 420px; } \ No newline at end of file
--- a/stlviewer.html Tue Apr 04 00:47:22 2017 +0200 +++ b/stlviewer.html Tue Apr 04 03:13:58 2017 +0200 @@ -11,6 +11,7 @@ <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> @@ -42,10 +43,30 @@ <script src="stlviewer.js"></script> <script> + if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container; var camera, cameraTarget, scene, renderer; - - init(); + 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>
--- a/stlviewer.js Tue Apr 04 00:47:22 2017 +0200 +++ b/stlviewer.js Tue Apr 04 03:13:58 2017 +0200 @@ -25,7 +25,7 @@ function clear_scene() { scene.children.forEach(function(v){ if(v.stlfile === true) { - v.material.dispose(); + //v.material.dispose(); v.geometry.dispose(); scene.remove(v); } @@ -59,12 +59,14 @@ if (obj[5] == "") { // spacer filename = "stl/spacer_" + obj[4][0] + '.stl'; + material = 'm_spacer'; } else { // cylinder filename = "stl/cylinder_" + obj[5] + '.stl'; + material = 'm_cylinder'; } position = [data.scale3d * 0.01 * obj[0], 0, 0]; - loadSTL(filename, null, position); + loadSTL(filename, material + "", position); } } @@ -75,10 +77,16 @@ //console.log(filename, position); var loader = new THREE.STLLoader(); loader.load( filename, function ( geometry ) { - if (!material) + /*if (!material) var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } ); + else {*/ + if (material == 'm_spacer') material = m_spacer; + else if (material == 'm_cylinder') material = m_cylinder; + //} + var mesh = new THREE.Mesh( geometry, material ); + //assignUVs(mesh.geometry); mesh["stlfile"] = true; if (!position) mesh.position.set( 0, -0.25, 0 ); else mesh.position.set( position[0], position[1], position[2] ); @@ -139,7 +147,7 @@ renderer.gammaOutput = true; renderer.shadowMap.enabled = true; - renderer.shadowMap.renderReverseSided = true; + renderer.shadowMap.renderReverseSided = false; container.appendChild( renderer.domElement ); @@ -196,4 +204,29 @@ camera.position.z = Math.sin( timer ) * 3; camera.lookAt( cameraTarget ); renderer.render( scene, camera ); +} + +function assignUVs(geometry) { + + geometry.faceVertexUvs[0] = []; + + geometry.faces.forEach(function(face) { + + var components = ['x', 'y', 'z'].sort(function(a, b) { + return Math.abs(face.normal[a]) > Math.abs(face.normal[b]); + }); + + var v1 = geometry.vertices[face.a]; + var v2 = geometry.vertices[face.b]; + var v3 = geometry.vertices[face.c]; + + geometry.faceVertexUvs[0].push([ + new THREE.Vector2(v1[components[0]], v1[components[1]]), + new THREE.Vector2(v2[components[0]], v2[components[1]]), + new THREE.Vector2(v3[components[0]], v3[components[1]]) + ]); + + }); + + geometry.uvsNeedUpdate = true; } \ No newline at end of file