BoxGeometry 上的置换贴图只移动边缘？

Question

我刚刚开始了解 threejs，但在使用置换贴图时遇到了问题。

http://codepen.io/jpschwinghamer/pen/BWPebJ

我有一个简单的 BoxGeometry，我正在尝试将纹理应用于 phong material。除了置换贴图外，一切似乎都正常工作。我确保将段添加到 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();

Answer 1

我认为问题在于 BoxGeometry 每边仅包含 4 个顶点。应用置换贴图时，实际上是在片段级别上移动法线贴图会 "fake" 的顶点位置。

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

希望对您有所帮助！

Answer 2

您的置换贴图的问题是灰色阴影变化很小 (see it here)。
最低点应该是黑色，最高点应该是白色（或者相反，我忘记了）。
您还需要有足够的顶点才能影响它。

我认为这张贴图应该分配给凹凸贴图。
但是...您可能不想使用凹凸贴图和法线贴图。通常是其中之一。
但是，看看您正在加载的法线贴图，它没有任何效果，因为它都是相同的颜色。 (see it here)，因此，这只是您需要的凹凸贴图。

还有，MeshPhongMaterial好像没有roughnessMap或者reflectionMapuniforms/properties，所以这些都是白搭。

所以基本上，您只需要加载贴图和置换贴图，而是将置换贴图放在凹凸贴图上。
也许还有你的粗糙度图像把它放在你的 specularMap 上。

编辑。
由于图像上的 CORS，在此处嵌入代码似乎运行。
看到一个FIDDLE HERE

    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
  });

BoxGeometry 上的置换贴图只移动边缘？

Displacement map on BoxGeometry only moves edges?

three.js

normals