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

Question

我正在尝试在三个中制作一个盒子，代表一盒2x4乐高积木，24个宽48个长，任意数量的高。我已经生成了一个纹理，使用随机颜色显示这个模式：

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

我真的不想为CubeTexture制作六张图片，特别是因为四张图片不可见。是否可以在一侧翻转纹理以使它们看起来对齐？ （我们这里只是为了视觉效果。）

此外，并非所有3D矩形都是立方体，但我无法弄清楚如何设置texture.repeat.x和texture.repeat.y以便x正确缩放并且y是相同的缩放，但只是当对象的高度结束时切断，如下所示：

谢谢！

Answer 1

您可以通过翻转UV来翻转图像。

您需要弄清楚哪些紫外线对应于您尝试镜像的面部，以及翻转它们的方向（不确定如何创建几何体）。

以下是使用基本BoxBufferGeometry并修改其uv属性的示例。 （右侧的脸部是紫外线翻转的脸部。）

＆＃13;

＆＃13;

var textureURL = "https://upload.wikimedia.org/wikipedia/commons/0/02/Triangular_hebesphenorotunda.png";
// attribution and license here: https://commons.wikimedia.org/wiki/File:Triangular_hebesphenorotunda.png

var renderer = new THREE.WebGLRenderer({antialias:true});
document.body.appendChild(renderer.domElement);
renderer.setSize(500, 500);

var textureLoader = new THREE.TextureLoader();

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.set(50, 25, 50);
camera.lookAt(scene.position);
scene.add(camera);

camera.add(new THREE.PointLight(0xffffff, 1, Infinity));

var cubeGeo = new THREE.BoxBufferGeometry(20, 20, 20);
var uvs = cubeGeo.attributes.uv;
// originally:
// [0] = 0,1
// [1] = 1,1
// [2] = 0,0
// [3] = 1,0
// convert to:
// [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 = new THREE.MeshLambertMaterial({
  color: "white",
  map: textureLoader.load(textureURL, function(){
    animate();
  })
});
var mesh = new THREE.Mesh(cubeGeo, mat);
scene.add(mesh);

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以创建六个PlaneBufferGeometries指定相同的材质，然后将它们放置以形成一个立方体。以90deg为增量旋转它们，直到达到所需的结果。出于性能原因，您可以将这些合并为一个BufferGeometry。

Answer 3

您可以使用THREE.js json导出器或OBJ或GLTF等格式导出您在blender中制作的模型，并直接加载和渲染它。

你所说的只是让你的紫外线按照你在搅拌机中的方式布局......所以如果你需要那种控制水平......它可能更容易加载模型而不是试图生成它。

如果使用three.js .json或.gltf，则两个导出器都可以选择直接在导出中嵌入纹理。这样可以更容易地使事情更快地运行，但代价可能是存储效率降低。