finished webrenderer

Tue, 04 Apr 2017 03:13:58 +0200

author
mdd
date
Tue, 04 Apr 2017 03:13:58 +0200
changeset 12
b3cf0176512e
parent 11
098335a1d510
child 13
39fb313ba27c

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

mercurial