Three.js BoxGeometry上的置换贴图是否仅移动边？

我刚开始了解threejs的方位，我在使用置换贴图时遇到了一个问题

我有一个简单的BoxGeometry，我试图将纹理应用到phong材质。除了位移贴图外，其他所有贴图似乎都正常工作。我确保将段添加到BoxGeometry实例化中。我是否缺少一些魔力来让我的置换贴图正常工作

考虑以下代码：

  var animate, camera, displacement, geometry, light, light1, map, material, mesh, normal, reflection, renderer, roughness, textureLoader;

  renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('canvas'),
    antialiased: true
  });

  renderer.setClearColor(0xfff000);

  renderer.setSize(window.innerWidth, window.innerHeight);

  renderer.setPixelRatio(window.devicePixelRatio);

  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);

  window.scene = new THREE.Scene();

  light = new THREE.AmbientLight(0xffffff, 0.5);

  scene.add(light);

  light1 = new THREE.PointLight(0xffffff, 0.6);

  scene.add(light1);

  textureLoader = new THREE.TextureLoader();

  textureLoader.setCrossOrigin("anonymous");

  map = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_COL_2K.jpg");
  normal = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_NRM_2K.jpg");
  roughness = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_GLOSS_2K.jpg");
  reflection = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_REFL_2K.jpg");
  displacement = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_DISP_2K.jpg");

  geometry = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);

  material = new THREE.MeshPhongMaterial({
    map: map,
    normalMap: normal,
    normalScale: new THREE.Vector2(30, -1),
    roughnessMap: roughness,
    reflectionMap: reflection,
    displacementMap: displacement,
    displacementScale: 1,
    displacementBias: 0
  });

  mesh = new THREE.Mesh(geometry, material);

  mesh.position.set(0, 0, -700);

  scene.add(mesh);

  animate = function() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    requestAnimationFrame(animate);
    return renderer.render(scene, camera);
  };

  animate();

---

我认为问题在于BoxGeometry每边只包含4个顶点。应用置换贴图时，实际上移动了顶点的位置，法线贴图会在片段级别上“伪造”这些位置

为了解决您的问题，我将尝试使用顶点数更多的几何体。球体可以很好地进行测试。然后导入/生成具有更多顶点的长方体几何体

---

希望这有帮助

我认为问题在于BoxGeometry每侧仅包含4个顶点。应用置换贴图时，实际上移动了顶点的位置，法线贴图会在片段级别上“伪造”这些位置

为了解决您的问题，我将尝试使用顶点数更多的几何体。球体可以很好地进行测试。然后导入/生成具有更多顶点的长方体几何体

---

希望这有帮助

置换贴图的问题是灰色的阴影变化很小（）。
最低点应该是黑色，最高点应该是白色（或者反过来，我忘了）。
你还需要有足够的垂直度来影响它

我认为应该将此贴图指定给凹凸贴图。
但是您可能不想使用凹凸贴图和法线贴图。通常是一个或另一个。
但是，查看正在加载的法线贴图，它没有任何效果，因为它的颜色都相同。（），因此，您只需要凹凸贴图

此外，MeshPhongMaterial似乎没有

roughnessMap

或

reflectionMap

制服/属性，因此它们没有任何作用

因此，基本上，您只需要加载贴图和置换贴图，而是将置换贴图放在凹凸贴图上。
也许也可以将粗糙度图像放在镜面贴图上

编辑。
由于图像上存在CORS，此处的嵌入代码似乎无法运行。
见

---

置换贴图的问题是灰色的阴影变化很小（）。
最低点应该是黑色，最高点应该是白色（或者反过来，我忘了）。
你还需要有足够的垂直度来影响它

我认为应该将此贴图指定给凹凸贴图。
但是您可能不想使用凹凸贴图和法线贴图。通常是一个或另一个。
但是，查看正在加载的法线贴图，它没有任何效果，因为它的颜色都相同。（），因此，您只需要凹凸贴图

此外，MeshPhongMaterial似乎没有

roughnessMap

或

reflectionMap

制服/属性，因此它们没有任何作用

因此，基本上，您只需要加载贴图和置换贴图，而是将置换贴图放在凹凸贴图上。
也许也可以将粗糙度图像放在镜面贴图上

编辑。
由于图像上存在CORS，此处的嵌入代码似乎无法运行。
见

---

他正在使用10段

新的三段式。BoxGeometry（10010010010010,10,10,10）

10段式位移是否足够？不，一点也不。对于您尝试使用的纹理，它的变化非常小，您将需要大量的分段。请看我关于纹理的回答。我的错。但正如@2pha也提到的，根据位移图，它可能需要很多段。他使用10段

新三段。BoxGeometry（10010010010010，10，10）

10段足够这种位移吗？不，一点也不。对于您尝试使用的纹理，它的变化非常小，您将需要大量的分段。请看我关于纹理的回答。我的错。但是就像@2pha也提到的一样，它可能需要很多线段，这取决于位移图。啊，你说得对。我应该使用StandardMeshMaterial来生成基于物理的渲染。虽然我仍然无法使用StandardMeshMaterial来处理立方体，但我很幸运地使用了PlaneGeometry：我采纳了你的建议，增强了置换贴图上的对比度。我认为一般来说，木材纹理对于webgl来说很难处理，因为纹理的细微变化。我不确定你所说的木材纹理对于webgl来说很难处理是什么意思。你总是有机会。你读过关于法线贴图的部分了吗？如果答案对你有帮助，请接受。啊，你是对的。我应该使用StandardMeshMaterial来生成基于物理的渲染。虽然我仍然无法使用StandardMeshMaterial来处理立方体，但我很幸运地使用了PlaneGeometry：我采纳了你的建议，增强了置换贴图上的对比度。我认为一般来说，木材纹理对于webgl来说很难处理，因为纹理的细微变化。我不确定你所说的木材纹理对于webgl来说很难处理是什么意思。你总是有机会。你读过关于法线贴图的部分了吗？如果答案对你有帮助，请接受

    textureLoader = new THREE.TextureLoader();

  textureLoader.setCrossOrigin("anonymous");

  map = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_COL_2K.jpg");
  //normal = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_NRM_2K.jpg");
  roughness = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_GLOSS_2K.jpg");
  //reflection = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_REFL_2K.jpg");
  displacement = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_DISP_2K.jpg");

    // Create material
material = new THREE.MeshPhongMaterial({
    map: map,
    //normalMap: normal,
    //normalScale: new THREE.Vector2(30, -1),
    //roughnessMap: roughness,
    //reflectionMap: reflection,
    bumpMap: displacement,
    bumpScale: 100,
    //displacementBias: 0
    specularMap: roughness
  });