Javascript 在THREE.js中，如何将一个纹理映射到3D矩形

我试着把一个盒子分成三块，代表一个2x4乐高的盒子，24块宽48块长，任意数量的乐高。我已生成一个纹理，该纹理使用随机颜色显示此图案：

我需要显示这个立方体的两面，但是纹理必须对齐，以便边缘上的碎片具有相同的颜色，就像这样（在Blender中生成）：

我真的不想为立方体结构制作六个图像，特别是因为四个图像是不可见的。是否可以翻转一侧的纹理，使其看起来对齐？（我们这里只是为了视觉效果。）

此外，并非所有3D矩形都是立方体，但我不太清楚如何设置

纹理。repeat.x

和

纹理。repeat.y

，以便正确缩放x，并且y处于相同的比例，但在对象高度结束时仅切断，如下所示：

---

谢谢

您可以创建六个

planebuffer几何图形

指定相同的材质，然后将它们定位以形成立方体。以90度的增量旋转它们，直到达到所需的结果。出于性能原因，您可以将它们合并回一个

缓冲几何体
您可以创建六个
平面缓冲几何体
指定相同的材质，然后定位它们以形成立方体。以90度的增量旋转它们，直到达到所需的结果。出于性能原因，您可以将它们合并回单个
缓冲几何体
您可以通过翻转UV来翻转图像

您需要确定哪些UV对应于要镜像的面，以及翻转它们的方向（不确定几何体是如何创建的）

下面是一个使用基本
BoxBufferGeometry
并修改其
uv
属性的示例。（右侧的面是UV翻转镜像面。）


var textureURL=”https://upload.wikimedia.org/wikipedia/commons/0/02/Triangular_hebesphenorotunda.png";
//此处的归属和许可：https://commons.wikimedia.org/wiki/File:Triangular_hebesphenorotunda.png
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
document.body.appendChild（renderer.doElement）；
设置大小（500500）；
var textureLoader=new THREE.textureLoader（）；
var scene=new THREE.scene（）；
var摄像机=新的三个透视摄像机（28,1,1,1000）；
摄像机。位置。设置（50，25，50）；
摄像机。注视（场景。位置）；
场景。添加（摄影机）；
添加（新的三点光源（0xffffff，1，无穷大））；
var cubeGeo=新的3.BoxBufferGeometry（20,20,20）；
var uvs=cubeGeo.attributes.uv；
//原来：
// [0] = 0,1
// [1] = 1,1
// [2] = 0,0
// [3] = 1,0
//转换为：
// [0] = 1,1
// [1] = 0,1
// [2] = 1,0
// [3] = 0.0
uvs.setX（0,1）；
uvs.setY（0,1）；
uvs.setX（1,0）；
uvs.setY（1,1）；
uvs.setX（2,1）；
uvs.setY（2,0）；
uvs.setX（3,0）；
uvs.setY（3,0）；
uvs.needsUpdate=true；
var mat=新的3.0网格LambertMaterial({
颜色：“白色”，
映射：textureLoader.load（textureURL，函数（）{
制作动画（）；
})
});
var网格=新的三网格（cubeGeo，mat）；
场景。添加（网格）；
函数render（）{
渲染器。渲染（场景、摄影机）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
您可以通过翻转UV来翻转图像

您需要确定哪些UV对应于要镜像的面，以及翻转它们的方向（不确定几何体是如何创建的）

下面是一个使用基本
BoxBufferGeometry
并修改其
uv
属性的示例。（右侧的面是UV翻转镜像面。）


var textureURL=”https://upload.wikimedia.org/wikipedia/commons/0/02/Triangular_hebesphenorotunda.png";
//此处的归属和许可：https://commons.wikimedia.org/wiki/File:Triangular_hebesphenorotunda.png
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
document.body.appendChild（renderer.doElement）；
设置大小（500500）；
var textureLoader=new THREE.textureLoader（）；
var scene=new THREE.scene（）；
var摄像机=新的三个透视摄像机（28,1,1,1000）；
摄像机。位置。设置（50，25，50）；
摄像机。注视（场景。位置）；
场景。添加（摄影机）；
添加（新的三点光源（0xffffff，1，无穷大））；
var cubeGeo=新的3.BoxBufferGeometry（20,20,20）；
var uvs=cubeGeo.attributes.uv；
//原来：
// [0] = 0,1
// [1] = 1,1
// [2] = 0,0
// [3] = 1,0
//转换为：
// [0] = 1,1
// [1] = 0,1
// [2] = 1,0
// [3] = 0.0
uvs.setX（0,1）；
uvs.setY（0,1）；
uvs.setX（1,0）；
uvs.setY（1,1）；
uvs.setX（2,1）；
uvs.setY（2,0）；
uvs.setX（3,0）；
uvs.setY（3,0）；
uvs.needsUpdate=true；
var mat=新的3.0网格LambertMaterial({
颜色：“白色”，
映射：textureLoader.load（textureURL，函数（）{
制作动画（）；
})
});
var网格=新的三网格（cubeGeo，mat）；
场景。添加（网格）；
函数render（）{
渲染器。渲染（场景、摄影机）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
您可以使用THREE.js json exporter或OBJ或GLTF等格式导出在blender中制作的模型，并直接加载和渲染

你们所说的只是简单地把紫外线按照你们在搅拌机里的方式布置。。所以如果你需要那种程度的控制。。加载模型可能比生成模型更容易

如果使用three.json.json或.gltf，则两个导出器都可以选择将纹理直接嵌入导出中。这可以让事情更快地进行，但可能会降低存储效率。
您可以使用THREE.js json exporter或类似OBJ或GLTF的格式导出在blender中制作的模型，并直接加载和渲染

你们所说的只是简单地把紫外线按照你们在搅拌机里的方式布置。。所以如果你需要那种程度的控制。。加载模型可能比尝试更容易