Wed, 05 Apr 2017 00:39:31 +0200
finished viewer again, giving up with texturing mesh without uv mapping
data.py | 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 |
--- a/data.py Tue Apr 04 03:13:58 2017 +0200 +++ b/data.py Wed Apr 05 00:39:31 2017 +0200 @@ -2,17 +2,17 @@ # Durchmesser, Laenge, Volumen und Gewicht der verfuegbaren Tauchflaschen CYLINDER = { - "03" : [100, 515, 3, 4.7, "Stahl, 3ℓ"], - "05" : [140, 466, 5, 5.7, "Stahl, 5ℓ"], - "07" : [140, 605, 7, 8.8, "Stahl, 7ℓ"], - "08" : [171, 490, 8, 10.4, "Stahl, 8ℓ"], - "10" : [171, 595, 10, 12.4, "Stahl, 10ℓ"], - "12S" : [204, 550, 12, 15.4, "Stahl, 12ℓ kurz"], - "12L" : [171, 690, 12, 14.5, "Stahl, 12ℓ lang"], - "15" : [204, 640, 15, 18.1, "Stahl, 15ℓ"], - "16" : [204, 670, 16, 19.5, "Stahl, 16ℓ"], - "18" : [204, 710, 18, 20.5, "Stahl, 18ℓ"], - "20" : [204, 810, 20, 22.0, "Stahl, 20ℓ"], + "03" : [100, 515, 3, 4.7, "Steel, 3ℓ"], + "05" : [140, 466, 5, 5.7, "Steel, 5ℓ"], + "07" : [140, 605, 7, 8.8, "Steel, 7ℓ"], + "08" : [171, 490, 8, 10.4, "Steel, 8ℓ"], + "10" : [171, 595, 10, 12.4, "Steel, 10ℓ"], + "12S" : [204, 550, 12, 15.4, "Steel, 12ℓ short"], + "12L" : [171, 690, 12, 14.5, "Steel, 12ℓ long"], + "15" : [204, 640, 15, 18.1, "Steel, 15ℓ"], + "16" : [204, 670, 16, 19.5, "Steel, 16ℓ"], + "18" : [204, 710, 18, 20.5, "Steel, 18ℓ"], + "20" : [204, 810, 20, 22.0, "Steel, 20ℓ"], } # Standard Rohrdurchmesser (Mr. Baumarkt)
--- a/stlviewer.css Tue Apr 04 03:13:58 2017 +0200 +++ b/stlviewer.css Wed Apr 05 00:39:31 2017 +0200 @@ -55,4 +55,10 @@ } .listcontainer ul { min-height: 420px; +} +.listcontainer ul li:hover { + cursor: pointer; +} +.listcontainer span { + } \ No newline at end of file
--- a/stlviewer.html Tue Apr 04 03:13:58 2017 +0200 +++ b/stlviewer.html Wed Apr 05 00:39:31 2017 +0200 @@ -20,12 +20,14 @@ <div id="info"> <div class="listcontainer"> <h2>Available:</h2> + move to selected <ul id="sortable1"> <!-- PLACEHOLDER CYLINDERS --> </ul> </div> <div class="listcontainer"> <h2>Selected:</h2> + <a href="#" id="clearselected">clear list</a> <ul id="sortable2"> </ul> @@ -40,32 +42,21 @@ </div> + <div id="rendercontainer"></div> + <script src="stlviewer.js"></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container; + var controls; 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();
--- a/stlviewer.js Tue Apr 04 03:13:58 2017 +0200 +++ b/stlviewer.js Wed Apr 05 00:39:31 2017 +0200 @@ -13,13 +13,25 @@ }); $( "#sortable2" ).sortable({ placeholder: "ui-state-highlight", + forcePlaceholderSize: true, + connectWith: '#sortable1', start: clear_scene, stop: function() { for (i =0; i<10; i++) clear_scene(); - window.setTimeout(update_scene,500) + window.setTimeout(update_scene,500); } }); - $( "#sortable2" ).disableSelection(); + c = $("<li key='10'>").html("Steel, 10ℓ"); + $( "#sortable2" ) + .disableSelection() + .append(c.clone()) + .append(c.clone()); + + $("#clearselected").click(function(){ + $( "#sortable2 li" ).remove(); + for (i =0; i<10; i++) clear_scene(); + }); + update_scene(); } ); function clear_scene() { @@ -77,16 +89,11 @@ //console.log(filename, position); var loader = new THREE.STLLoader(); loader.load( filename, function ( geometry ) { - /*if (!material) - var material = new THREE.MeshPhongMaterial( { - color: 0xff5533, specular: 0x111111, shininess: 200 } ); - else {*/ - if (material == 'm_spacer') material = m_spacer; + 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] ); @@ -105,8 +112,8 @@ } function init() { - container = document.createElement( 'div' ); - document.body.appendChild( container ); + container = document.getElementById( 'rendercontainer' ); + //document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 ); camera.position.set( 0.5, 0.35, 2 ); @@ -116,7 +123,7 @@ scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x72645b, 2, 15 ); - var controls = new THREE.OrbitControls(camera); + controls = new THREE.OrbitControls(camera); // Ground @@ -205,28 +212,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