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

2023年12月10日 1,324次阅读

我有一组平面几何图形,每个几何图形都有一个来自网址的纹理.在导航(缩放/平移)期间的任何时刻,容器(THREE.Object3D)包含26个平面几何.我将如何将它们合并到一个大平面,以便我可以为合并几何中的所有切片应用高度图.

或者我如何才能从36个图像中获取所有纹理(目前作为MeshPhongMaterial的地图属性)到单个几何体？

编辑：

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

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顶点.

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

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

问候,
丹尼尔

点赞