我有一组平面几何图形,每个几何图形都有自己的来自 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/