threejs合并平面几何体或从多个图像创建纹理

Question

我有一组平面几何体，每一个都有自己的url纹理。在导航（缩放/平移）过程中的任意点，容器（THREE.Object3D）包含26个平面几何图形。如何将它们合并到一个大平面，以便可以为合并几何体中的所有平铺应用高贴图。

或者我如何从36个图像中获得所有的纹理。（目前作为MeshPhong材质的映射属性）到单个几何？

编辑：

目前，我按照Dainel的建议创建了一个大几何体。并将纹理放置到几何体中，该几何体是通过画布的一组图像的组合纹理。

context = canvas.getContext( '2d' );
var img = Image();
img.src = url //url of the texture tile
context.drawImage(img,xpos, ypos);

这是做或每一个图像。每个图像都有一个url、xpos和YPO。图像是预加载的，加载每个图像后，将调用一个回调函数，该函数创建几何体（平面）并从画布添加纹理。

  var texture = new THREE.Texture(canvas); 
  texture.needsUpdate = true;
    var material = new THREE.MeshPhongMaterial({ map : texture });

平面几何（canvas.width，canvas.height，57,40）； var网格=new THREE. Mesh（地理，材料）；scene.add（网格）；

此外，我用高度值更新几何的z顶点。

Answer 1

使用terraLoader类的三个js和画布纹理，我能够实现

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, mywidth / myheight, 0.01, 10000);
  camera.position.set(0, 0, 240);

  scene.add(new THREE.AmbientLight(0xeeeeee));

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(mywidth, myheight);

  var group = new THREE.Object3D();

  var canvas = document.createElement( 'canvas' );
  canvas.width = mywidth;
  canvas.height = myheight;

  var ctx = canvas.getContext('2d');

  /* adjust width, height, segments based on height data;*/

  /* create a plane geometry */
  var geom = new THREE.PlaneGeometry(800, 692, 40, 55);

  /* 
  read height values from .bin file uing terrainLoader 
  and update the Z values of the plane 
   */

  heightdata = 'assets/heightmap.bin'; 
  terrainLoader.load(heightdata, function(data) {

    /* bin file generated from USGS SRTM tile */ 
    for (var i = 0, l = geom.vertices.length ; i < l; i++) {
      geom.vertices[i].z =   data[i] / 200; /*simple scale */
    }

    geom.verticesNeedUpdate = true;
  });

   /* 
   create a texture from canvas created above with width and height
   of the of the scene. This is to be careful as the size of texture 
   image may not be the same but as same ratio as height map. 
   Atleast for my case it was the situation. But geometry width and 
   texture width are in same ratio. So that i need a small array of 
   heightmap from bin but a much bigger texture 
   */   

  var texture = new THREE.Texture(canvas); 
  var material = new THREE.MeshPhongMaterial({ map : texture });
  var mesh = new THREE.Mesh(geom, material);
  group.add( mesh );
  scene.add(group);

现在要将多个图像绘制到画布，请选中此页面

我将复制HTML5画布图像加载程序教程中的代码

   function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

在上述代码中，从heightmap更新平面几何图形后，可以调用loadImages函数。

 loadImages(sources, function(images) {

        //context = context of the texture put in threejs texture

        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
      });

Answer 2

你可以创建一个“大”平面并对其应用合并纹理

或者u可以手动设置每个平面的顶点Y值，以匹配高度贴图的相应部分。因此，你有一组单独的平面，它们共享相同的“基准”高度贴图。

你好，丹尼尔