finished viewer again, giving up with texturing mesh without uv mapping

Wed, 05 Apr 2017 00:39:31 +0200

author
mdd
date
Wed, 05 Apr 2017 00:39:31 +0200
changeset 13
39fb313ba27c
parent 12
b3cf0176512e
child 14
ba3d8c56e6f5

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

mercurial