Question

我之前做过几次实验，找到绘制大型六边形网格的最佳方法。

我尝试使用THREE.Line，THREE.LineSegments绘制效果。对于小网格来说它工作得很好，但如果我在网格中有超过1000个单元格，fps开始真的很难下降。

所以我想出了一个将纹理（包含六边形网格图案）应用到简单平面的想法。我只需要设置Texture的repeat()函数来指定垂直和水平执行的重复次数。

整体性能大幅提升，但我注意到纹理只适合我的网格单元大小，只能在飞机中心附近。

你可以在上面的网格中看到的点是THREE.Points，它只是显示每个十六进制的所有角落。这有助于我查看纹理是否与网格单元格匹配。

从中心进一步观察，实际六边形与纹理上相应的六边形之间的偏移越大。

我相信有更聪明的方法来预先计算大小，以便这两个网格之间没有差异。

这是一个如何看待这个网格以及它是如何生成的例子......

window.onload = function() {
  var renderer, camera, scene, controls, all_loaded = false, controls, tiles = {};

  var imgDataURI = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABaCAYAAABUrhMHAAAFhklEQVR4Xu2dT2gcdRTH34tpLS2Ipx70VkFRmpLZnlRSK+6MIkIqmIvFYnfWqgc9FBQFq2C9WKHoyT/spFKplwgmIKI7q9YG9ZSdpSmWCvamh55ESaltuk9+kU12k2x2fr/f/N5OlrenkJ3ve2++n9mZ3/x+O28x9L0fojh5GAbg9VxQ+L5JhIOyP+Wg8BYKoPwemQIov2yWKhNAAojXAbkG8fqtnU0AaVvGKxBAvH5rZxNA2pbxCgQQr9/a2QSQtmW8AgHE67d2NgGkbRmvQADx+q2dbSABlQLv4mQ1uVfbjRwKyn7hVwKCKE7uy2F52iWFgTeNYeD9A0RXbtx6dd/pr377QztKDgSlB++5A7fvmEWgnaocArxCVxfGJn+69GcOytMu4dATd9+55d/t5wBxJyp16HsfAeIRbNJ3lVria0fsoyD0C98CkI8AH1fi5EVVStn3PiSA5wEwjuL6o30sTzt1uejFNISPANEnUZy8sASo9Qr90VlAfACaeDKq1V/Rjs4oKBcLJ2AIjhI1f4nixth6qdX+IA7dD004WanVX2UsTztVWCy8B0N0FIh+bt+fDkAq6qGx3Xu2btvyNQHsAKTDUbUxrZ3NoaBcHB0nxE8RYIHw5mNR9fyFjdKFwZ7dSLd8o/YHiZ6t1BozDsvTDh0GoweQ8BQALFy/duPx07MXzrcHWQOo9eaRwHv5JuG7QHT598Vk79mzcE07e4aCiQnYettfXgKAuwCar0Vx4wOd8KXAewkJTwDQ5b9vT7ypKbiuo8962/37Ydtdw94cIO5Car5eqTXeXy9HV0DLp73AO4OETwPSTKWaHMi60DTxwmLhS0AaR8Azlbj+TBpNt23KfuEzAjoIhDNRrf6kTSxTbTnwpoFwnJA+j6rJwY3i9ATUEpcCbw4JRwjo+GScHDctTkcXFr03EPFNQJqvVJO9Otpe25YDbw7U/hC9HdWSd3ptn8X7Jd87hoDHCGl+MuX+pAakCjzsjzw0hMNT6u8mLU6ciud/zKLw1THCYGQfwPAX//9/8amoOn9uM+ex8U0L0PKnyeBISGtwP45sl59U2zOPEaCW2Trn0l6A8nBtyPJaF2Z07bYCpExPOxrpBihvoyvb0WLWo19rQCujvY3H82uvM/m+P9G933J1/5gZoGVQXe6I2wFtpjv8tDMWrmZgMge0fH1aNaek/r+Z58jWm/PjmMN0BkgB6ZiVpc0/y9w+a07KOYZVAKeAVkZ7hYtERIOyTqPWnZpIyLGOxgJo0FY6OfdHAPW6QVvnfQFkYBqnRABxum2QSwAZmMYpEUCcbhvkEkAGpnFKBBCn2wa5BJCBaZwSAcTptkEuAWRgGqdEAHG6bZBLABmYxikRQJxuG+QSQAamcUoEEKfbBrkEkIFpnBIBxOm2QS4BZGAap0QAcbptkEsAGZjGKRFAnG4b5BJABqZxSgQQp9sGuQSQgWmcEgHE6bZBLgFkYBqnRABxum2Qa+AAlQP58rzBcbAkcfrdbHn8xBTLis4ZoNVNgVRKeYBLH1jmgLo1BWovTR6BTA8qM0C9mgKtLinvTY4G5iFieQy/89DL1WP40sii+6mqr40sTJoCpT3rSiuYTqe0rkE2TYHSAlLbSTMlg2G2bVMgHUCtbV02OerHJ9XkzNPzE5TVudQE0Aooaei3xr+sRyM2gJTWtslR3po2pR39SlNZ2yPHUt/r/lHaMlsanJV8w7bMHE2BstqRNTMSg97YXH4awNWhYx63YxVAflzD3EjXSrWOJj8V7dpli/hq5VYAWRjoWiqAXDtsGV8AWRroWi6AXDtsGV8AWRroWi6AXDtsGV8AWRroWi6AXDtsGV8AWRroWi6AXDtsGV8AWRroWi6AXDtsGV8AWRroWq4A/QeCYJEAFo/atwAAAABJRU5ErkJggg=="

  function initRenderer(){
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize( window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x264d73, 1);
  }

  function initScene(){
    scene = new THREE.Scene();
    //scene.fog = new THREE.Fog( 0x264d73, 500, 900 )
  }

  function initCamera(){
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 1, 10000 );
    camera.position.set( 0.0, 211 ,40 );
    camera.lookAt(scene.position);
    scene.add(camera);
    controls = new THREE.OrbitControls( camera );
  }

  function initLights(){
    var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
    scene.add(aLight);
  }

  ////// Initializers ////////////////////////

  var Cell = function( q, r, s ){
    this.q = q;
    this.r = r;
    this.s = s;
    this.h = 0;
    this._hashID = this.q+"."+this.r+"."+this.s;
  };
  Cell.prototype.constructor = Cell;

  function cellToPixel ( layout, cell ){ //// point ///
    var M = layout.orientation;
    var v = new THREE.Vector3();
    v.x = ( M.f0 * cell.q + M.f1 * cell.r ) * layout.size;
    v.y = cell.h ;
    v.z = ( M.f2 * cell.q + M.f3 * cell.r ) * layout.size;
    return v;
  };

  var Tile = function( coords, layout ){
    this.cell = new Cell( coords[0], coords[1], coords[2] );
    this.pos = cellToPixel( layout, this.cell );
  };

  Tile.prototype.constructor = Tile;

  function generateGrid( grid_size, cell_size , origin ){ 
    //// set layout type ( pointy ) ///
    var layout = {
      orientation: {
        //// forward matrix ////
        f0: Math.sqrt(3.0), 
        f1: Math.sqrt(3.0) / 2.0, 
        f2: 0.0, 
        f3: 3.0 / 2.0, 
        /// reverse matrix ////
        b0: Math.sqrt(3.0) / 3.0, 
        b1: -1.0 / 3.0, 
        b2: 0.0, 
        b3: 2.0 / 3.0, 
        start_angle: 0.5
      },
      size: cell_size, 
      origin: origin
    }

    ///generate tiles ///
    var r1, r2, t, q, r;
    for ( q = -grid_size; q <= grid_size; q++ ) {
      r1 = Math.max(-grid_size, -q - grid_size);
      r2 = Math.min(grid_size, -q + grid_size);
      for ( r = r1; r <= r2; r++ ) {
        t = new Tile( [ q, r,  -q-r ] , layout );
        tiles[ t.cell._hashID ] = t;
      }
    }

    /// hex-corners ///
    var hex_corners = [], offset_x , offset_y, angle = 0;
    for (var i = 0; i < 6; i++) {
      angle = 2.0 * Math.PI * ( i + layout.orientation.start_angle ) / 6;
      offset_x = layout.size * Math.cos( angle );
      offset_y = layout.size * Math.sin( angle );
      hex_corners.push( [parseFloat( offset_x.toFixed())  , parseFloat(offset_y.toFixed())] );
    }

    //// hex corner points ///
    var points_Geo = new THREE.Geometry();
    for( var t in tiles ){
      for( var c = 0, c_l = hex_corners.length; c < c_l; c++ ){
        points_Geo.vertices.push( new THREE.Vector3( tiles[t].pos.x + hex_corners[c][0],0, tiles[t].pos.z + hex_corners[c][1] ) );
      }
    }
    points_Geo.mergeVertices(); 

    var points_Mat = new THREE.PointsMaterial( { size: 3, color: 0xFFFFFF, sizeAttenuation: true, transparent: true, opacity: 1  } ); 
    var points_Mesh =  new THREE.Points( points_Geo, points_Mat );

    scene.add( points_Mesh  )
  }

  function add_plane(){
    var plane, material, image = new Image(), texture = new THREE.Texture();
    image.onload  = function(){
      texture.image = image;
      texture.needsUpdate = true;

      texture.wrapS = THREE.RepeatWrapping; 
      texture.wrapT = THREE.RepeatWrapping;
      texture.anisotropy = 16;
      texture.repeat.set( 9.587, 11 ); 

      console.log(texture)

      material = new THREE.MeshLambertMaterial({transparent: true, emissive:0xb3cce6, color: 0xFFFFFF, opacity: 0.7, map : texture });

      plane = new THREE.Mesh(new THREE.PlaneGeometry( 500, 500 ), material);
      plane.rotateX( -(Math.PI/2) )
      plane.position.set( -11.1,-0.1,0)

      scene.add(plane);
      camera.lookAt( plane );
      all_loaded = true;
    };

    image.src = imgDataURI;

  }

  ///// Mouse events ////////

  ///// Main /////////
  function main(){
    initRenderer(window.innerWidth, window.innerHeight );
    initScene();
    initCamera(window.innerWidth, window.innerHeight );
    initLights();
    add_plane();
    generateGrid( 8, 15, {x:0, y:0, z: 0});
    animate();
  }

  function animate(){
    window.requestAnimationFrame( animate );
    //if( all_loaded ){
    render_all();
    //}
    controls.update()
  }

  function render_all(){
    renderer.render(scene, camera);
  }

  main();
}

body , canvas{
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

Answer 1

您遇到的问题是由于舍入错误。计算绘制六边形的位置的代码通常从开头的偏移量开始计算。借用代码表Calculate 6 vertices of randomely generated hexagon我可以为您提供计算方式的控制台输出。

因为这是动态计算的，存在舍入错误，并且浏览器必须指示显示器将其绘制到某处，将其交给显卡并且显卡决定哪些像素实际绘制线条

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// draw your original hexagon
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(30,-50);
ctx.lineTo(83,-50);
ctx.lineTo(113,0);
ctx.lineTo(83,50);
ctx.lineTo(30,50);
ctx.closePath();
ctx.lineWidth=3;
ctx.stroke();

// same hexagon using drawHexagon()
ctx.strokeStyle='red';   
ctx.lineWidth=1;
drawHexagon(0,0,113/2);

function drawHexagon(leftX,middleY,radius){
  var centerX=leftX+radius;
  var centerY=middleY;    
  ctx.beginPath();
  ctx.moveTo (centerX+radius*Math.cos(0), centerY+radius*Math.sin(0));          
  for (var i=1; i<=6;i++) {
    console.log("FLoaty coordinates, not absolute pixel: "+(centerX+radius*Math.cos(i*2*Math.PI/6)));
    ctx.lineTo(centerX+radius*Math.cos(i*2*Math.PI/6), centerY+radius*Math.sin(i*2*Math.PI/6));
  }
  ctx.closePath();
  ctx.stroke();
}
drawHexagon(0,100,113/2);
drawHexagon(0,200,113/2);

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

<h4>Fn() to draw hexagon with specified radius and left-midpoint.</h4>
<canvas id="canvas" width=300 height=300></canvas>

有时候他们会在纹理图像上排列一个完整的像素，有时他们不会因为圆角会将它们移到某一边。

要解决此问题，您必须确保在three.js中绘制的六边形与纹理中的坐标点完美对齐。您必须拥有的是纹理中所有点的偏移贴图，然后找到最近的纹理贴图六边形，并且恰好相应。

伪代码：

 center = hexagon.pos();
 left = center.posX % texturewidth;
 realcenter = null;
 for(c=0;c<textureHexagons.length;c++) {
     current = textureHexagon[c];
     if(left >= current.posX && left <= current.posX + width) {
        realcenter = textureHexagon[c];
     }
 }
 baseOffset = textureWidth * Math.round((center.posX / textureWidth))
 hexagon.topPoint = baseOffset + realcenter.topPoint;
 hexagon.leftTopPoint = baseOffset + realcenter.leftTopPoint;
 etc...

使用纹理绘制六角形网格

1 个答案: