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

Question

我有一组平面几何图形，每个几何图形都有自己的 url 纹理。在导航（缩放/平移）期间的任何时候，容器 (THREE.Object3D) 包含 26 个平面几何图形。我将如何将它们合并到一个大平面上，以便我可以为合并几何中的所有图块应用高度图。

或者我怎样才能将 36 张图像中的所有纹理（目前作为 MeshPhongMaterial 的贴图属性）放入单个几何体中？

编辑：

目前我按照Dainel 的建议创建了一个大几何。并为几何图形添加纹理，该纹理是一组图像通过画布的组合纹理。

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

这是完成或每个图像。每个图像都有一个 url、xpos、ypos。图像是预加载的，并且在加载每个图像后会调用一个回调来创建几何（平面）并从画布添加纹理。

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

var geom = new THREE.PlaneGeometry(canvas.width, canvas.height, 57, 40); var mesh = new THREE.Mesh(geom, material); 场景.add(网格);

我还用高度值更新几何的 z 顶点。

Answer 1

使用 terrainLoader 类作为threejs 和画布纹理我能够实现

  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 Canvas Image Loader Tutorial的代码

   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'
      };

您可以在上面代码中从高度图更新平面几何后调用 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

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

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

问候， 丹尼尔