THREE.js单纹理映射三维矩形及乐高立方体纹理对齐问题咨询

当然可以！你的核心需求是两个面共享同一张乐高纹理，且边缘处的乐高块颜色完美对齐，完全不需要制作六张图，下面是两种实用方案：

方案一：修改BoxGeometry保留两个面，自定义UV对齐纹理 #

这种方案适合你想保留立方体的整体结构，只显示需要的两个面：

1. 创建立方体并移除不需要的面
   BoxGeometry的每个面由2个三角形组成，所以每个面对应2个face索引。我们只保留需要的两个面（比如正面和顶面），删除其他面：

   // 立方体尺寸：宽24（对应24块）、长48（对应48块）、高度自定义
   const boxGeometry = new THREE.BoxGeometry(24, 你的高度值, 48);
   
   // 保留正面（索引4、5）和顶面（索引0、1）的面，可根据需求调整索引
   const keepFaceIndices = [0, 1, 4, 5];
   const newFaces = [];
   const newUvs = [];
   
   keepFaceIndices.forEach(index => {
     newFaces.push(boxGeometry.faces[index]);
     // 同步保留对应的UV坐标
     newUvs.push(boxGeometry.faceVertexUvs[0][index][0]);
     newUvs.push(boxGeometry.faceVertexUvs[0][index][1]);
     newUvs.push(boxGeometry.faceVertexUvs[0][index][2]);
   });
   
   // 更新几何体数据
   boxGeometry.faces = newFaces;
   boxGeometry.faceVertexUvs[0] = newUvs;
   boxGeometry.elementsNeedUpdate = true;
   boxGeometry.uvsNeedUpdate = true;
   

2. 调整UV坐标让纹理边缘对齐
   假设你的纹理是完整的24×48乐高图案（对应正面的尺寸），顶面的UV需要和正面的顶部边缘对齐：

   const legoTexture = textureLoader.load('你的乐高纹理.jpg');
   legoTexture.wrapS = THREE.RepeatWrapping;
   legoTexture.wrapT = THREE.RepeatWrapping;
   
   // 获取顶面的UV组（对应之前保留的前两个UV组）
   const topFaceUvs = boxGeometry.faceVertexUvs[0].slice(0, 2);
   topFaceUvs.forEach(uvGroup => {
     uvGroup.forEach(uv => {
       // 让顶面的纹理从正面的顶部边缘（纹理y=1位置）开始，沿高度方向重复
       uv.y = 1 + uv.y * 你的高度值;
     });
   });
   
   boxGeometry.uvsNeedUpdate = true;
   

3. 创建材质和网格

   const material = new THREE.MeshStandardMaterial({ map: legoTexture });
   const legoBox = new THREE.Mesh(boxGeometry, material);
   scene.add(legoBox);
   

方案二：用两个PlaneGeometry拼接，通过纹理偏移/重复对齐 #

这种方案更简单，适合不想修改几何体的情况：

1. 创建正面和顶面的平面

   const legoTexture = textureLoader.load('你的乐高纹理.jpg');
   legoTexture.wrapS = THREE.RepeatWrapping;
   legoTexture.wrapT = THREE.RepeatWrapping;
   
   // 正面：尺寸24×48，对应乐高块数量
   const frontPlane = new THREE.PlaneGeometry(24, 48);
   const frontMaterial = new THREE.MeshStandardMaterial({ map: legoTexture });
   const frontMesh = new THREE.Mesh(frontPlane, frontMaterial);
   frontMesh.position.y = 你的高度值 / 2; // 调整到立方体正面位置
   scene.add(frontMesh);
   
   // 顶面：尺寸24×自定义高度
   const topPlane = new THREE.PlaneGeometry(24, 你的高度值);
   const topMaterial = new THREE.MeshStandardMaterial({ map: legoTexture });
   // 调整纹理偏移，让顶面从正面的顶部边缘开始显示
   topMaterial.map.offset.y = 1;
   // 让纹理沿高度方向重复对应次数
   topMaterial.map.repeat.y = 你的高度值;
   
   const topMesh = new THREE.Mesh(topPlane, topMaterial);
   topMesh.rotation.x = -Math.PI / 2; // 旋转成顶面角度
   topMesh.position.z = 24; // 和正面拼接对齐
   scene.add(topMesh);
   

关键注意点 #

• 确保你的纹理边缘的乐高块颜色是连续的，这样对齐后才不会有突兀的接缝；
• 如果你的纹理是单个乐高块的图案，只需要把正面的repeat设置为(24, 48)，顶面的repeat设置为(24, 你的高度值)，再调整偏移即可。

内容的提问来源于stack exchange，提问作者Chris Wilson