SHARE
TWEET

Untitled

a guest Feb 21st, 2020 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Obviously this will not be good for larger images.
  2.    If you want larger Images, https://wizgrav.github.io/three.js/runner/
  3.    parameters:
  4.         canvas - <CANVAS DOM Element>
  5.           depth - <float> how far to extend the Image
  6.           hasOpacity - <boolean> If the canvas has opacity
  7.         material - <THREE.Material> The material to use on the geometry with THREE.MeshFaceMaterial();
  8.    To use opacity:
  9.         set hasOpacity to true,
  10.         set a material to use with transparency
  11.         set the Mesh material to THREE.MeshFaceMaterial(yourCanvasGeometry.materials());
  12.     */
  13. THREE.CanvasGeometry = function (canvas, depth, hasOpacity, material) {
  14.     THREE.Geometry.call( this );
  15.     var ctx = canvas.getContext('2d'),
  16.         w = canvas.width,
  17.         h = canvas.height;
  18.     this.materials = [];
  19.     this.opacitys = [];
  20.     const cache = [];
  21.     for(var x=0;x<w;x++) {
  22.         if(!cache[x]) {
  23.             cache[x] = [];
  24.         }
  25.         for(var y=0;y<h;y++) {
  26.             const isCached = cache[x][y];
  27.             const data = isCached ? cache[x][y] : _getImageData(x, y, x+1, y+1);
  28.             cache[x][y] = data;
  29.             if(data[3] !== 0) {
  30.                 var vectors = [];
  31.                 var v = new THREE.Vector3();
  32.                 var f = new THREE.Face3();
  33.                 f.color.setStyle("rgb("+data[0]+","+data[1]+","+data[2]+")");
  34.                 if(hasOpacity) {
  35.                     if(this.opacitys.indexOf(data[3]/255) == -1) {
  36.                         this.opacitys.push(data[3]/255);
  37.                         var materialClone = material.clone();
  38.                         materialClone.transparent = true;
  39.                         materialClone.opacity = data[3]/255;
  40.                         this.materials.push(materialClone);
  41.                     }
  42.                     f.materialIndex = this.opacitys.indexOf(data[3]/255);
  43.                 }
  44.                 v.set(x/w, -y/w, 0);
  45.                 this.vertices.push(v.clone());
  46.                 vectors.push(this.vertices.length-1);
  47.                
  48.                 v.set((x+1)/w, -y/w, 0);
  49.                 this.vertices.push(v.clone());
  50.                 vectors.push(this.vertices.length-1);
  51.                
  52.                 v.set((x+1)/w, (-y+1)/w, 0);
  53.                 this.vertices.push(v.clone());
  54.                 vectors.push(this.vertices.length-1);
  55.                
  56.                 v.set(x/w, (-y+1)/w, 0);
  57.                 this.vertices.push(v.clone());
  58.                 vectors.push(this.vertices.length-1);
  59.                
  60.                 v.set(x/w, -y/w, depth);
  61.                 this.vertices.push(v.clone());
  62.                 vectors.push(this.vertices.length-1);
  63.                
  64.                 v.set((x+1)/w, -y/w, depth);
  65.                 this.vertices.push(v.clone());
  66.                 vectors.push(this.vertices.length-1);
  67.                
  68.                 v.set((x+1)/w, (-y+1)/w, depth);
  69.                 this.vertices.push(v.clone());
  70.                 vectors.push(this.vertices.length-1);
  71.                
  72.                 v.set(x/w, (-y+1)/w, depth);
  73.                 this.vertices.push(v.clone());
  74.                 vectors.push(this.vertices.length-1);
  75.                
  76.                 f.set(vectors[2], vectors[1], vectors[0]);
  77.                 this.faces.push(f.clone());
  78.                
  79.                 f.set(vectors[0], vectors[3], vectors[2]);
  80.                 this.faces.push(f.clone());
  81.                
  82.                 f.set(vectors[4], vectors[5], vectors[6]);
  83.                 this.faces.push(f.clone());
  84.                
  85.                 f.set(vectors[6], vectors[7], vectors[4]);
  86.                 this.faces.push(f.clone());
  87.                
  88.                 //check left
  89.                 // const left = _getImageData(x-1, y);
  90.                 // console.log('left === ',left);
  91.                 if(x-1 < 0 || _getImageData(x-1, y)[3] == 0) {
  92.                     vectors = [];
  93.                     v.set(x/w, -y/w, 0);
  94.                     this.vertices.push(v.clone());
  95.                     vectors.push(this.vertices.length-1);
  96.                    
  97.                     v.set(x/w, (-y+1)/w, 0);
  98.                     this.vertices.push(v.clone());
  99.                     vectors.push(this.vertices.length-1);
  100.                    
  101.                     v.set(x/w, (-y+1)/w, depth);
  102.                     this.vertices.push(v.clone());
  103.                     vectors.push(this.vertices.length-1);
  104.                    
  105.                     v.set(x/w, -y/w, depth);
  106.                     this.vertices.push(v.clone());
  107.                     vectors.push(this.vertices.length-1);
  108.                    
  109.                     f.set(vectors[2], vectors[1], vectors[0]);
  110.                     this.faces.push(f.clone());
  111.                     f.set(vectors[0], vectors[3], vectors[2]);
  112.                     this.faces.push(f.clone());
  113.                 }
  114.                 // check right
  115.                 if(x+1 > w || _getImageData(x+1, y)[3] == 0) {
  116.                     vectors = [];
  117.                     v.set((x+1)/w, -y/w, 0);
  118.                     this.vertices.push(v.clone());
  119.                     vectors.push(this.vertices.length-1);
  120.                    
  121.                     v.set((x+1)/w, (-y+1)/w, 0);
  122.                     this.vertices.push(v.clone());
  123.                     vectors.push(this.vertices.length-1);
  124.                    
  125.                     v.set((x+1)/w, (-y+1)/w, depth);
  126.                     this.vertices.push(v.clone());
  127.                     vectors.push(this.vertices.length-1);
  128.                    
  129.                     v.set((x+1)/w, -y/w, depth);
  130.                     this.vertices.push(v.clone());
  131.                     vectors.push(this.vertices.length-1);
  132.                    
  133.                     f.set(vectors[0], vectors[1], vectors[2]);
  134.                     this.faces.push(f.clone());
  135.                     f.set(vectors[2], vectors[3], vectors[0]);
  136.                     this.faces.push(f.clone());
  137.                 }
  138.                 //check top
  139.                 if(y+1 > h || _getImageData(x, y+1)[3] == 0) {
  140.                     vectors = [];
  141.                     v.set(x/w, (-y)/w, 0);
  142.                     this.vertices.push(v.clone());
  143.                     vectors.push(this.vertices.length-1);
  144.                    
  145.                     v.set((x+1)/w, (-y)/w, 0);
  146.                     this.vertices.push(v.clone());
  147.                     vectors.push(this.vertices.length-1);
  148.                    
  149.                     v.set((x+1)/w, (-y)/w, depth);
  150.                     this.vertices.push(v.clone());
  151.                     vectors.push(this.vertices.length-1);
  152.                    
  153.                     v.set(x/w, (-y)/w, depth);
  154.                     this.vertices.push(v.clone());
  155.                     vectors.push(this.vertices.length-1);
  156.                    
  157.                     f.set(vectors[0], vectors[1], vectors[2]);
  158.                     this.faces.push(f.clone());
  159.                     f.set(vectors[2], vectors[3], vectors[0]);
  160.                     this.faces.push(f.clone());
  161.                 }
  162.                 //check bottom
  163.                 if(y-1 < 0 || _getImageData(x, y-1)[3] == 0) {
  164.                     vectors = [];
  165.                     v.set(x/w, (-y+1)/w, 0);
  166.                     this.vertices.push(v.clone());
  167.                     vectors.push(this.vertices.length-1);
  168.                    
  169.                     v.set((x+1)/w, (-y+1)/w, 0);
  170.                     this.vertices.push(v.clone());
  171.                     vectors.push(this.vertices.length-1);
  172.                    
  173.                     v.set((x+1)/w, (-y+1)/w, depth);
  174.                     this.vertices.push(v.clone());
  175.                     vectors.push(this.vertices.length-1);
  176.                    
  177.                     v.set(x/w, (-y+1)/w, depth);
  178.                     this.vertices.push(v.clone());
  179.                     vectors.push(this.vertices.length-1);
  180.                    
  181.                     f.set(vectors[0], vectors[3], vectors[2]);
  182.                     this.faces.push(f.clone());
  183.                     f.set(vectors[2], vectors[1], vectors[0]);
  184.                     this.faces.push(f.clone());
  185.                 }
  186.  
  187.                 function _getImageData(_x,_y) {
  188.                     const isCached = cache[_x] && cache[_x][_y];
  189.                     const data = isCached ? cache[_x][_y] : ctx.getImageData(_x, _y, 1, 1).data;
  190.                     if(!isCached) {
  191.                         if(!cache[_x])cache[_x] = [];
  192.                         cache[_x][_y] = data;
  193.                     }
  194.                     return cache[_x][_y];
  195.                 }
  196.             }
  197.         }
  198.     }
  199.  
  200.     // console.log(this)   
  201.     this.mergeVertices();
  202.     this.computeFaceNormals();
  203.     this.computeVertexNormals();
  204.  
  205.     function _getImageData(_x, _y) {
  206.         if(typeof cache[_x][_y] === "undefined") {
  207.             cache[_x][_y] = ctx.getImageData(_x,_y,1,1).data;
  208.         }
  209.         return cache[_x][_y];
  210.     }
  211. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top