three.js - Threejs 合并平面几何图形或从多个图像创建纹理

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

或者我怎样才能将 36 个图像中的所有纹理(目前作为 MeshPhongMaterial 的 map 属性)转换为单个几何体？

编辑:

目前我按照 Dainel 的建议创建了一个大几何。并将纹理添加到几何图形中，几何图形是通过 Canvas 的一组图像的组合纹理。

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

这是完成或每个图像。每个图像都有一个 url、xpos、ypos。图像被预加载，并且在加载每个图像后调用回调，它创建几何(平面)并从 Canvas 添加纹理。

  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);
场景添加(网格)；

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

最佳答案

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

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

问候，
丹尼尔

关于three.js - Threejs 合并平面几何图形或从多个图像创建纹理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20050377/