三.js 材质根据视图方向反转

Question

我正在使用 Three.js 为房屋建模。我的想法是我可以把房子展示给建筑师并进一步讨论。这个项目应该是步行的，所以我把它放在这个网站上。如果您访问该站点查看代码，使用箭头键相对于草地水平移动，使用 W/S 向上/向下移动，并使用 A/D 进行偏航视图。

https://bsdillon.github.io/cs200_Spring2020/ThreeJs/solarhouse.html

我能够制作面板（实际上是立方体）并在上面放置纹理。一切看起来都很棒，只是墙壁看起来会根据观察方向而有所不同。见下图。我添加了一条红线和黄色三角形，以帮助使几何图形更加明显。左侧的图像显示了面板的外部视图，面板外部带有隔板，左侧有一个敞开的门口。右侧的图像显示了从结构内部看到的同一面板。从里面可以看到，门仍然在左边（应该出现在右边），而且棍子框架内部也似乎是颠倒的。

我以前从未注意到这一点，但它似乎是我设置这些面板的标准。显然我做错了什么。问题是如何显示纹理以使视图保持一致。

var materialArray = new Object();//I set up an object I set up to store materials

function makeMaterial2(filename, repeatX, repeatY)//a method for creating materials from an image file
{
  var m = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( filename ), transparent: true, opacity: 0.9, color: 0xffffff }); 
  return m;
}

//two examples of the material creation I implemented
materialArray["rDoor"] = makeMaterial2("doorRight.png",false,false);
materialArray["crDoor"] = makeMaterial2("doorRightClapboard.png",false,false);

function drawPanel2(x,y,z,x2,y2,z2,str)//this funciton creates a cube with the material in question
{
  var cubegeometry = new THREE.BoxGeometry(Math.abs(x-x2),Math.abs(y-y2),Math.abs(z-z2));
  var cube = new THREE.Mesh(cubegeometry, materialArray[str]);
  cube.position.set((x+x2)/2,(y+y2)/2,(z+z2)/2);
  return cube;
}

//adding the panels to the scene with the materials
scene.add(drawPanel2(-10,level,front,0,level+height,front,"rDoor"));
scene.add(drawPanel2(-10,level,front+margin,0,level+height,front+margin,"crDoor"));

Answer 1

您正在使用具有标准 UV 纹理坐标的简单 BoxGeometry。映射到此几何图形上的纹理从各个方面看起来都相同 (see box example)。但是，您希望门的开放空间位于同一位置。您可以执行以下操作之一来实现：

1. 在盒子的不同侧面应用不同的材料和纹理。 BoxGeometry 的 6 个面已为多材质使用编制索引。

   a) 您必须在图像编辑软件中翻转纹理并单独保存。加载这些多个纹理。

   b) 克隆纹理并设置texture.wrapS = THREE.RepeatWrapping; texture.repeat.x = - 1; 翻转它（How to flip a Three.js texture horizontally）。

   创建一个包含 6 个材质的数组，每个材质都有其相应的纹理，并将其传递给 Mesh。

2. 更改 BoxGeometry 的 UV 纹理坐标，使一侧显示纹理翻转。

3. 你的盒子是平的。 4 面不可见。除了 BoxGeometry，您还可以创建 PlaneGeometry。设置material.side: THREE.DoubleSide 以便从两侧都可以看到平面。按照这种方法，您将不得不重新设计您的 drawPanel2 方法，因为您不能只展平几何图形的一侧，而是必须根据面板的预期方向旋转平面。