Question

我有一组平面几何图形，每个几何图形都有一个来自网址的纹理。在导航（缩放/平移）期间的任何时刻，容器（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）; scene.add（mesh）;

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

Answer 1

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

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

的问候，丹尼尔

Answer 2

使用terrainLoader类为threejs和canvas纹理我能够实现

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

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

2 个答案: